vue中使用pdf-lib+html2canvas生成pdf

在 Vue 中使用 pdf-lib 和 html2canvas 生成 PDF 文件需要进行以下几个步骤：

1. 安装依赖库
在项目中使用 npm 或者 yarn 安装 pdf-lib 和 html2canvas 依赖库。

2. 引入依赖库
在需要使用的 Vue 组件中引入 pdf-lib 和 html2canvas 依赖库。

import { PDFDocument, StandardFonts } from 'pdf-lib';
import html2canvas from 'html2canvas';

3. 创建 PDF 文档对象
使用 pdf-lib 库中的 PDFDocument 类来创建 PDF 文档对象，并添加需要生成 PDF 的内容。

const pdfDoc = await PDFDocument.create();
const page = pdfDoc.addPage([595.28, 841.89]); // 设置页面大小
const font = await pdfDoc.embedFont(StandardFonts.HelveticaBold);

// 在页面上添加文本内容
page.drawText('Hello, PDF!', {
    x: 50,
    y: 700,
    size: 24,
    font: font,
    color: rgb(0, 0, 0),
});

4. 将 HTML 元素转换为 Canvas
使用 html2canvas 库中的 toCanvas 方法将需要生成 PDF 的 HTML 元素转换为 Canvas 对象。

const canvas = await html2canvas(document.getElementById('pdf-content'));

5. 将 Canvas 对象转换为 PNG 图片
将上一步得到的 Canvas 对象转换为 PNG 格式的图片。

const pngUrl = canvas.toDataURL('image/png');

6. 添加 PNG 图片到 PDF 文档中
将上一步得到的 PNG 图片添加到 PDF 文档对象中。

const pngImage = await pdfDoc.embedPng(pngUrl);
page.drawImage(pngImage, {
    x: 50,
    y: 450,
    width: 500,
    height: 250,
});

7. 导出 PDF 文件
使用 pdf-lib 库中的 save 方法将生成的 PDF 文件导出。

const pdfBytes = await pdfDoc.save();
const blob = new Blob([pdfBytes], { type: 'application/pdf' });
saveAs(blob, 'example.pdf'); // 将 PDF 文件保存到本地