zoukankan      html  css  js  c++  java
  • 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();
    
    }
  • 相关阅读:
    6、加法算术
    5、找出最大和最小的数
    4、计算并输出圆的面积和周长
    2、函数y=f(x)
    1、两数的平方和
    单片机中断寄存器知识点总结
    创建PCB原理图的模板
    电机知识
    结合实例谈谈航拍全景的方法和技巧
    航拍技巧
  • 原文地址:https://www.cnblogs.com/xiaobaibubai/p/12985952.html
Copyright © 2011-2022 走看看