javascript - 如何在reactjs前端正确地将pdf字符串转换为pdf？ (带有 puppeteer 的空白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

Download File from Bytes in JavaScript
Downloaded PDF looks empty although it contains some data
这是答案，我应该在后端将 pdf 字符串编码为 base64，然后将其发送到前端以避免“字节剃须”。
在前端，我应该将 base64 字符串转换为 Uint8 数组，然后将其提供给 Blob。