JS保存网页为PDF

在JavaScript中，可以使用jsPDF库将网页内容保存为PDF文件。以下是一个简单的例子，展示如何使用jsPDF库来实现这一功能。

首先，确保在项目中包含了jsPDF库。可以通过npm安装它：

npm install jspdf

然后，你可以使用以下代码将网页的当前视图保存为PDF：

import jsPDF from 'jspdf';
 
// 创建一个新的 jsPDF 实例
const pdf = new jsPDF();
 
// 可以使用从html元素中获取的元素内容
const elementHandler = {
  '#ignore': function (element, renderer) {
    return true;
  }
};
 
// 使用PDF.js和html2canvas，将网页元素渲染成图片
html2canvas(document.body, { scale: 2, useCORS: true, elementHandler: elementHandler }).then(canvas => {
  // 将图片转换为dataURL
  const imgData = canvas.toDataURL('image/png');
 
  // 添加图像到PDF
  pdf.addImage(imgData, 'PNG', 0, 0, pdf.internal.pageSize.getWidth(), pdf.internal.pageSize.getHeight());
 
  // 保存生成的PDF
  pdf.save('download.pdf');
});

确保你的网页内容在调用html2canvas函数时是可见的，因为html2canvas依赖于实际的DOM元素来生成画布。

这段代码中，html2canvas用于将网页元素渲染成画布（canvas），然后jsPDF将这个画布作为一个图像添加到PDF中。最后，使用save方法将生成的PDF保存到用户的设备上。

请注意，这个例子需要服从同源策略，否则在跨域情况下，你可能会遇到CORS问题，这时可以设置html2canvas的useCORS选项为true来解决。