封装blob文件流下载方法

最新推荐文章于 2025-06-18 15:11:21 发布

前端黄大仙

最新推荐文章于 2025-06-18 15:11:21 发布

阅读量768

点赞数

CC 4.0 BY-SA版权

分类专栏： html、css、js 文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/guorui999/article/details/128814896

html、css、js 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了使用fetch和axios实现从URL下载Excel文件的方法，并展示了如何预览图片及将KML文件转换为GeoJSON格式的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

导出excel

fetch版

exportFn(url, folderName) {
    fetch(url, {
        method: 'get',
        responseType: 'blob'
    }).then(res => res.blob())
      .then(blob => {
        let a = document.createElement('a')
        // 获取 blob 本地文件连接 (blob 为纯二进制对象，不能够直接保存到磁盘上)
let url = window.URL.createObjectURL(newBlob([blob], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }));   
        a.href = url;
        //定义导出的文件名
        a.download = `${folderName}.xls`;  
        a.click();
        window.URL.revokeObjectURL(url);
    })
}

axios版

exportFn(url, folderName) {
axios({
    method: 'get',
    url: url,
    responseType: "blob"
}).then(res => {
    if (res.type === 'application/vnd.ms-excel') {
        const blob = newBlob([res]);
        const a = document.createElement("a");
        const href = window.URL.createObjectURL(blob);
        a.href = href;
        a.download = folderName + '.xlsx';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        window.URL.revokeObjectURL(href);
    }
}).catch(function (error) {
    console.log(error);
});
}

图片预览

previewImg(url) {
    fetch(url, {
        method: 'get',
        responseType: 'blob'
    }).then(res => res.blob())
        .then(blob => {
        // 获取 blob 本地文件连接 (blob 为纯二进制对象，不能够直接保存到磁盘上)
let imgUrl = window.URL.createObjectURL(newBlob([blob], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }));   
        return imgUrl
    })
}

kml转geojson

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