zoukankan      html  css  js  c++  java
  • PDF打印:html2canvas+jspdf

    需求:将前端页面转为图片,再pdf打印

    解决方案:html2canvas+jspdf

    安装:

    npm install html2canvas --save
    
    npm install jspdf --save
    

    创建js文件:

    import html2Canvas from 'html2Canvas'
    import jsPDF from 'jspdf'
    
    export default{
      install (Vue, options) {
        Vue.prototype.getPdf = function (fileName) {
          var title = fileName;
          html2Canvas(document.querySelector('#exportTemplate'), {
            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')
          }
          )
        }
      }
    }
    

    使用:

    在main.js中注册:

    import printPdf from './components/common/printPdf/printPdf'
    Vue.use(printPdf)
    

    直接使用getPdf()

    <bk-button @click="getPdf(fileName)">导出PDF</bk-button>
    
  • 相关阅读:
    线段树模板题 contest 线段树 T5
    Guide AHOI2017 洛谷P3720
    静态RMQ模板题 contest 静态RMQ T2
    树状数组模板题 P1904
    AC自动机模板题 P2017
    高精度排序模板题 P1110
    Trie树模板题 P2016
    树状数组套权值线段树
    爬山 启发式合并 / STL
    [POI2011]ROT-Tree Rotations 线段树合并|主席树 / 逆序对
  • 原文地址:https://www.cnblogs.com/wangyingblock/p/13724808.html
Copyright © 2011-2022 走看看