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();

}