如何在reactjs前端将pdf字符串正确转换为pdf?(空白pdf与puppter)

Question

我使用puppeteer在后端生成pdf并将其发送到前端，代码如下：

exports.createPdf = async (req, res) => {
const { resumeContent } = req.body;
console.log("datadatadatadatadatadatadatadatadatadata", resumeContent);
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setContent(resumeContent, { waitUntil: ['domcontentloaded', 'networkidle0'] });
const resumePdf = await page.pdf(
// { path: './resume.pdf' }
);
await browser.close();
res.set({ 'Content-Type': 'application/pdf', 'Content-Length': resumePdf.length });
res.send(resumePdf);
};

如果我添加{ path: './resume.pdf' }，puppter会将pdf文件保存在后端服务器中，我已经检查过了，这正是我想要的。

现在我希望把它发送到前端，而不是保存在后端，我的前端代码如下所示：

await dispatch({
type: 'resume/createResumePdf',
payload: {
resumeContent
}
});
console.log("this.props.resumePdf", this.props.resumePdf)
const blob = new Blob([this.props.resumePdf], {
type: 'application/pdf'
});
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = 'resume.pdf';
link.click();

this.props.resumePdf是一个类似字符串的

%PDF-1.4
%����
1 0 obj
<</Creator (Chromium)
/Producer (Skia/PDF m90)
/CreationDate (D:20210412022817+00'00')
/ModDate (D:20210412022817+00'00')>>
endobj
3 0 obj
<</ca 1
/BM /Normal>>
endobj
12 0 obj...

然而，我只能在前端得到一个空白的pdf。大多数机具来自https://blog.risingstack.com/pdf-from-html-node-js-puppeteer/

Answer 1

从JavaScript中的字节下载文件下载的PDF看起来是空的，尽管它包含一些数据

答案是，我应该在后端将pdf字符串编码为base64，然后将其发送到前端，以避免"；字节剃除"；。在前端，我应该将base64字符串转换为Uint8数组，然后将其提供给Blob。