js将html页面转为pdf

在 JavaScript 中,可以使用以下两种方法将 HTML 页面转换为 PDF 文件:

  1. 使用第三方库,如 jsPDF 或 html2canvas。

  2. 使用浏览器的内置功能,如 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() 方法的例子:

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

在浏览器中,你可以使用快捷键 Ctrl + P 或在浏览器菜单中点击“打印”来打开浏览器的打印对话框,然后选择“保存为 PDF”即可将当前页面保存为 PDF 文件。

猜你喜欢

转载自blog.csdn.net/weixin_35749786/article/details/128871761