使用 JavaScript 將 HTML 轉換為 PDF

更多相關學習資料參見http://www.pdfdownload.cn/b/ba_index.php

在本文中，我們將瞭解如何在瀏覽器（即完全在客戶端）中生成任何 HTML 元素的 PDF。

我們將使用該包html2pdf生成 PDF。

html2pdf是使用html2canvas的HTML元素轉換為畫布，然後進入影象。然後它在 的幫助下生成影象的 PDF jsPDF。

要了解更多資訊，請檢視這裡。

執行

讓我們看看包的一個小實現html2pdf。

索引.html

一個基本的 HTML 頁面，其中包含包的捆綁連結。

建立了一個簡單內容的 div 塊和一個匯出 PDF 按鈕。我們將生成一個 div 的 PDF，其 id 是view單擊匯出 PDF 按鈕。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>HTML2PDF</title>

    <script src="https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js" defer></script>

    <script src="./script.js" defer></script>

</head>

<body onload="main()" align="center">

    <div id="view" align="center">

        <h1>Export PDF</h1>

        <h3>Using HTML2PDF</h3>

    </div>

    <button id="export-pdf">Export PDF</button>

</body>

</html>

　　

指令碼.js

包含 main 方法的 JavaScript 檔案，一旦站點載入並偵聽onclick匯出 PDF 按鈕上的事件，就會呼叫該方法。

單擊匯出 PDF 按鈕時，html2pdf將呼叫該方法，該方法將元素 (div) 的引用作為其引數。

function main() {

    var view = document.getElementById("view");

    var exportPDF = document.getElementById("export-pdf");

    exportPDF.onclick = (e) => html2pdf(view);

}

　　

單擊按鈕後，將生成 PDF 並直接下載到您的系統。

我們還可以在html2pdf方法中傳遞一些配置選項來處理影象型別、質量、檔名等。要了解更多資訊，請檢視這裡。

注意：基於影象的 PDF 是不可搜尋的。