Page d'exportation Vue au format PDF pour résoudre des captures d'écran incomplètes

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

1. Nous voulons ajouter deux modules

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

2. Définissez la fonction globale .. Créez un fichier htmlToPdf.js à l'emplacement spécifié. Je l'utilise personnellement dans ('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. Utilisez le fichier de fonction que nous avons défini dans main.js.

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

4. Sur la page exportée souhaitée: appelez simplement notre méthode getPdf.

<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>

 

 

Le problème des captures d'écran incomplètes de html2canvas

La première raison:

Lorsque vous cliquez pour enregistrer l'image, il y a beaucoup de ressources à enregistrer à ce moment, de sorte que le module n'est pas complètement chargé et qu'une capture d'écran a été générée.
Solution: (différée)

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

La deuxième raison:

Le glissement de la molette de défilement est principalement causé par html2canvas prenant des captures d'écran basées sur le corps. Si la hauteur du contenu est plus élevée que le corps, ce problème se produira.
Solution: (Avant de générer la capture d'écran, placez la barre de défilement en haut)

        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");
        });