vue 处理后台返回的文件流生成excel

最新推荐文章于 2023-11-16 16:31:15 发布

咖啡有点酷

最新推荐文章于 2023-11-16 16:31:15 发布

阅读量784

点赞数

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

本文链接：https://blog.csdn.net/qq_40295815/article/details/120722266

版权

vue 同时被 2 个专栏收录

62 篇文章 4 订阅

订阅专栏

10 篇文章 0 订阅

订阅专栏

该博客介绍了如何利用excelBlob.js处理文件流，实现Excel的导出和预览功能。通过引入moment.js库来生成日期格式化的文件名，并设置不同的导出选项。在接口调用中，配置了responseType为'blob'，确保能够接收到文件流数据。最后，展示了如何在页面上创建并触发下载链接，以及清理资源的步骤。

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

以下为excelBlob.js

/*用来处理文件流导出*/
import moment from "moment";

export default function excel(data, name, append = "xls", preview = false) {
  let blob = new Blob([data])
  let xlsxName = moment(new Date()).format('YYYY-MM-DD') + `${name}.${append}`
  if (preview) {
    xlsxName = name
  }
  const elink = document.createElement('a')
  elink.download = xlsxName
  elink.style.display = 'none'
  elink.href = URL.createObjectURL(blob)
  document.body.appendChild(elink)
  elink.click()
  URL.revokeObjectURL(elink.href) // 释放URL 对象
  document.body.removeChild(elink)
}

页面引用时

import excel from "../../util/excelBlob";

接口调用时（文件流模板下载导出都可以这样用）

this.api.PersonEXPORT(params).then(res => excel(res, "单子导出", "xlsx"))

接口API设置

export const GetlTemplates = (data, showMsg) => ajax({

  url: config.javaAprightBill + types.Get__TEMPS,

  data,

  method: 'post',

  config: {  // 加上这部分即可

    responseType: 'blob'

  },

  showMsg

})