JS - 使用 html2canvas 将页面转PDF

JS - 使用 html2canvas 将页面转PDF

本方法可以将页面元素块转为pdf.

网站地址

jspdf.js

html2canvas.js

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

posted @ 2022-05-30 15:32  Spear_J  阅读(1676)  评论(0)  编辑  收藏  举报