vue-下载文件导出函数功能xlsx zip

时间路人e

已于 2022-05-17 16:28:05 修改

阅读量242

点赞数

文章标签： vue.js javascript 前端

于 2021-12-09 20:54:29 首次发布

本文链接：https://blog.csdn.net/weixin_50748620/article/details/121843946

版权

这篇博客介绍了如何在JavaScript中实现文件下载功能，包括对IE和其他浏览器的支持。提供了`downloadFile`和`downloadData`两个函数，用于处理不同类型的文件下载，如zip、xlsx等，同时考虑了文件类型和内存管理。

摘要由CSDN通过智能技术生成

downloadFile 导出文件函数res 文件，fileName 导出的文件名字

在这里插入代码片
```export function downloadFile(res, fileName) {
  if (!res) {
    return
  }
  if (window.navigator.msSaveOrOpenBlob) { // IE以及IE内核的浏览器
    try {
      window.navigator.msSaveOrOpenBlob(new Blob([res]), fileName)
    } catch (e) {
      console.error(e)
    }
  } else {
    const url = window.URL.createObjectURL(new Blob([res]))
    const link = document.createElement('a')
    link.style.display = 'none'
    link.href = url
    link.setAttribute('download', fileName)// 文件名
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link) // 下载完成移除元素
    window.URL.revokeObjectURL(url) // 释放掉blob对象
  }
}

在utils 中声明后 直接在页面中调用即可

导出zip文件 res.data 就是返回的流文件

        let blob = new Blob([res.data], { type: 'application/zip' })
        let url = window.URL.createObjectURL(blob)
        const link = document.createElement('a') // 创建a标签
        link.href = url
        link.setAttribute('download', fileName)// 文件名
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link) // 下载完成移除元素
        URL.revokeObjectURL(url) // 释放内存

## 升级 可以根据需要导出的文件类型传对应的type
downloadData （流文件，文件名，导出的文件类型）
downloadData （xxx,xxxx,'application/zip'）
downloadData （xxx,xxxx,"text/csv"）
下载xlsx 默认为空可不传

export function downloadData (data, filename, type) {
  var file = new Blob([data], { type: type });
  if (window.navigator.msSaveOrOpenBlob)
    // IE10+
    window.navigator.msSaveOrOpenBlob(file, filename);
  else {
    // Others
    var a = document.createElement("a"),
      url = URL.createObjectURL(file);
    a.href = url;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    setTimeout(function () {
      document.body.removeChild(a);
      window.URL.revokeObjectURL(url);
    }, 0);
  }
}