JavaScript实现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');
});

// 在点击按钮时触发打印功能
document.querySelector('#btn-print').addEventListener('click', () => {
  window.print();
});

<!-- 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() {
  // 获取要转换为 PDF 的 HTML 元素
  const element = document.getElementById("content");
  // 使用html2canvas将 HTML 元素转换为 Canvas
  html2canvas(element).then(canvas => {
    // 获取Canvas的图像数据
    const imgData = canvas.toDataURL('image/png');
    // 创建一个新的 jsPDF 实例
    const pdf = new jsPDF();
    // 将Canvas转换为PDF
    pdf.addImage(imgData, 'PNG', 0, 0);
    // 下载PDF文件
    pdf.save("test.pdf");
  });
}