下载功能实现(new Blob)

  • 调用下载接口
  • 创建a标签
  • 创建下载链接
  • 将a标签添加到body中
  • 添加点击事件,进行下载
  • 下载完成后移除a标签
  • 释放掉blob对象
downloadTask(params).then(res=> {

      const fileName = res.headers['content-disposition'].split('=')[1];

      const _res = res.data;

      const blob = new Blob([_res]);

      const downloadElement = document.createElement('a');

      const href = window.URL.createObjectURL(blob); // 创建下载的链接

      downloadElement.href = href;

      downloadElement.download = decodeURI(fileName); // 下载后文件名

      document.body.appendChild(downloadElement);

      downloadElement.click(); // 点击下载

      document.body.removeChild(downloadElement); // 下载完成移除元素

      window.URL.revokeObjectURL(href); // 释放掉blob对象

});

 

在Vue中创建一个新的Blob对象的方法有多种。一种方法是使用`Blob`构造函数,如以下代码所示: ```javascript const data = new Blob(['Hello, World!'], { type: 'text/plain' }); ``` 这个代码将创建一个包含字符串"Hello, World!"的Blob对象,并指定它的类型为纯文本(text/plain)。 另一种方法是使用`Blob`的静态方法`Blob.from()`,如以下代码所示: ```javascript const data = Blob.from('Hello, World!', { type: 'text/plain' }); ``` 这个代码也将创建一个包含字符串"Hello, World!"的Blob对象,并指定它的类型为纯文本。 请注意,以上代码只是示例,具体的使用方式可能会根据你的应用场景有所不同。在Vue中使用Blob对象时,你可能会需要结合其他功能或库来处理和使用它,比如上述的例子中引用的`axios`、`file-saver`和`element-ui`等。你可以根据你的具体需求和项目配置来决定如何使用Blob对象。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Vue中保存数据到磁盘文件的方法](https://download.csdn.net/download/weixin_38688097/14812508)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [Vue项目 使用new Blob() 对返回文件流下载导出文件时封装调用示例(即文件流转Blob格式实现下载)](https://blog.csdn.net/Rich_lady/article/details/127616185)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值