在 JavaScript 中，可以使用以下两种方法将 HTML 页面转换为 PDF 文件：
-
使用第三方库，如 jsPDF 或 html2canvas。
-
使用浏览器的内置功能，如 window.print() 方法，可以将 HTML 页面转换为 PDF 文件。
下面是使用 jsPDF 的例子：
// 引入 jsPDF 库
import jsPDF from 'jspdf';
// 创建一个新的 jsPDF 实例
const pdf = new jsPDF();
// 设置文档的页面大小为 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 库将 HTML 页面转换为 canvas 元素
html2canvas(document.querySelector('#html-to-pdf')).then(canvas => {
// 将 canvas 元素转换为图像数据
const imgData = canvas.toDataURL('image/png');
// 将图像数据添加到 PDF 文档中
pdf.addImage(imgData, 'PNG', 0, 0);
// 下载 PDF 文件
pdf.save('html-to-pdf.pdf');
});
使用 window.print() 方法的例子：文章来源：https://www.toymoban.com/news/detail-613466.html
// 在点击按钮时触发打印功能
document.querySelector('#btn-print').addEventListener('click', () => {
window.print();
});
在浏览器中，你可以使用快捷键 Ctrl + P 或在浏览器菜单中点击“打印”来打开浏览器的打印对话框，然后选择“保存为 PDF”即可将当前页面保存为 PDF 文件。文章来源地址https://www.toymoban.com/news/detail-613466.html
到了这里，关于js将html页面转为pdf的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[HTML]Web前端开发技术13（HTML5、CSS3、JavaScript ）横向二级导航菜单 Web页面设计实例——喵喵画网页](https://imgs.yssmx.com/Uploads/2024/02/797403-1.png)
![[HTML]Web前端开发技术10（HTML5、CSS3、JavaScript ）CSS+DIV页面布局，固定定位，相对定位relative，绝对定位absolute，层定位的应用——喵喵画网页](https://imgs.yssmx.com/Uploads/2024/02/783047-1.png)
![[HTML]Web前端开发技术11（HTML5、CSS3、JavaScript ）页面布局设计 “三行模式”或“三列模式”“三行二列”“三行三列”模式 多行多列复杂模式水平导航菜单——喵喵画网页](https://imgs.yssmx.com/Uploads/2024/02/787720-1.png)
