h5页面导出为pdf两种方法（纯前端）

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 = canvas.toDataURL(\'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\'
                ]
            };
 pdfMake.createPdf(cont).download();

}