zoukankan      html  css  js  c++  java
  • 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,
                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

                  

  • 相关阅读:
    Linq to OBJECT延时标准查询操作符
    LINQ to XML
    动态Linq(结合反射)
    HDU 1242 dFS 找目标最短路
    HDu1241 DFS搜索
    hdu 1224 最长路
    BOJ 2773 第K个与m互质的数
    ZOJ 2562 反素数
    2016 ccpc 杭州赛区的总结
    bfs UESTC 381 Knight and Rook
  • 原文地址:https://www.cnblogs.com/haqiao/p/14636980.html
Copyright © 2011-2022 走看看