情况:
前端:Vue。后端:Laravel。
在网络应用程序中,我需要让用户下载某些 pdf 文件:
- 我需要 Laravel 获取文件并将其作为 API GET 请求的响应返回。
- 然后在我的 Vue 网络应用程序中,我需要获取文件并下载它。
编码:
接口:
$file = public_path() . "/path/test.pdf";
$headers = [
'Content-Type' => 'application/pdf',
];
return response()->download($file, 'test.pdf', $headers);
网络应用:
downloadFile() {
this.$http.get(this.apiPath + '/download_pdf')
.then(response => {
let blob = new Blob([response.data], { type: 'application/pdf' })
let link = document.createElement('a')
link.href = window.URL.createObjectURL(blob)
link.download = 'test.pdf'
link.click()
})
}
结果:
使用此代码,我确实设法下载了一个 pdf 文件。问题是pdf是空白的。
不知何故,数据被破坏了(不是这个特定的 pdf 文件的问题,我尝试了几个 pdf 文件 - 结果相同)
来自服务器的响应:
来自服务器的响应本身很好:
PDF:
问题可能出在pdf文件上。它看起来肯定是损坏的数据。这是 response.data
外观的摘录:
问题:
如何使用 Laravel for API 和 Vue for the web app 正确下载 pdf 文件?
谢谢!
原文由 FrancescoMussi 发布,翻译遵循 CC BY-SA 4.0 许可协议
解决方案:
上面的代码是正确的。缺少的是添加正确的
responseType
作为arraybuffer
。我被响应中的那些
????
吓到了,这误导了我。这些问号没问题,因为 pdf 是二进制数据,应该由适当的读者阅读。阵列缓冲区:
而arraybuffer正是用来保存二进制数据。
这是来自 Mozilla 网站的定义:
ResponseType
字符串表示响应的类型。通过告诉它一个数组缓冲区,它会相应地处理数据。只需添加 responseType,我就可以正确下载 pdf 文件。
编码:
这是更正后的 Vue 代码(与以前完全相同,但添加了 responseType):
编辑:
这是一个更完整的解决方案,它考虑了其他浏览器的行为: