版权声明: https://blog.csdn.net/weixin_38500689/article/details/79856081
使用的方法是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(){
}
});
“`