jq 实现指定html导出pdf

引入文件

<script src="https://cdn.bootcss.com/jspdf/1.5.3/jspdf.debug.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.js"></script>

逻辑代码

function daochu(){
    var _this = this;
    var targetDom = $("#data");//你的目标元素id
    var copyDom = targetDom.clone();
    copyDom.width(targetDom.width() + "px");
    copyDom.height(targetDom.height() + "px");
    $('body').append(copyDom);
    console.log('copyDom',copyDom)
    html2canvas(copyDom, {
        onrendered:function(canvas) {
            var contentWidth = canvas.width;
            var contentHeight = canvas.height;
            //当前导出为横屏竖屏需要 将宽和高互换
            var pageHeight = contentWidth /841.89 *   592.28;
            var leftHeight = contentHeight;
            var position = 0;
            var f="p";
            var pageHeight = contentWidth /841.89 *   592.28;
            //未生成pdf的html页面高度
            var leftHeight = contentHeight;
            //页面偏移
            var position = 0;
            //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
            var imgWidth = 841.89;
            var imgHeight = 841.89/contentWidth * contentHeight;
            var pageData = canvas.toDataURL('image/jpeg', 1.0);
            //jsPDF第一个参数为 l横屏 p竖屏  
            //第二个参数为单位"pt"，"mm", "cm", "m", "in" or "px"  
            //第三个参数是纸张，默认为“a4” 
            var pdf = new jsPDF('l', '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 -= 592.28;
                    //避免添加空白页
                    if(leftHeight > 0) 
                    {
                        pdf.addPage();
                    }
                }
            }
            pdf.save('分析.pdf');
            copyDom.remove();
        }
    });
} 

 

声明 本人博客的所有东西,部分源于网络书籍和视频，其他的是个人的理解感悟，经过自己整理撰写成博客。 本人博客均只用于个人学习、复习，不作为商业用途，如有侵权，请联系我修改或删除。 联系邮箱：15121014713@163.com

标签：canvas,copyDom,jq,841.89,leftHeight,html,var,pdf
来源： https://www.cnblogs.com/qiaoqiao1015/p/15540837.html