前端生成PDF文件全面介绍

在现代web应用程序、商业报告和其他文档生成应用程序中，将网页内容转换为PDF格式是一个常见的需求。传统的做法是使用类似于Adobe Acrobat等PDF生成库，并且这些库大多数只适用于后端。但是，随着前端web技术的发展，现在可以使用JavaScript或TypeScript在浏览器中直接生成PDF文件。这种方法有很多优点，如避免服务器负载，并且使得PDF生成的过程变得更加灵活。

一、前端生成PDF下载

有时候，用户需要下载由前端生成的PDF文件。这是可以通过使用Blob和URL.createObjectURL()方法实现的。通过将一个Blob对象直接放在URL上，可以在客户端上直接生成下载链接。以下是实现的代码示例：

const pdfBlob = new Blob([pdfData], { type: 'application/pdf' });
const pdfUrl = URL.createObjectURL(pdfBlob);

const link = document.createElement('a');
link.href = pdfUrl;
link.download = "example.pdf";
document.body.appendChild(link);
link.click();

在获得链接之后，我们还需要创建一个a元素，将其设置为下载链接，并且通过模拟点击标签来强制浏览器开始下载PDF。

二、前端生成PDF功能

前端生成PDF功能是通过将HTML内容转换为PDF实现的，这可以通过许多JavaScript PDF库来完成。其中最受欢迎的是jsPDF、pdfmake、html2pdf以及wkhtmltopdf。以上的PDF生成器都可用于前端实现HTML到PDF的转换。jsPDF是一个开源库，可以生成HTML5 JavaScript应用程序。通过jsPDF，开发人员可以通过使用JavaScript规范简单地创建和保存PDF文件。

const doc = new jsPDF();
doc.text("Hello World", 10, 10);
doc.save("example.pdf");

以上代码中，我们创建了一个空的PDF文档，然后在其上添加一些文本。最后通过调用save()方法来保存该文档。如果您需要将一个现有的HTML文档转换为PDF，则可以使用html2canvas和jsPDF一起使用。

html2canvas(document.body).then(canvas => {
    const imgData = canvas.toDataURL('image/png');
    const pdf = new jsPDF();
    pdf.addImage(imgData, 'PNG', 0, 0);
    pdf.save("example.pdf");
});

通过html2canvas，我们可以生成整个HTML页面的截图，将其转换为PNG图像，并将其添加到新创建的PDF文档中。

三、前端生成PDF可复制

前端生成的PDF文件通常不能够复制其中的文本和内容。这是因为通常生成的PDF是扫描PDF，每一页上的文本是一个图片而不是真正的文本。要解决这个问题，我们可以使用一种新的PDF生成方法，即使用HTML/CSS作为源，在客户端上生成PDF文件。

这种方法生成的PDF是真正的PDF文件，而非扫描文件。这些PDF文件可以完全被选择、复制和粘贴，此外还可以搜索其中的内容。实现这种PDF生成方案的库包括：PDFKit、Puppeteer和wkhtmltopdf。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('http://example.com');
  const pdf = await page.pdf({ format: 'A4' });
  await browser.close();
  return pdf;
})();

以上代码可以在客户端上使用Puppeteer来生成一个真正的PDF文件。Puppeteer是一个完全支持Chrome/Chromium API的库，它可以通过JavaScript来控制浏览器，这样就可以生成非常完美的PDF文件。

四、前端生成PDF文件

虽然前端生成PDF的主要目的是在浏览器中生成文件，但是通过使用Node.js、Express或其他web框架，也可以在后台生成PDF文件。例如，通过使用html-pdf库，如下代码所示，就可以在后台生成PDF文件：

const pdf = require('html-pdf');
const fs = require('fs'); 
const html = fs.readFileSync('./template.html', 'utf8');

pdf.create(html).toFile('./output.pdf', (err, res) => {
    if (err) return console.log(err);
    console.log(res);
});

在上面的示例中，我们首先将HTML模板读入到内存中，然后将其作为参数传递给html-pdf库的create()方法。最后，我们将PDF文件保存在硬盘上。

五、前端生成PDF方案

生成PDF的方案取决于要求。有些要求是非常简单的，只需要在浏览器中生成一个PDF文件就可以了，而有些方案可能需要在复杂的应用程序中生成PDF文件。下面是一些客户端和服务端生成PDF的适用场景：

对于简单的网站页面，可以使用PDFKit或jsPDF。
对于复制和粘贴功能，可以使用Puppeteer或wkhtmltopdf。
当需要在后台自动化PDF生成过程时，可以使用html-pdf。
对于更大规模的应用程序，可以使用pdfmake。

六、前端生成PDF文件浏览

有时候，我们不想下载PDF文件，而是想在浏览器中直接查看。可以使用PDF.js库，它是一个基于HTML5技术的PDF查看器。

const pdfUrl = 'example.pdf';
const pdfDoc = null;
PDFJS.getDocument(pdfUrl)
    .then(doc => {
        pdfDoc = doc;
        const numPages = doc.numPages;
        console.log(numPages);
    });

PDF.js通过HTTP请求获取PDF文件，并将其作为多页PDF文档进行解析。一旦文档被解析，查看器就可以在HTML5 canvas元素上呈现每一页。

七、前端生成PDF并下载

Pdfgenerator是一个非常灵活的库，可以在Node.js中或者浏览器中使用。该库支持多种格式和格式化选项，支持复杂文档创建和样式设置。以下是一个在浏览器中使用Pdfgenerator生成PDF文件并下载的示例代码：

const pdfgen = require('pdfgenerator');
const html = 'Hello World';

pdfgen(html, {}, (err, result) => {
    if (err) return console.log(err);

    const a = document.createElement('a');
    a.download = "example.pdf";
    a.href = 'data:application/pdf;base64,' + result.toString('base64');
    document.body.appendChild(a);
    a.click();
});

在上面的示例中，我们创建了一个HTML模板字符串，并将其传递给pdfgenerator库来从浏览器中生成PDF文件。最后，我们将PDF文件转换为base64 URL，并通过模拟点击来下载文件到客户端。

八、前端生成PDF模版

对于使用相同格式输出的网页，我们通常需要模板化输出。如果我们使用的是json文件，可以使用pdfmake。

import pdfMake from "pdfmake/build/pdfmake";
import pdfFonts from "pdfmake/build/vfs_fonts";

pdfMake.vfs = pdfFonts.pdfMake.vfs;

const docDefinition = {
    content: [
        {
            text: 'Example Text',
            style: 'header'
        },
        {
            text: 'Another Example',
            style: 'subheader'
        }
    ],
    styles: {
        header: {
            fontSize: 22
        },
        subheader: {
            fontSize: 16
        }
    }
};

pdfMake.createPdf(docDefinition).download('example.pdf');

在上面的示例中，我们定义了一个docDefinition，它包含了两个段落及其样式。使用pdfMake，我们可以将docDefinition转换为PDF文件，使用download()方法将其下载到客户端。

九、前端页面生成PDF

对于大型应用程序，可能需要在前端内部管理PDF生成过程。对于这种情况，可以使用pdfmake库来实现前端内部多页PDF的呈现和生成。例如，在一个Vue.js应用程序中，可以使用pdfmake来生成PDF文件：

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

export default {
  methods: {
    downloadPdf() {
      const docDefinition = {
        content: [
          {
            text: 'Example Text',
            style: 'header'
          },
          {
            text: 'Another Example Text'
          }
        ],
        styles: {
          header: {
            fontSize: 22
          }
        }
      };

      pdfMake.createPdf(docDefinition).download('example-pdf.pdf');
    }
  }
};

在上面的代码中，我们首先引入pdfmake库，然后定义docDefinition，之后我们在downloadPdf()方法中将其转换为PDF文件，并通过download()方法将其下载到客户端。

总结

前端生成PDF是一种广泛使用的技术，可以将网页内容转换为PDF格式并下载或在浏览器中直接查看。虽然生成PDF的过程看似简单，但它实际上需要联系多种技术，例如HTML、CSS、JavaScript、TypeScript、Puppeteer、html-pdf、pdfmake、PDFKit、wkhtmltopdf等等。通过对这些技术的深入学习，我们可以选择最适合自己的方案和库，从而生成最优秀的PDF文件。

原创文章，作者：ZDBMJ，如若转载，请注明出处：https://www.506064.com/n/331336.html