如何在reactjs前端正确地将pdf字符串转换为pdf？（带有 puppteer 的空白 pdf）

Question

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

\n

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

\n

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

\n

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

\n

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

\n

this.props.resumePdf是一个像这样的字符串

\n

%PDF-1.4\n%\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\n1 0 obj\n<</Creator (Chromium)\n/Producer (Skia/PDF m90)\n/CreationDate (D:20210412022817+00\'00\')\n/ModDate (D:20210412022817+00\'00\')>>\nendobj\n3 0 obj\n<</ca 1\n/BM /Normal>>\nendobj\n12 0 obj...\n

\n

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

\n

Answer 1

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

这就是答案，我应该在后端将 pdf 字符串编码为 base64，然后将其发送到前端以避免“字节削减”。在前端，我应该将 base64 字符串转换为 Uint8 数组，然后将其提供给 Blob。