关于前端js文件blob下载问题

Question

前端代码

const blob = new Blob([res])
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = url
link.download = fileName
link.click()
window.URL.revokeObjectURL(url)

后端代码

res.sendFile(path.resolve(uploadDir, fileName))

响应的预览

前端中res的打印

不知道是哪方面有什么问题，导致下载后的文件是无法打开的

这个问题困扰了我很久了，之前也是pdf预览读取到的是打不开的，最后让后端转换成图片然后base64才完成的，真心求教

Answer 1

你问题我猜测是
1.ajax/axios需要指定响应中包含的数据类型:responseType: "blob"
以axios为例：

axios({
        url: this.downloadImgSrc, //URL,根据实际情况来
        method: "get",
+       responseType: "blob"
}).then(function (response) {
.....      
})

ajax设置参考responseType
2.没有设置文件格式const blob = new Blob([res], { type: res.type });
Blob的第二个参数是指定对象所包含数据的 MIME 类型。如果类型未知，则该值为空字符串。

可以参考下我之前写的这2篇文章：
前端常用文件下载上传方法
如何预览以及下载pdf文件

---

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。