Vue使用new Blob进行表格导出

最新推荐文章于 2024-08-31 11:08:40 发布

Gaoju_liz

最新推荐文章于 2024-08-31 11:08:40 发布

阅读量600

点赞数

分类专栏：学习之旅文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Gaoju_liz/article/details/128956298

版权

学习之旅专栏收录该内容

14 篇文章 0 订阅

订阅专栏

该代码示例展示了在Vue应用中如何利用后台接口返回的数据，通过newBlob方法创建文件对象，然后进行表格数据的导出。当接口返回数据后，创建一个Blob对象，指定文件类型为application/vnd.ms-excel，并生成下载链接。对于非IE浏览器和IE10+，分别采用不同的方式进行文件下载。

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

Vue使用new Blob进行表格导出

1.用到后台接口返回
2.new Blob方法

代码示例

// 导出订单
    async afterOrderDataExport() {
      this.$message({
        message: '数据导出中，请勿重复操作！',
        type: 'success'
      })
      const res = await afterOrderExport(this.formInline)
      if(!res){
        return //判断接口返回数据是否存在  有则往下走/无则停止
      }
      const blob = new Blob([res],{ type: 'application/vnd.ms-excel' })
      const fileName = '售后订单数据明细表.xls'
      if ('download' in document.createElement('a')) {
         // 非IE下载
         const elink = document.createElement('a')
         elink.download = fileName
         elink.style.display = 'none'
         elink.href = URL.createObjectURL(blob)
         document.body.appendChild(elink)
         elink.click()
         URL.revokeObjectURL(elink.href) // 释放URL 对象
         document.body.removeChild(elink)
       } else {
        // IE10+下载
        navigator.msSaveBlob(blob, fileName)
      }
    },