Vue export page to PDF format to solve incomplete screenshots

Original: https://blog.csdn.net/pratise/article/details/79249943    https://www.jianshu.com/p/96a7ee1341be

1. We want to add two modules

第一个.将页面html转换成图片
npm install --save html2canvas 
第二个.将图片生成pdf
npm install jspdf --save

2. Define the global function.. Create a htmlToPdf.js file in the specified location. I personally use it in ('src/components/utils/htmlToPdf')

// 导出页面为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. Use the function file we defined in main.js.

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

4. On the desired exported page: just call our getPdf method.

<div class="row" id="pdfDom" style="padding-top: 55px;background-color:#fff;">
	//给自己需要导出的ui部分.定义id为"pdfDom".此部分将就是pdf显示的部分
</div>
<button type="button" class="btn btn-primary"v-on:click="getPdf()">导出PDF</button>

 

 

The problem of incomplete screenshots of html2canvas

The first reason:

When you click to save the picture, there are a lot of resources to be saved at this time, so that the module is not completely loaded, and a screenshot has been generated.
Solution: (Delayed)

 setTimeout(() => {
        html2canvas(
          document.getElementById('contract-container'), 
          { scale: 1 }
        ).then( canvas => {
          var contractData = canvas.toDataURL("image/jpeg");
        });
  }, 500);

The second reason:

The sliding of the scroll wheel is mainly caused by html2canvas taking screenshots based on the body. If the content height is higher than the body, this problem will occur.
Solution: (Before generating the screenshot, put the scroll bar on top)

        window.pageYoffset = 0;
        document.documentElement.scrollTop = 0;
        document.body.scrollTop = 0;
        html2canvas(
            document.getElementById('contract-container'), 
            { scale: 1 }
        ).then( canvas => {
            var contractData = canvas.toDataURL("image/jpeg");
        });