html2pdf.js之长页⾯html转PDF导出
长页⾯html转PDF导出pdf转html
html转pdf的⽤法⽹上教程搜索⼀⼤堆，但公司遇到新需求，需要把6000条数据转为pdf，页⾯会变空⽩，后端推前端，前端推后端，那我们就⾃⼰研究下吧
⽹上教程我随便了⼀条，如果直接不是长页⾯参考这个教程即可
为什么打印不了的原因，在html2pdf.js中渲染过程是由html转称canvas，再由canvas转成pdf，作者明确指出在html5中canvas具有最⼤⾼度和宽度，超出最⼤限度便⽆法进⾏打印
canvas最⼤限度⽰例
Chrome:
Maximum height/width: 32,767 px
Maximum area: 268,435,456 px (例如, 16,384 x 16,384)
Firefox:
Maximum height/width: 32,767 px
Maximum area: 472,907,776 px (例如, 22,528 x 20,992)
IE:
Maximum height/width: 8,192 px
Maximum area: N/A
IE Mobile:
Maximum height/width: 4,096 px
Maximum area: N/A
那么我们知道了原因，可不可以将页⾯拆分为较⼩的区块，然后将它们单独添加到 PDF 中呢？
答案是可以的。
使⽤注意
1. 打印前需要滚动到页⾯顶部，不然打印页⾯会出现⼀段空⽩
2. 需要引⽤以下⽂件
// "jspdf.min.js"
// "html2canvas.min.js"
// "html2pdf.min.js"
//单纯使⽤js时，按照以上顺序引⽤，不然canvas会把pdf覆盖
//使⽤vue时
//安装  npm install --save html2pdf.js
//引⽤只需要引⽤html2pdf.js即可  import html2pdf.js from 'html2pdf.js';
//因为html2pdf.js⾃动引⽤了jspdf和canvas
3. 在使⽤element ui框架时，内容在Dialog弹窗中时⽆法正常打印。
可以尝试使⽤divEle.cloneNode(true)拷贝⼀份添加到body上，再进⾏打印pdf
4. 如果打印的内容不清楚，可以使⽤scale：2来调节，但会增加⽂件⼤⼩
代码⽰例
<button id="downpdf">按钮</button>
<button id="downpdf">按钮</button>
<div id='divEle'>
<ul>
//我是数据
</ul>
<ul>
//我是数据
</ul>
<!-- 重复ul内容 -->
</div>
<script src="cdn.bootcdn/ajax/libs/es6-promise/4.2.8/es6-promise.auto.min.js"></script>  <script src="./node_modules/jspdf/dist/jspdf.min.js"></script>
<script src="./node_modules/html2canvas/dist/html2canvas.js"></script>
<script src="./node_modules/html2pdf.js/dist/html2pdf.js"></script>
<script>
//⽂档地址：ekoopmans.github.io/html2pdf.js/
var downpdfEle = document.querySelector('#downpdf');
//超出canvas限度打印
var pages = document.querySelector('#divEle').children;
exportHTMLToPDF(pages,'模板')
//正常打印
//htmlToPdf('#divEle','模板')
}
//超出canvas限度打印函数
function exportHTMLToPDF(pages,name) {
const opt = {
margin: [0, 0],
filename: name+'.pdf',
image: {
type: 'jpeg',
quality: 0.98
},
html2canvas: {
dpi: 192,
scale:2,
letterRendering: true
},
jsPDF: {
unit: 'mm',
format: 'a4',
orientation: 'landscape'
}
};
var worker = html2pdf()
for (let i = 0; i < pages.length; i++) {
console.log(pages[i]);
worker = worker.set(opt).from(pages[i]).toContainer().toCanvas().toPdf().get('pdf').then((pdf) => {          if (i < pages.length - 1) { // Bump cursor ahead to new page until on last page
pdf.addPage();
}
});
}
worker.save();
}
//正常打印
function htmlToPdf(el,name) {  //('#divEle'，模板)
let ele = document.querySelector(el);
let opt = {
margin: 1,
filename:  name+'.pdf',
image: {
type: 'jpeg',
quality: 0.98
},
html2canvas: {
scale: 2,
dpi: 92,
},
jsPDF: {
unit: 'in',
format: 'letter',
orientation: 'portrait'
}
};
html2pdf().set(opt).from(ele).save();
}
</script>