js 实现 html转img、pdf的方法

使用的方法是html2canvas以及jspdf
1.首先引用js文件

    <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
    <script src="https://cdn.bootcss.com/jspdf/1.3.5/jspdf.debug.js"></script>

2.html触发事件

<button class="buttonBlock" onclick="$.creatImgLink()">下载</button>```

3.方法

 $.extend({
creatImgLink:function(){
    //转化类型
    var turnType = $('.downWrapper-option select option:selected').val();
    //图片
    if(turnType == "png" || turnType == "jpg"){ var imgLink = document.createElement('a');
        imgLink.setAttribute('id','downImgurl');
        imgLink.setAttribute('name','baidu');
        imgLink.setAttribute('download','download');
        document.body.appendChild(imgLink);
        $("#downImgurl").hide();
        $.downImg(imgLink,turnType);
    }else if(turnType == "standardPdf"){
        //标准pdf
        $.downStandarPdf();
    }else if(turnType == "printPdf"){
        //打印pdf
    }

},
downImg: function (imgEle,turnType) {
    //转img
    html2canvas($("#page_content"), {
        useCORS:true,
        onrendered: function (canvas) {
            if(turnType == 'jpg'){
                turnType = 'jpeg';
            }
            var imgURL = canvas.toDataURL('image/'+turnType);
            console.log(turnType);
            //var imgURL = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
            //window.open(imgURL);
            //以下代码为下载此图片功能
            imgEle.setAttribute('href',imgURL);
            imgEle.click();
        }
    });
},
downStandarPdf:function(){
    html2canvas($("#page_content"), {
        useCORS:true,
        onrendered: 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 = 20;
            //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
            var imgWidth = 595.28;
            var imgHeight = 592.28/contentWidth * contentHeight;

            var pageData = canvas.toDataURL('image/jpeg', 1.0);

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

            //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
            //当内容未超过pdf一页显示的范围，无需分页
            if (leftHeight < pageHeight) {
                pdf.addImage(pageData, 'JPEG', 20, 20, imgWidth-40, imgHeight-40);
            } else {
                while(leftHeight > 0) {
                    pdf.addImage(pageData, 'JPEG', 20, position, imgWidth-40, imgHeight-40);
                    leftHeight -= pageHeight;
                    position -= 841.89;
                    //避免添加空白页
                    if(leftHeight > 0) {
                        pdf.addPage();
                    }
                }
            }

            //输出保存命名为content的pdf
            pdf.save('content.pdf');
        }
    });


},
downPrintPdf:function(){

}

});
“`

js 实现 html转img、pdf的方法

猜你喜欢