js將html頁(yè)面轉(zhuǎn)為pdf兩種方法

更新時(shí)間：2023年08月28日 10:02:16 作者：low?sapkj

最近遇到的需求,把html轉(zhuǎn)成pdf文件下載導(dǎo)出,下面這篇文章主要給大家介紹了關(guān)于js將html頁(yè)面轉(zhuǎn)為pdf的兩種方法,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下

js將html頁(yè)面轉(zhuǎn)為pdf兩種方法

在 JavaScript 中，可以使用以下兩種方法將 HTML 頁(yè)面轉(zhuǎn)換為 PDF 文件：

使用第三方庫(kù)，如 jsPDF 或 html2canvas。
使用瀏覽器的內(nèi)置功能，如 window.print() 方法，可以將 HTML 頁(yè)面轉(zhuǎn)換為 PDF 文件。

下面是使用 jsPDF 的例子：

// 引入 jsPDF 庫(kù)
import jsPDF from 'jspdf';
// 創(chuàng)建一個(gè)新的 jsPDF 實(shí)例
const pdf = new jsPDF();
// 設(shè)置文檔的頁(yè)面大小為 A4 紙張
pdf.setProperties({
  title: 'HTML to PDF',
  subject: 'Generated PDF file using jsPDF library',
  author: 'Your Name',
  keywords: 'html, pdf, javascript',
  creator: 'Your Name'
});
// 使用 html2canvas 庫(kù)將 HTML 頁(yè)面轉(zhuǎn)換為 canvas 元素
html2canvas(document.querySelector('#html-to-pdf')).then(canvas => {
  // 將 canvas 元素轉(zhuǎn)換為圖像數(shù)據(jù)
  const imgData = canvas.toDataURL('image/png');
  // 將圖像數(shù)據(jù)添加到 PDF 文檔中
  pdf.addImage(imgData, 'PNG', 0, 0);
  // 下載 PDF 文件
  pdf.save('html-to-pdf.pdf');
});

使用 window.print() 方法的例子：

// 在點(diǎn)擊按鈕時(shí)觸發(fā)打印功能
document.querySelector('#btn-print').addEventListener('click', () => {
  window.print();
});

在瀏覽器中，你可以使用快捷鍵 Ctrl + P 或在瀏覽器菜單中點(diǎn)擊“打印”來(lái)打開(kāi)瀏覽器的打印對(duì)話框，然后選擇“保存為 PDF”即可將當(dāng)前頁(yè)面保存為 PDF 文件。

附：js實(shí)現(xiàn)html轉(zhuǎn)pdf并下載

要實(shí)現(xiàn)將 HTML 轉(zhuǎn)換為 PDF 并下載需要使用 jsPDF 和 html2canvas 庫(kù)。以下是一個(gè)示例代碼，它將 HTML 元素（id為content）轉(zhuǎn)換為 PDF 并下載：

<!-- html -->
<div id="content">
  <h1>Hello, World!</h1>
  <p>This is a test page.</p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>
<button onclick="generatePDF()">Download PDF</button>

// javascript
function generatePDF() {
  // 獲取要轉(zhuǎn)換為 PDF 的 HTML 元素
  const element = document.getElementById("content");
  // 使用html2canvas將 HTML 元素轉(zhuǎn)換為 Canvas
  html2canvas(element).then(canvas => {
    // 獲取Canvas的圖像數(shù)據(jù)
    const imgData = canvas.toDataURL('image/png');
    // 創(chuàng)建一個(gè)新的 jsPDF 實(shí)例
    const pdf = new jsPDF();
    // 將Canvas轉(zhuǎn)換為PDF
    pdf.addImage(imgData, 'PNG', 0, 0);
    // 下載PDF文件
    pdf.save("test.pdf");
  });
}

以上代碼會(huì)在按鈕被點(diǎn)擊時(shí)觸發(fā)，將 HTML 元素轉(zhuǎn)換為 Canvas，然后將 Canvas 轉(zhuǎn)換為 PDF 并下載。