JS生成PDF文件上传服务器或者下载保存 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
</head>
<style>
img{width: 100%;}
.box{
    width: 592.28px;
    height: 841.89px;
}
    
</style>
<body >
    
<div class="box">
    <h1>45645asfasdfsdfas</h1>
</div>
<button id="btn">生成</button>

<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/html2canvas.min.js"></script>
<script src="js/jspdf.umd.min.js"></script>
<script>
    const { jsPDF } = window.jspdf;

    document.querySelector('#btn').addEventListener('click',function(){
        pdf()
    },false)

    function pdf () {
        var poster = document.querySelector('.box') //要生成海报的DIV，最外层的
        var width = $(poster).width();
        var height = $(poster).height();
        var canvas = document.createElement("canvas");
        var scale = 2;

        canvas.width = width * scale;
        canvas.height = height * scale;
        canvas.getContext("2d").scale(scale, scale);

        var opts = {
            scale: scale,
            canvas: canvas,
            width: width,
            height: height ,
            backgroundColor:'transparent'
        };

        //生成页面截图
        html2canvas(poster,opts)
        .then(function(canvas) {

            var contentWidth = canvas.width;
            var contentHeight = canvas.height;

            //一页pdf显示html页面生成的canvas高度;
            var pageHeight = contentWidth / 592.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 = 592.28/contentWidth * contentHeight;

            var pageData = canvas.toDataURL();
            // document.querySelector('#img').src = pageData

            var pdf = new jsPDF('', 'pt', 'a4');

            //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
            //当内容未超过pdf一页显示的范围，无需分页
            if (leftHeight < pageHeight) {
            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("content.pdf");  //这个是下载PDF

            //这个是将PDF转化为bsse64字符串，可以将base64传给后台进行上传到服务器
            var data = pdf.output('dataurlstring')
            console.log(data);
            
        });
    }
</script>
</body>
</html>

 

DEMO （源码或者依赖的JS库可以自行通过DEMO页面进行拉取保存）

 

参考链接：jsPDF仓库地址：https://github.com/MrRio/jsPDF

              

 

posted @ 2021-04-09 14:27  哈哈敲敲  阅读(1557)  评论(0)  编辑  收藏  举报