前端下载xlsx 提示试图打开文件时遇到错误

调用后端接口，下载xlsx表格，下载后的文件打不开提示

WPS表格在试图打开文件时遇到错误。请尝试下列方法。检查文档或驱动器的访问权限确保有足够的内存和磁盘空间确保此文件是可识别的格式

调用接口代码如下：

js 复制代码

import axios from 'axios'

axios({
  method: 'get',
  url: '/api/risk/report/export/',
  responseType: 'blob', // 'arraybuffer'
  params: this.searchParams
}).then((res) => {
  const blob = new Blob([res.data], {
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'})
  const url = window.URL.createObjectURL(blob);
  const a = document.createElement('a')
  a.href = url
  a.download = `${this.searchParams.report_type}.xlsx`
  document.body.appendChild(a)
  a.click() // 触发下载
  document.body.removeChild(a)
  window.URL.revokeObjectURL(url) // 释放内存   
})

后端返回的数据是PK.... docProps/app.xmlM ...，这其实是 Excel 文件的二进制流，因为 Excel 文件（xlsx）本质上就是一个 ZIP 压缩包，里面包含很多 XML 文件，所以开头会是 PK。

怎么判断是不是后端接口问题呢

因为后端这个下载文件的接口方法是get，用浏览器直接打开这个下载链接，发现可以下载，文件正常打开，就说明不是后端接口问题

既然浏览器用打开链接可以下载，那么我们可以用打开一个新标签页的形式来下载

js 复制代码

window.open(downloadURL, '_blank')

但是这种形式，点击下载的时候，浏览器会尝试打开一个新标签，在新标签页下载，导致浏览器下载的时候会闪一下，通过<a>标签的形式，就不会

通过`<a>`标签的形式

js 复制代码

const a = document.createElement('a')
const {serial_id, report_type, create_date, report_status}=this.searchParams
const url = `/api/risk/report/export/?serial_id=${serial_id}&report_type=${report_type}&create_date=${create_date}&report_status=${report_status}
a.href = url
a.download = `${report_type}-${report_status}.xlsx`
document.body.appendChild(a)
a.click() // 触发下载
document.body.removeChild(a)

这样就不会看起来像闪一下就可以正常下载了，虽然问题解决。但是为什么通过接口取流的方式为什么下载后的文件打不开，依然没解决。

疑问

无论接口请求用的是responseType: 'blob', // 'arraybuffer', 下载后的文件还是打不开，而且我发现接口请求，不加responseType，打印出来的response.data看起来也和加了responseType也没什么区别。

先前遇到问题下载打不开，一般是接口请求忘记加了responseType，但是当时没留意加了responseType就正常，那种情况直接打开链接是否可以正常下载

前端下载xlsx 提示试图打开文件时遇到错误

怎么判断是不是后端接口问题呢

通过<a>标签的形式

疑问

通过`<a>`标签的形式