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

Question

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

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

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

%PDF-1.4
%âãÏÓ
2 0 obj <</ColorSpa ......
..........
startxref
10991
%%EOF

• 将 string 定义为 Axios 响应正文的预期类型，对吗？或者它应该(转换为)Blob？

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

到目前为止我所做的是(在 React 组件中):

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

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

const href = window.URL.createObjectURL(data);//而不是 blob 抛出错误。

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

Answer 1

场景

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

解决方案1-

直接把link在<a>标签。

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

因此它引出了下一个解决方案。

解决方案2-

如果收到成功消息，请点击作为 API 的 URL 并下载文件。为此，我使用 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");
}