使用 JS/TS 从二进制字符串创建并下载 PDF 文件

Question

对服务器的 Axios 请求以二进制字符串形式响应 PDF 的内容。

\n\n

export const fetchPDFfile = async (id: string): Promise<string> => {\n  const { data } = await http.get<string>(`${baseUrl}/${id}.pdf`);\n  return data;\n};\n

\n\n

Chrome 开发工具和控制台记录数据的响应如下：

\n\n

%PDF-1.4\n%\xc3\xa2\xc3\xa3\xc3\x8f\xc3\x93\n2 0 obj <</ColorSpa ......\n..........\nstartxref\n10991\n%%EOF\n

\n\n

\n
• 定义string为 Axios 响应体的预期类型，对吗？或者它应该（投射到）Blob？
\n

\n\n

现在我想在客户端下载这个 PDF 文件。关于此有很多问题，但没有一个对我有用，也没有一个有明确的答案。

\n\n

所以到目前为止我所做的是（在 React 组件中）：

\n\n

    const data = await fetchPDFfile(props.id);\n    const blob = new Blob([data], { type: \'application/pdf\' });\n    const href = window.URL.createObjectURL(blob);\n    const theLink = document.createElement(\'a\');\n    theLink.href = href;\n    theLink.download = props.id + \'.pdf\';\n    document.body.appendChild(theLink);\n    theLink.click();\n    document.body.removeChild(theLink);\n

\n\n

这将下载一个包含 3 个空白页的 PDF 文件。页数正确，原始文档应为 3 页。但我看到了白皮书。

\n\n

const href = window.URL.createObjectURL(data); // istead of blob抛出错误。

\n\n

我应该如何转换和下载这个PDF文件？一般来说，是需要上面的过程，还是直接从服务器下载？（类似于cordova-plugin-file-transfer 的作用）

\n

Answer 1

设想

您希望当用户单击链接时下载该文件。

解决方案1-

直接放入linkin<a>标签即可。

缺点 - 如果出现问题，错误消息无法显示在屏幕上。

所以这就引出了下一个解决方案。

解决方案2-

如果收到成功消息，请点击 URL 作为 API 并下载文件。为此，我使用File-server.js

{responseType: 'blob'}**在提出请求时不要忘记设置

http.get<string>(`${baseUrl}/${id}.pdf`, {responseType: 'blob'})

因为我们不希望得到这样的回应Content-Type: application/json

示例代码：

import FileSaver from 'file-saver';

downloadPdf() {
    var blob = new Blob([data], {type: "application/pdf"});
    FileSaver.saveAs(blob, "filename");
}