VueでhtmlコンテンツをPDFにエクスポート

2つのプラグインが必要です:html2canvasとjsPDF

npm install html2canvas
npm install jspdf --save

import html2canvas from 'html2canvas';

// download()          
download() {
   //    "print"        id(     html   div   ，  id="print"  )
   html2canvas(document.getElementById("print")).then(function(canvas) {
   	 //     canvas         html canvas  
   	 // document.body.appendChild(canvas); //        canvas              
   	 
     var url = canvas.toDataURL();
     
     var contentWidth = canvas.width;
     var contentHeight = canvas.height;
     
     //  pdf  html     canvas  ;
     var pageHeight = (contentWidth / 592.28) * 841.89;
     
     //   pdf html    
     var leftHeight = contentHeight;
     
     //    
     var position = 0;
     
     //a4    [595.28,595.28]，html     canvas pdf      
     var imgWidth = 595.28;
     var imgHeight = (592.28 / contentWidth) * contentHeight;

     var pdf = new jsPDF("", "pt", "a4");

     if (leftHeight < pageHeight) {
       pdf.addImage(url, "JPEG", 0, 0, imgWidth, imgHeight);
     } else {
       //   
       while (leftHeight > 0) {
         pdf.addImage(url, "JPEG", 0, position, imgWidth, imgHeight);
         leftHeight -= pageHeight;
         position -= 841.89;
         
         //       
         if (leftHeight > 0) {
           pdf.addPage();
         }
       }
     }
     
     pdf.save("xxx.pdf");
   });
 }

参照先:

html 2 canvas HTMLコンテンツをCanvas生成ピクチャ

に書き込む

htmlをhtmlからpdfに変換してローカル

にダウンロードすることをhtml 2 canvasとjspdfで実現する.