使用 Web API 下载 PDF 遇到的坑

作者：V君 发布于：2022-4-28 20:13 Thursday 分类：挖坑经验

TL;DR：

  • 将 XHR 的 responseType 设置为 "arraybuffer"
  • 如果使用 axios 则要在参数对象加 responseType:'arraybuffer'
  • 获取响应之后用 response 创建 Blob 然后交给 ObjectURL（别忘记type）
  • 将创建好的 ObjectURL 交给 IFrame 直接呈现，或者交给 A 标签实现下载

听我扯扯：

前后端分离的项目中遇到需要预览（下载）PDF 的需求，而且用了基于请求头而非 Cookie 的验证方式，因此无法走 IFrame 直接把 API 的 URL 送进去。绕了一圈远路尝试解决验证问题，无果。

回过头想起可以让 XHR 下二进制数据的做法，咕狗“XHR PDF”找到爆栈上面的《XMLHttpRequest to open PDF in browser》。（其实这时候已经看到有回答在 XHR 指定 type 为 'arraybuffer' 了）然鹅把 BLOB 链接放进 IFrame 之后，文字和图片全都不见了，只剩下几页空白页（页数正确）。已经确认过后端输出的 PDF 正常，而通过 A 标签的 HRef 放入 BLOB 连接下载的文件大小跟服务器响应的不一样，体积大约翻了一倍。

在浏览器调试脚本发现 XHR 的 reponse 是字符串，在控制台用 typeof 确认过眼神，这时候只能去咕狗了，“xhr binary data”，第一条返回 MDN 上的《发送和接收二进制数据 - Web API 接口参考》，里面提到了 XHR 的 responseType 属性，设置成 "arraybuffer" 才能避免浏览器把输出内容错误地当成文本来解析。

至此问题完美解决，可喜可贺！这个月差点找不到值得发表的内容 _(:з)∠)_

标签: javascript Web技术 前端工程

评论(0) 引用(0) 浏览(311)

Powered by emlog 去你妹的备案 sitemap