zoukankan      html  css  js  c++  java
  • Vue使用jsPdf将页面导出成pdf文件

    1 、我们要添加两个模块

    ①第一个.将页面html转换成图片

    npm install --save html2canvas 
    

    ②第二个.将图片生成pdf

    npm install jspdf --save
    

    2、定义全局函数..创建一个htmlToPdf.js文件在指定位置.我个人习惯放在('src/components/utils/htmlToPdf')

    文件路径:

    链接:https://pan.baidu.com/s/1M6cXXSbMLGrVpe-auk_tzQ
    提取码:zkbc

    在将要导出的页面添加如下方法

    // 导出页面为PDF格式
    import html2Canvas from 'html2canvas'
    import JsPDF from 'jspdf'
    export default{
      install (Vue, options) {
        Vue.prototype.getPdf = function () {
          var title = this.htmlTitle
          html2Canvas(document.querySelector('#pdfDom'), {
            allowTaint: true
          }).then(function (canvas) {
            let contentWidth = canvas.width
            let contentHeight = canvas.height
            let pageHeight = contentWidth / 592.28 * 841.89
            let leftHeight = contentHeight
            let position = 0
            let imgWidth = 595.28
            let imgHeight = 592.28 / contentWidth * contentHeight
            let pageData = canvas.toDataURL('image/jpeg', 1.0)
            let 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')
          }
          )
        }
      }

    3、在main.js中使用我们定义的函数文件。

    import htmlToPdf from '@/components/utils/htmlToPdf'
    Vue.use(htmlToPdf)

    4、在需要的导出的页面..调用我们的getPdf方法即可.

    例如:

    <el-button @click="getPdf">导出PDF文件</el-button>

    5、注意

    vue.js使用jspdf1.5.2版本不支持addImage方法,1.5.3版本支持

  • 相关阅读:
    常用Dos 命令
    Expect: 100continue
    Sql Server 文件和文件组体系结构
    Build Action
    regasm.exe 程序集注册工具
    获得user account的SID,GUID
    sp_change_users_login
    Regsvr32
    ASP.NET IIS 注册工具 (Aspnet_regiis.exe)
    随机生成300道四则运算
  • 原文地址:https://www.cnblogs.com/gaofz/p/11081605.html
Copyright © 2011-2022 走看看