小编FOR*_*EST的帖子

如何在reactjs前端正确地将pdf字符串转换为pdf?(带有 puppteer 的空白 pdf)

我使用 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
Run Code Online (Sandbox Code Playgroud)\n

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

\n

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

\n
await dispatch({\n            type: \'resume/createResumePdf\',\n            payload: {\n                resumeContent\n            }\n        });\n …
Run Code Online (Sandbox Code Playgroud)

javascript pdf frontend reactjs puppeteer

5
推荐指数
1
解决办法
3465
查看次数

如何在前端将缓冲区转换为pdf

我使用 Puppeteer 生成包含 pdf 信息的缓冲区并将其发送到前端。这是后端API:

exports.getPDF = async (req, res) => {
    const { content } = req.query;
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.setContent(`
      <!DOCTYPE html>
      <html>
      <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>HTML to PDF Example</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
      </head>
      <body>
        ${content}
      </body>
      </html>
      `);
    const buffer = await page.pdf();
    await browser.close();
    
    return res.apiResponse(buffer);
};
Run Code Online (Sandbox Code Playgroud)

然后我尝试将缓冲区转换为pdf文件并打开它但失败,它说无法加载PDF文档。

我在前端做了什么:

await dispatch({
    type: 'resume/fetchResumePDF',
    payload: {
        content: resumeContent
    }
});
console.log(this.props.resumePDF);

const file = …
Run Code Online (Sandbox Code Playgroud)

javascript node.js reactjs puppeteer

2
推荐指数
1
解决办法
1万
查看次数

标签 统计

javascript ×2

puppeteer ×2

reactjs ×2

frontend ×1

node.js ×1

pdf ×1