前端导出页面为PDF
前端通过html2canvas和JsPDF插件将全部或部分网页按照PDF图片导出
建议放入项目中工具文件夹下,部分引入。
import html2Canvas from 'html2canvas';
import JsPDF from 'jspdf';
/*******
* @description: 导出页面为PDF格式
* @param {*} id 需要导出页面区域的DOM id
* @param {*} title PDF文件名
* @param {*} direction l:横向 p:纵向
* @return {*}
*/
export const getPdf = (id = '#pdfDom', title = 'PDF文件', direction = 'p') => {
html2Canvas(document.querySelector(id), {
allowTaint: true,
taintTest: false,
useCORS: true,
// y: 72, // 对Y轴进行裁切
// width:1200,
// height:5000,
dpi: window.devicePixelRatio * 4, //将分辨率提高到特定的DPI 提高四倍
scale: 6 //按比例增加分辨率
}).then(function (canvas) {
let contentWidth = canvas.width
let contentHeight = canvas.height
// 一页pdf显示html页面生成的canvas高度,a4纸的尺寸(595.28,841.89)
let pageHeight = contentWidth / 595.28 * 841.89
let leftHeight = contentHeight
// 页面偏移
let position = 0
// a4纸的尺寸(595.28,841.89),html页面生成的canvas在pdf中图片的宽高
let imgWidth = 595.28
let imgHeight = 595.28 / contentWidth * contentHeight
// canvas 转换图片数据
let pageData = canvas.toDataURL('image/jpeg', 1.0)
// 新建JsPDF对象, 第一个参数: l:横向 p:纵向;第二个参数:测量单位("pt","mm", "cm", "m", "in" or "px");第三个参数:可以是下面格式,默认为“a4”
let PDF = new JsPDF(direction, 'pt', 'a4')
// 判断是否分页
if (leftHeight < pageHeight) {
// 在PDF.addImage(pageData, 'JPEG', 左,上,宽度,高度)设置在pdf中显示;
PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
} else {
while (leftHeight > 0) {
PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight
position -= 841.89
if (leftHeight > 0) {
PDF.addPage()
}
}
}
// 保存文件
PDF.save(title + '.pdf')
})
}
洗尽铅华始见金,褪去浮华归本真