在 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() 方法的例子：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-613466.html
// 在點(diǎn)擊按鈕時(shí)觸發(fā)打印功能
document.querySelector('#btn-print').addEventListener('click', () => {
window.print();
});
在瀏覽器中，你可以使用快捷鍵 Ctrl + P 或在瀏覽器菜單中點(diǎn)擊“打印”來(lái)打開瀏覽器的打印對(duì)話框，然后選擇“保存為 PDF”即可將當(dāng)前頁(yè)面保存為 PDF 文件。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-613466.html
到了這里，關(guān)于js將html頁(yè)面轉(zhuǎn)為pdf的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[HTML]Web前端開發(fā)技術(shù)13（HTML5、CSS3、JavaScript ）橫向二級(jí)導(dǎo)航菜單 Web頁(yè)面設(shè)計(jì)實(shí)例——喵喵畫網(wǎng)頁(yè)](https://imgs.yssmx.com/Uploads/2024/02/797403-1.png)
![[HTML]Web前端開發(fā)技術(shù)10（HTML5、CSS3、JavaScript ）CSS+DIV頁(yè)面布局，固定定位，相對(duì)定位relative，絕對(duì)定位absolute，層定位的應(yīng)用——喵喵畫網(wǎng)頁(yè)](https://imgs.yssmx.com/Uploads/2024/02/783047-1.png)
![[HTML]Web前端開發(fā)技術(shù)11（HTML5、CSS3、JavaScript ）頁(yè)面布局設(shè)計(jì) “三行模式”或“三列模式”“三行二列”“三行三列”模式 多行多列復(fù)雜模式水平導(dǎo)航菜單——喵喵畫網(wǎng)頁(yè)](https://imgs.yssmx.com/Uploads/2024/02/787720-1.png)
