坑1：圖片不顯示
產(chǎn)生原因： 圖片未開啟跨域
解決辦法： 升級(jí)版本 html2canvas v1.0.0-alpha.1 及以上，解決方案代碼如下
var str = document.getElementById('#html2canvas');
html2canvas(str, {
useCORS: true, // 設(shè)置 useCORS 為 true，即可開啟圖片跨域
onrendered: function (canvas) {
var image = canvas.toDataURL("image/jpeg",1.0);
window.open(image);
}
});
坑2：清晰度
產(chǎn)生原因： html2canvas 默認(rèn)dpi為 72，在高分屏上被放大2倍以上，導(dǎo)致圖像失真
解決辦法： 升級(jí)版本 html2canvas v1.0.0-alpha.1 及以上，解決方案代碼如下
var str = document.getElementById('#html2canvas');
html2canvas(str, {
scale: 2, // 設(shè)置 scale 為 2 及以上，即可支持高分屏
onrendered: function (canvas) {
var image = canvas.toDataURL("image/jpeg",1.0);
window.open(image);
}
});
坑3：pdf 一片黑
產(chǎn)生原因： html2canvas 默認(rèn)背景色為黑色
解決辦法： 升級(jí)版本 html2canvas v1.0.0-alpha.1 及以上，解決方案代碼如下
var str = document.getElementById('#html2canvas');
html2canvas(str, {
background: '#FFFFFF', // 默認(rèn)為黑色，將 background 為其他顏色
onrendered: function (canvas) {
var image = canvas.toDataURL("image/jpeg",1.0);
window.open(image);
}
});
坑2：長(zhǎng)網(wǎng)頁導(dǎo)出異常
產(chǎn)生原因： base64 超過 500k，后置字符將丟失
解決辦法： 升級(jí)版本 html2canvas v1.0.0-alpha.1 及以上，將網(wǎng)頁拆分成幾部分，解決方案代碼如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>PDF導(dǎo)出</title>
</head>
<body>
<button id="exportToPdf">導(dǎo)出為PDF</button>
<div id="html2canvas">
<div class="cls">
<p>1</p>
</div>
<div class="cls">
<p>2</p>
</div>
<div class="cls">
<p>3</p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>
<script src="https://rawgit.com/eKoopmans/html2canvas/develop/dist/html2canvas.min.js"></script>
<script>
var downPdf = document.getElementById("exportToPdf");
downPdf.onclick = function () {
var s = document.getElementsByClassName("cls");
var pdf = new jsPDF('', 'pt', 'a4');
var imgArr = new Array();
for (var index = 0; index < s.length; index++) {
html2canvas(s[index], {
useCORS: true,
scale: 2,
background: "#F5F5F5",
onrendered: function (canvas) {
var img = new Image();
img.width = canvas.width;
img.height = canvas.height;
img.src = canvas.toDataURL('image/jpeg', 1.0);
imgArr.push(img)
createPdf(pdf,imgArr,s.length);
},
})
};
}
var createPdf = function (pdf,Arr, s) {
if (Arr.length == s) {
for (var i = 0; i < Arr.length; i++) {
pdf.addImage(Arr[i].src, 'JPEG', 0, 0, Arr[i].width, Arr[i].height);
if(i < Arr.length -1){
pdf.addPage();
}
}
pdf.save("test.pdf")
}
}
</script>
</body>
</html>
