JS - 使用 html2canvas 将页面转PDF
本方法可以将页面元素块转为pdf.
网站地址
jspdf.js
- 官网地址：http://jspdf.com
- GitHub 主页：https://github.com/MrRio/jsPDF
- jspdf.js 文档：https://artskydj.github.io/jsPDF/docs/jspdf.js.html
html2canvas.js
- 官网地址：https://html2canvas.hertzen.com/
- html2canvas.js 文档：https://html2canvas.hertzen.com/documentation
- 文件地址：https://html2canvas.hertzen.com/
1、引入JS文件
<script src="jspdf.js"></script>
<script src="html2canvas.js"></script>
2、html代码
<!DOCTYPE html>
<html>
<body class="body">
<div id="div1">
<p>
test
</p>
</div>
</body>
</html>
3、js调用
function print(){
let targetId = "div1"
// targetId:dom元素的id;第二个参数：打印方向 l：横向 p：纵向
let base64PrintData = domToPdfBase64(targetId, "p");
}
/*
* @param targetId 页面元素id
* @param printOrientation 页面打印方向 l：横向 p：纵向
* @return pafbase64
*/
function domToPdfBase64(targetId, printOrientation) {
var targetDom = document.getElementById(targetId); //你的目标元素id
var copyDom = targetDom.cloneNode(true) // 克隆节点
copyDom.style.width = targetDom.offsetWidth + 'px'
copyDom.style.height = targetDom.scrollHeight + 'PX' // 获得高度
document.body.appendChild(copyDom) // 插入节点
html2canvas(copyDom).then((canvas) => {
document.body.removeChild(copyDom) // 删除节点
var contentWidth = canvas.width;
var contentHeight = canvas.height;
//一页pdf显示html页面生成的canvas高度;
var pageHeight = contentWidth / 595.28 * 841.89;
//未生成pdf的html页面高度
var leftHeight = contentHeight;
//页面偏移
var position = 0;
//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
var imgWidth = 595.28;
var imgHeight = 595.28 / contentWidth * contentHeight;
var pageData = canvas.toDataURL('image/jpeg', 1.0);
//第一个参数： l：横向 p：纵向;第二个参数：测量单位（"pt"，"mm", "cm", "m", "in" or "px"）;第三个参数：可以是下面格式，默认为“a4”
var pdf = new jsPDF(printOrientation, 'pt', 'a4');
if (leftHeight < pageHeight) {
// 在pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示；
pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
} else { // 分页
while (leftHeight > 10) {
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
leftHeight -= pageHeight;
position -= 871.89;
//避免添加空白页
if (leftHeight > 10) {
pdf.addPage();
}
}
}
let pdf64 = pdf.output("datauristring").replace("data:application/pdf;base64,", "");
console.log(pdf64);
//pdf预览
let blob = base64ToBlob(pdf64);
//获取当前url，直接放到iframe就能用，下载同理。直接将blobURL放到浏览器可以预览
let blobURL = window.URL.createObjectURL(blob);
console.log(blobURL);
return pdf64;
})
}
版权声明：本文为博客园博主「Spear_J」的原创文章，转载请附上原文出处链接及本声明。
https://www.cnblogs.com/lmh15054109/p/16326957.html