中后端做Excel导出功能返回数据流前端如何做处理

exportFile(params).then(res => {
        // 直接返回来就是blob数据
        if (res) {
          const xlsx = 'application/vnd.ms-excel'
          const blob = new Blob([res], { type: xlsx })
          const a = document.createElement('a') // 转换完成,创建一个a标签用于下载
          a.download = 'fileName.xls'
          a.href = window.URL.createObjectURL(blob)
          a.click()
          a.remove()
        } else {
          this.$message.error('导出失败')
}

exportFile调用的是后端接口,直接将返回的文件数据转成Blob。注意:这里需要指明下载的文件类型,excel对应的是:'application/vnd.ms-excel'。

a.download = 'fileName.xls' 指定下载文件的名称,包含后缀名,如果后端的excel是xls格式,那前端也必须是xsl格式,否则下载后打开文件会报错。如果是xslx格式则修改为对应的xlsx格式,必须对应。

打开或者预览全是乱码的解决办法:

1. 后端接口返回的blob文件流,你下载下来的文件是乱码的?

解决办法 :让你的后端设置流的编码为utf-8。请跟后端大佬说,一定要给blob格式的文件流。

2. 后端返回的blob文件流,并且已经设置了utf-8,但是你接受的接口返回值,依然是乱码?

解决办法: 肯定没有设置 responseType: “arraybuffer”。

 

posted on 2023-03-01 10:44  ranyonsue  阅读(888)  评论(0编辑  收藏  举报

导航