使用 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 是不可搜索的。