前端页面保存成 pdf 文件
需求:前端将页面或者页面中的某一部分导出为 pdf 文件
一、安装依赖
需要使用两个依赖包
html2canvas
将页面转换成图片
html2canvas 的作用就是根据 DOM 生成对应的图片。它的屏幕截图是基于 DOM 的,因此可能不会 100% 精确到真实的表示,因为它不会生成实际的屏幕截图,而是基于页面上可用的信息构建屏幕截图。
npm install html2canvas --save
jspdf
将图片导出成PDF
JSPDF是一个JavaScript库,用于生成PDF文档。它可以直接在浏览器中生成PDF,也可以通过Node.js在服务器端生成PDF。JSPDF具有高度的自定义性和可扩展性,可以用于各种PDF生成需求。
npm install jspdf --save
二、使用 (react项目中使用,其他项目适做修改)
方法声明
注:给需要导出 pdf 的区域挂载 ref
React.createRef();
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
this.toPDF_html = React.createRef();
htmlToPdf = () => {
const element = this.toPDF_html.current; // 需要导出 pdf 文件的 DOM 区域,可以是整个页面也可以是部分区域
html2canvas(element, {
useCORS: true, // 允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
allowTaint: true, // 允许跨域
scale: 6, // 放大页面倍数,可以调整pdf文件的清晰度
backgroundColor: '#ffffff'
}).then((canvas)=> {
this.canvas2PDF(canvas);
})
}
canvas2PDF = canvas => {
const PDF = new jsPDF({
orientation: 'p', //参数: l:横向 p:纵向
unit: 'mm', //参数:测量单位("pt","mm", "cm", "m", "in" or "px")
format: 'a4', //A4纸
})
const ctx = canvas.getContext('2d')
const a4w = 190
const a4h = 277 //A4大小,210mm x 297mm,四边各保留10mm的边距,显示区域190x277
const imgHeight = Math.floor(a4h * canvas.width / a4w) //按A4显示比例换算一页图像的像素高度
let renderedHeight = 0
while (renderedHeight < canvas.height) {
let page = document.createElement("canvas");
page.width = canvas.width;
page.height = Math.min(imgHeight, canvas.height - renderedHeight); //可能内容不足一页
//用getImageData剪裁指定区域,并画到前面创建的canvas对象中
page.getContext('2d').putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0);
// canvas转图片数据保留10mm边距
PDF.addImage(page.toDataURL('image/jpeg', 0.2), 'JPEG', 10, 10, a4w, Math.min(a4h, a4w * page.height / page.width));
renderedHeight += imgHeight;
//判断是否分页,如果后面还有内容,添加一个空页
if (renderedHeight < canvas.height) {
PDF.addPage()
}
}
PDF.save("エッコマップ・要約.pdf");
};
调用方法
<button className="signout-button" onClick={this.htmlToPdf}> 印 刷 </button>