h5页⾯导出为pdf两种⽅法（纯前端）<div class="row" id="pdfDom">
<van-cell-grounp>
<van-cell>
</van-cell>
<van-cell>
业务咨询
</van-cell>
<van-cell>
业务咨询
</van-cell>
<van-cell>
业务咨询
</van-cell>
</van-cell-grounp>
</div>
<button @click="getPdf">⽂件下载</button>
<script src="js/html2canvas.js"></script>
<script src="js/jspdf.js"></script>
<script src="js/vue.min.js" ></script>
<script src="js/vant.min.js" ></script>
var app=new Vue({
el:"#app",
data:function(){
return{
htmlTitle: "页⾯导出PDF⽂件名",
url:""
}
},
methods:{
getPdf:function(){
var title = this.htmlTitle
html2canvas(document.querySelector('#pdfDom'), {
allowTaint: true
}).then(function (canvas) {
var contentWidth = canvas.width
var contentHeight = canvas.height
var pageHeight = contentWidth / 592.28 * 841.89
var leftHeight = contentHeight
var position = 0
var imgWidth = 595.28
var imgHeight = 592.28 / contentWidth * contentHeight
var pageData = DataURL('image/jpeg', 1.0)
var PDF = new jsPDF('', 'pt', 'a4')
if (leftHeight < pageHeight) {
PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
} else {
while (leftHeight > 0) {
PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight
position -= 841.89
if (leftHeight > 0) {
PDF.addPage()
}
}
}
PDF.save(title + '.pdf');
console.log(PDF)
})
},
}
})
以上为pdf.js加html2canvas.js⽅法
以下为pdfmake.js⽅法（这⾥写的例⼦只适合英⽂，中⽂暂时没研究）
<button onclick="demo()">导出PDF</button>
<script src="js/pdfmake.js" ></script>
<script src="js/vfs_fonts.js" ></script>
function demo(){
var cont = {
content: [
'中英⽂测试',
'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'                ]
};
pdf转html}