js 导出文件

科技达人ლ(′◉❥◉｀ლ)

已于 2022-07-13 17:23:05 修改

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue js 文章标签： javascript 前端 vue.js

于 2022-04-02 11:35:38 首次发布

本文链接：https://blog.csdn.net/m0_56175362/article/details/123916628

js 同时被 2 个专栏收录

50 篇文章

订阅专栏

vue

17 篇文章

订阅专栏

这段代码展示了如何将API返回的数据转换为Blob对象，并通过创建一个隐藏的a标签来触发文件下载。它首先定义了一个时间戳加扩展名的文件名，然后创建Blob对象，设置其类型为'application/octet-stream'。接着，利用URL.createObjectURL创建一个指向Blob的URL，再创建a标签，设置下载属性和href。最后，模拟点击a标签触发下载，并在下载完成后移除a标签和释放URL。

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

 //转换成Blob数据并下载  api请求后传过的数据进行转换下载
    convertRes2BlobAndDownload: function(data) {
      const filename = 'export-'+new Date().getTime()+'.xls';
      //type 限制文件类型 application/octet-stream
      const blob = new Blob([data], { type: 'application/octet-stream' }); 
      // 创建新的URL并指向File对象或者Blob对象的地址
      const blobURL = window.URL.createObjectURL(blob);
      // 创建a标签，用于跳转至下载链接
      const tempLink = document.createElement('a')
      tempLink.style.display = 'none'
      tempLink.href = blobURL
      tempLink.setAttribute('download', decodeURI(filename))
      // 兼容：某些浏览器不支持HTML5的download属性
      if (typeof tempLink.download === 'undefined') {
        tempLink.setAttribute('target', '_blank')
      }
      // 挂载a标签
      document.body.appendChild(tempLink);
      tempLink.click()
      document.body.removeChild(tempLink);
      // 释放blob URL地址
      window.URL.revokeObjectURL(blobURL);
    },