Blob流数据下载

比较简单,直接上代码

    // 创建blob对象,解析流数据
    const blob = new Blob([res], {
      // 设置返回的文件类型
      type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
    });
    //下载方法
    const a = document.createElement("a"); // 创建a标签,模拟点击事件
    const URL = window.URL || window.webkitURL; // 兼容webkix浏览器,处理webkit浏览器中href自动添加blob前缀,默认在浏览器打开而不是下载
    const herf = URL.createObjectURL(blob); // 创建URL 对象
    a.href = herf; // 下载链接
    a.download = "示例"; // 下载文件名;若后端没有返回,可以自己写'文件.xlsx'
    document.body.appendChild(a);
    a.click(); // 点击a标签下载
    document.body.removeChild(a); // 移除URL 对象
    window.URL.revokeObjectURL(herf);

 常见的文件类型:

application/msword    //word(.doc)
application/vnd.ms-powerpoint    //powerpoint(.ppt)
application/vnd.ms-excel   //excel(.xls)
application/vnd.openxmlformats-officedocument.wordprocessingml.document    //word(.docx)
application/vnd.openxmlformats-officedocument.presentationml.presentation    //powerpoint(.pptx)
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet    //excel(.xlsx)
application/x-rar-compressed    //rar
application/zip    //zip
application/pdf    //pdf
video/*   // 视频文件
image/*   //图片文件
text/plain    //纯文本
text/css    //css文件
text/html   //html文件
text/x-java-source    //java源代码
text/x-csrc    //c源代码
text/x-c++src    //c++源代码

### 如何使用Blob流实现文件下载 #### 创建Blob对象并触发下载 为了创建一个可以用于下载的`Blob`对象,首先需要准备要下载的数据。这些数据可能是来自服务器响应的内容或者是前端生成的一些结构化数据。 对于简单的文本文件或其他已知编码格式的小型文件来说,可以直接构建字符串形式的数据作为`Blob`构造函数的第一个参数传递进去: ```javascript // 构建一些简单文本内容 const content = "这是一些测试文字"; // 定义MIME类型为纯文本 const blob = new Blob([content], { type: 'text/plain' }); ``` 当涉及到更复杂的情况比如Word文档、Excel表格或者其他二进制格式时,则通常是从服务端获取到相应的字节序列之后再转换成`Blob`对象。此时应该注意设置正确的MIME类型来确保浏览器能够识别所下载文件的实际格式[^1]。 一旦有了`Blob`对象就可以利用HTML5提供的API来进行实际的下载动作了。下面是一个完整的例子展示如何将上述定义好的`Blob`保存成本地文件: ```html <!-- HTML部分 --> <a id="downloadLink" style="display:none;"></a> <script> function triggerDownload(blob, filename){ // 获取页面中的隐藏链接元素 const link = document.getElementById('downloadLink'); // 设置链接的目标URL指向由传入的blob对象生成的对象URL link.href = URL.createObjectURL(blob); // 给链接指定下载后的文件名 link.download = filename; // 执行点击事件模拟用户交互行为从而启动下载过程 link.click(); // 清理不再使用的Object URL以释放内存资源 setTimeout(() => { window.URL.revokeObjectURL(link.href); }, 0); } // 测试用法 const testContent = "你好世界!"; const testBlob = new Blob([testContent], {type : 'text/plain'}); triggerDownload(testBlob,"hello.txt"); </script> ``` 这段脚本展示了怎样动态创建一个临时的锚点(`<a>`)标签并通过JavaScript编程方式触发展开文件下载对话框的过程。这里的关键在于使用了`window.URL.createObjectURL()`方法把给定的`Blob`对象转化为可以在当前窗口打开的有效地址;而`link.download`属性则决定了最终被保存下来的文件名称[^3]。 另外,在Vue.js这样的现代框架中也可以很方便地集成这种基于`Blob`的文件处理逻辑。例如,在发起HTTP请求获得远程资源后立即将其转存为客户机上的本地副本[^4]: ```javascript axios({ method: 'get', url: `${baseURL}/api/excel`, responseType: 'arraybuffer' }).then(response => { const blob = new Blob([response.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}) const link = document.createElement('a') link.href = window.URL.createObjectURL(blob) link.download = 'example.xlsx' document.body.appendChild(link) link.click() document.body.removeChild(link) setTimeout(function () { window.URL.revokeObjectURL(url) }, 100); }) ``` 此片段说明了一个典型的场景——从后台接口拉取Excel工作簿,并立即提供给访客进行下载。值得注意的地方有两点:一是指定了恰当的`responseType`选项使得Ajax库能正确解析返回来的二进制数据;二是选择了适合于目标文件扩展名(`xlsx`)对应的媒体类型描述符[^2]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值