Vue下载页面显示内容

Vue下载页面显示内容

摘抄自

https://www.cnblogs.com/zhangtianqi520/p/9323873.html

先下载所需依赖

npm install --save html2canvas

npm install jspdf --save

 关键代码如下：

getPdf () {
        var title = this.title;
        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')
          }
        )
      },

#pdfDom 为所需下载的起使位置

致敬作者

posted @ 2019-02-21 16:50 菜鸟的进击 阅读( ...) 评论( ...) 编辑 收藏