从 html 生成可点击的 pdf

Question

总结：

我想从 html 动态生成 pdf。我希望生成的 pdf 可搜索/可点击 - 而不是图像。 我想要一种与 vue3 兼容的方法来做到这一点。

背景：

我有一个 Vue3 项目，它从 API 返回长而冗长的结果列表。

在网站上，结果是手风琴式的，看起来很棒。

我想让我的用户下载一个 PDF 的结果。 我想为 pdf 制作一个最小模板，显示结果列表的扩展（无手风琴）版本。

据我所知，有两种基本方法可以做到这一点：

1. 在 css 中创建打印样式，让用户将结果“保存”到文件中，作为 pdf
2. 使用多个“html2pdf”样式模块之一生成 pdf

这两种方法似乎都没有真正做到我想要的：

将用户路由到打印结果会导致移动和桌面上的行为不同，我不知道如何告诉浏览器只提供 pdf 下载。

到目前为止我发现的所有各种“htmltpdf”类型的模块都有很好的选项和默认值，但它们 output pdf 作为图像......

我希望我的用户能够拨打 select 并复制 pdf 的内容 - 例如嵌入了电话号码和链接。

有没有办法在 vue 中做到这一点； 令人愉悦且美观的下载体验以及可点击/可搜索的 pdf？

Answer 1

您可以使用 puppeteer 使用 html 创建 pdf。

第一步：安装木偶师

npm i puppeteer

第 2 步：写入 function 以将您的 html 呈现到浏览器中并将页面另存为 pdf

async getPdfFromHtml(html: string): Promise<any> {
  const browser = await puppeteer.launch({ headless: true });
  
  const page = await browser.newPage();
  await page.setContent(html);
  const pdfBuffer = await page.pdf({ printBackground: true, format: 'A4' });
  await page.close();
  await browser.close();

  return pdfBuffer;
}

第 3 步：随时随地拨打此电话 function：

const html = 'your-html-template-string';

// here you will get the pdf buffer
const pdfBuffer = await getPdfFromHtml(html);

第 4 步：现在您可以将 pdf 缓冲区发送到前端。 以下是我在 express.js 中的操作示例

const buffer = pdfBuffer.toString('base64').replace(/([^\0]{76})/g, '$1\n') + '\n\n';

res.header('Content-type', 'application/pdf');
res.send(buffer);

第 5 步：现在在前端，您只需使用 achor 标记调用此 api 即可下载 pdf。

可选：另一种选择是将此缓冲区上传到 aws-s3 并将 url 返回给 FE，一旦您重定向到该 url，将下载 pdf。