脚本宝典收集整理的这篇文章主要介绍了js实例教程-js实现html转img、pdf的方法（代码教程），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

     <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>

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

 $.extend({ creatImgLink:function(){     //转化类型     VAR turnTyPE = $(&#39;.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(){  }

使用的方法是html2 canvas以及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(){  }

觉得可用，就经常来吧！Javascript技巧 脚本宝典 欢迎评论哦！ @L_512_1@，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的js实例教程-js实现html转img、pdf的方法（代码教程）全部内容，希望文章能够帮你解决js实例教程-js实现html转img、pdf的方法（代码教程）所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。