当前位置：首页 > article >正文

【前端实现pdf导出】

article 2024/12/27 4:37:14

前端实现pdf导出

在前端实现PDF导出有几种不同的方法，取决于你想要导出的内容类型和复杂度。以下是几种常见的实现方式：

使用 jsPDF：

jsPDF 是一个流行的用于生成 PDF 的 JavaScript 库。它允许你在客户端创建 PDF 文档，添加文本、图像和其他元素，并将其下载到用户的计算机上。
你可以结合 html2canvas 来将 HTML 页面或其部分转换为画布，然后将该画布作为图像添加到 PDF 中。

import { jsPDF } from "jspdf";
import html2canvas from 'html2canvas';

function exportPDF() {
  const element = document.getElementById('content-to-print'); // 要导出的HTML元素

  html2canvas(element).then(canvas => {
    const imgData = canvas.toDataURL('image/png');
    const pdf = new jsPDF();
    const imgProps = pdf.getImageProperties(imgData);
    const pdfWidth = pdf.internal.pageSize.getWidth();
    const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;

    pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
    pdf.save("download.pdf");
  });
}

使用 PDFMake：

PDFMake 是另一个强大的 JavaScript 库，它提供了更多的布局控制选项。它可以用来创建复杂的 PDF 文档，包括表格、列表、字体样式等。

import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';
pdfMake.vfs = pdfFonts.pdfMake.vfs;

function createPdf() {
  const docDefinition = {
    content: [
      'First paragraph',
      'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'
    ]
  };

  pdfMake.createPdf(docDefinition).download('document.pdf');
}

使用 Puppeteer（适用于Node.js环境）：

Puppeteer 是一个 Node.js 库，它提供了一个高级 API 来控制无头 Chrome 或 Chromium 浏览器。你可以用它来加载网页并直接导出为 PDF。
注意：Puppeteer 需要在服务器端运行，因为它需要启动浏览器实例。它不适合纯前端环境。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com', {waitUntil: 'networkidle2'});
  await page.pdf({path: 'example.pdf', format: 'A4'});

  await browser.close();
})();

使用浏览器内置功能：
- 如果只是简单的导出，可以考虑使用浏览器的打印功能，通过 window.print() 方法触发打印对话框，用户可以选择保存为 PDF。
- 这种方法简单但对格式控制有限，适合快速导出而不需要特别定制的情况。
```
function printContent() {
  window.print();
}
```
使用其他库：
- 除了上述提到的库之外，还有其他一些库也可以帮助你完成 PDF 导出的任务，如 PDF-lib（适合修改现有的 PDF）、Print.js 等。