Vue 利用 Blob 下载原生二进制数组文件

在服务端推送过来的二进制数组(JSON格式),在前端要处理成JS原生数组以后才能做成Blob,有两个地方要注意(详细注释),代码如下:

Vue.prototype.$downloadFile = (filename, data) => {
  if (!data) return;
  let arr8 = Uint8Array.from(data); //!!!注意1:应根据数据的类型选择适当的JS原生数组类型进行转换,也就是说服务端推送的byte型数组还是int型数组等。
  //定义文件内容,类型必须为Blob 否则createObjectURL会报错
  let blob = null;
  let type = 'application/octet-binary';
  if (typeof (window.Blob) == "function") {
    blob = new Blob([arr8], {//!!!注意2:数组两边必须加上[]
      type: type
    });
  } else {
    let BlobBuilder = window.BlobBuilder || window.MozBlobBuilder || window.WebKitBlobBuilder || window.MSBlobBuilder;
    let bb = new BlobBuilder();
    bb.append([arr8]);
    blob = bb.getBlob(type);
  }
  let URL = window.URL || window.webkitURL;
  let bloburl = URL.createObjectURL(blob);
  let anchor = document.createElement("a");
  if ('download' in anchor) {
    anchor.style.visibility = "hidden";
    anchor.href = bloburl;
    anchor.download = filename;
    document.body.appendChild(anchor);
    let evt = document.createEvent("MouseEvents");
    evt.initEvent("click", true, true);
    anchor.dispatchEvent(evt);
    document.body.removeChild(anchor);
  } else if (navigator.msSaveBlob) {
    navigator.msSaveBlob(blob, filename);
  } else {
    location.href = bloburl;
  } //移除链接释放资源
};

 

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue使用POST请求下载文件二进制流,可以通过以下步骤实现: 1. 首先,需要在Vue项目安装axios,可以通过命令`npm install axios`进行安装。 2. 在需要下载文件的组件,引入axios模块,可以使用`import axios from 'axios'`导入axios。 3. 创建一个方法来处理文件下载,例如`downloadFile`。 4. 在`downloadFile`方法,使用axios发送POST请求,并设置`responseType`为`blob`,表示接收二进制流的响应。 5. 在请求的数据,设置相应的请求头`Content-Type`为`application/json`(根据接口要求)。 6. 在成功响应的回调函数,将获取到的二进制流数据转换成Blob对象并创建URL。 7. 创建一个a标签用于生成下载链接,并设置其属性href为之前创建的URL,属性download下载文件文件名。 8. 把a标签添加到页面上,并模拟点击以下载文件。 下面是一个示例代码: ```vue <template> <div> <button @click="downloadFile">下载文件</button> </div> </template> <script> import axios from 'axios'; export default { methods: { downloadFile() { axios.post('http://example.com/download', { // 请求体数据根据接口要求设置 }, { responseType: 'blob', // 设置响应数据类型为二进制流 headers: { 'Content-Type': 'application/json' // 根据接口要求设置请求头 } }) .then(response => { const url = window.URL.createObjectURL(new Blob([response.data])); // 转换成Blob对象并创建URL const link = document.createElement('a'); link.href = url; link.setAttribute('download', 'file.jpg'); // 设置下载文件文件名 link.click(); link.remove(); // 移除生成的a标签 }) .catch(error => { console.log(error); }); } } } </script> ``` 上述代码会在点击按钮时发送一个POST请求,接收到响应后将其转换成Blob对象,并通过模拟点击a标签的方式下载文件。如需更改下载文件名,可修改`setAttribute('download', 'file.jpg')`文件名部分。 注意:请求地址、请求数据、请求头等根据实际情况进行设置。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值