前端生成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/zh-hant/n/331336.html