码迷,mamicode.com
首页 > Web开发 > 详细

指定html转pdf文档

时间:2018-10-19 16:04:14      阅读:547      评论:0      收藏:0      [点我收藏+]

标签:element   odata   nload   decode   代码   com   canvas   this   onload   

1.资源

<script type="text/javascript" src="./js/canvg2.js"></script>
<script type="text/javascript" src="./js/html2canvas-0.4.1.js"></script>
<script type="text/javascript" src="./js/jspdf.min.js"></script>
<script type="text/javascript" src="./js/jquery-2.1.4.min.js"></script>

2.主要代码

function changeImg(target) {
$(‘body‘).find(‘canvas‘).each(function (i, v) {
var imgSrc = v.toDataURL("image/png");
$(v).prop(‘outerHTML‘, ‘<img src="‘ + imgSrc + ‘" /> ‘);
});
var targetDom = $(target);
var copyDom = targetDom.clone();
copyDom.width(targetDom.width() + "px");
copyDom.height(targetDom.height() + "px");
$(‘body‘).append(copyDom);
svg2canvas(copyDom);
html2canvas(copyDom, {
onrendered: function (canvas) {
var imgData = canvas.toDataURL(‘image/jpeg‘);
var img = new Image();
img.src = imgData;
img.onload = function () {
if (this.width > this.height) {
var doc = new jsPDF(‘l‘, ‘mm‘, [this.width * 0.225, this.height * 0.225]);
} else {
var doc = new jsPDF(‘p‘, ‘mm‘, [this.width * 0.225, this.height * 0.225]);
}
doc.addImage(imgData, ‘jpeg‘, 0, 0, this.width * 0.225, this.height * 0.225);
doc.save(getQueryString(‘name‘, decodeURIComponent(location.href)) + ‘.pdf‘);
};
copyDom.remove();
},
background: "#fff",
allowTaint: true
});
}

function svg2canvas(targetElem) {
var svgElem = targetElem.find(‘svg‘);
svgElem.each(function (index, node) {
var parentNode = node.parentNode;
var tempNode = document.createElement(‘div‘);
tempNode.appendChild(node);
var svg = tempNode.innerHTML;
var canvas = document.createElement(‘canvas‘);
canvg(canvas, svg);
parentNode.appendChild(canvas);
});
}

3.参考资源

Javascript 将html转成pdf,下载,支持多页哦(html2canvas 和 jsPDF)

纯js实现html转pdf

 

指定html转pdf文档

标签:element   odata   nload   decode   代码   com   canvas   this   onload   

原文地址:https://www.cnblogs.com/justSmile2/p/9816658.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!