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

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' }，puppteer 会将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

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