封装blob文件流下载方法

导出excel

• fetch版

exportFn(url, fileName) {
    fetch(url, {
        method: 'get'
    }).then(res => res.blob())
      .then(blob => {
        const link = document.createElement('a')
        const url = window.URL.createObjectURL(blob);   
        link.href = url;
        //定义导出的文件名
        link.download = `${fileName}.xls`;  
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        window.URL.revokeObjectURL(url);
    })
}

• axios版

exportFn(url, fileName) {
axios({
    method: 'get',
    url: url,
    responseType: "blob"
}) .then((res) => {
        const { headers, data } = res
        const a = document.createElement('a')
        // 获取 blob 本地文件连接 (blob 为纯二进制对象，不能够直接保存到磁盘上)
        const url = window.URL.createObjectURL(new Blob([data], { type: headers['content-type'] }))
        a.href = url
        //定义导出的文件名
        a.download = `${fileName}.xls`
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
        window.URL.revokeObjectURL(url)
      })
      .catch((err: AxiosError) => {
        Promise.reject(err)
      })
}

图片预览

previewImg(url) {
    fetch(url, {
        method: 'get',
        responseType: 'blob'
    }).then(res => res.blob())
        .then(blob => {
        const fileReader = new FileReader();
        fileReader.readAsDataURL(blob);
        fileReader.onloadend = function() {
            imgUrl.value = reader.result;
        }
    })
}

kml转geojson

getKml(url) {
    fetch(url,{method:'get',responseType: 'blob'}).then(res=>res.blob()).then(blob => {
        const reader = new FileReader();
        reader.readAsText(blob,'utf-8');
        reader.onload = function (e) {
            const xml = new DOMParser().parseFromString(e.target.result,'text/xml')
            const geojson = togeojson.kml(xml, {
                style: true
            })
            return geojson
        }
    })
}