js將html轉(zhuǎn)換為pdf
所需引入文件
html2canvas和jsPdf.debug.js和jquery.min.js
貼代碼：
點(diǎn)擊下載 ，所需轉(zhuǎn)換pdf的節(jié)點(diǎn)
我所遇到的問(wèn)題是沒(méi)有左右邊距碰辅，。所以我將imgwidth調(diào)整了下大小畜侦。addImage左邊距定義大小
一下為代碼：
var downPdf = document.getElementById("renderPdf");
? ? ? var s = document.getElementById("22");
? ? ? downPdf.onclick = function() {
? ? ? ? ? html2canvas(s, {
? scale: 2,
? ? ? ? useCORS: true,
? ? ? ? onrendered: function(canvas) {
? ? ? ? ? ? var imgData = canvas.toDataURL("image/png",1.0);
? ? ? ? ? ? var imgWidth = 555.28; //297
? ? ? ? ? ? var pageHeight = 592.28; //297?
? ? ? ? ? ? var imgHeight = canvas.height * imgWidth / canvas.width;
? ? ? ? ? ? var heightLeft = imgHeight;
? ? ? ? ? ? // var doc = new jsPDF('l', 'mm',[1350, 1350]);
? ? ? ? ? ? var doc = new jsPDF('', 'pt', 'a4');
? ? ? ? ? ? var position = 0; //0//上邊距
? ? ? ? ? ? margins = {
? ? ? ? ? ? ? ? top: 20,
? ? ? ? ? ? ? ? bottom: 10,
? ? ? ? ? ? ? ? left: 45,
? ? ? ? ? ? ? ? width: 522
? ? ? ? ? ? };
doc.internal.scaleFactor = 1.33;
if (heightLeft < pageHeight) {
doc.addImage(imgData, 'JPEG', 20, position, imgWidth, imgHeight );
} else {
while(heightLeft > 0) {
pdf.addImage(imgData, 'JPEG', 20, position, imgWidth, imgHeight)//20為左邊距?
heightLeft -= pageHeight;
position -= 841.89;
//避免添加空白頁(yè)
if(heightLeft > 0) {
pdf.addPage();
}
}
}
background: "#fff",
? ? ? ? ? ? doc.save("2.pdf");
? ? ? ? }
? ? });
? ? ? }
