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

2024-05-19 • 问答

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

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

Chrome devtools中的响应以及控制台记录数据的方式如下：

%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); // istead of blob引发错误。

我应该如何转换和下载此PDF文件？通常，是否需要上述过程，还是应该直接从服务器下载该过程？（类似于cordova-plugin-file-transfer所做的事情）

首先将Blob用作Promise的通用参数。

我将使用fetch API，因为可以很容易地对其进行测试。

fetch('https://www.jianjunchen.com/papers/CORS-USESEC18.slides.pdf').then(x => x.blob()).then(b => console.log(b.type))

如果文件确实是pdf，这将记录“ application / pdf”。

如果您得到的不是PDF格式的Blob，则将其重新包装为pdf类型的Blob可能会破坏数据。如果确实遇到了string，并且将其转换为pdf类型的Blob，则该文件将被破坏，因为PDF无效。

如果您想知道b是否只是blob的{{1}}，它应该说console.log(b instanceof Blob)。如果您确实收到了一个Blob，则不必像在true中那样创建一个Blob。

这个例子很好用：

new Blob([data])

对不起，代码样式损坏，但是我无法正确粘贴。

场景

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

解决方案1-

直接将link放在<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");
}

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

lk2009xx 回答：使用JS / TS从二进制字符串创建和下载PDF文件

大家都在问