Detailed explanation of the implementation example of Vue exporting a small number of pdf files

Create a js file

And you need to install two plugins: html2canvas and jspdf;

Then the method will be executed in the page you need to export,

("html", "Report");
//Parameter 1: Export range id id//Parameter 2：ExportpdfFile name

The main code exported

I found a lot of code online before writing this. The other codes are very simple and can be exported, but once the data volume is too large, the pdf file exported with a longer page will be blank;

This file solves this problem, but because the exported pdf is paginated, and the pdf is converted from the picture, there will be a problem of truncation in the paging, which has not been resolved yet. I hope you can give me some advice.

/* Export pdf document */
import html2Canvas from "html2canvas";
import JsPDF from "jspdf";
export default {
 install(Vue, options) {
    = function (id, title) {
     const loading = .$loading({
       fullscreen: true,
       lock: true,
       text: 'Loading',
       spinner: 'el-icon-loading',
       background: 'rgba(0, 0, 0, 0.7)'
     });
     let shareContent = (id), //Packed (native) DOM object that needs screenshot       width = , //Get dom width       height = , //Get dom height       canvas = ("canvas"), //Create a canvas node       scale = 1; //Define any magnification ratio and support decimals      = width * scale; //Define the canvas width * Scale      = height * scale; //Define the canvas height *Scale      =  * scale + "px";
      =  * scale + "px";
     ("2d").scale(scale, scale); //Get context, set scale     let opts = {
       scale: scale, // Added scale parameter       canvas: canvas, //Custom canvas       logging: false, //Log switch to facilitate viewing of the internal execution process of html2canvas       width: width, //dom original width       height: height,
       useCORS: true, // 【Important】Open cross-domain configuration     }
     html2Canvas(shareContent, opts).then(() =&gt; {
       var contentWidth = ;
       var contentHeight = ;
       //One page of pdf displays the canvas height generated by the html page;       var pageHeight = (contentWidth / 592.28) * 841.89;
       //The html page height of the pdf is not generated       var leftHeight = contentHeight;
       //Page Offset       var position = 0;
       //The size of a4 paper [595.28,841.89], the width and height of the image generated by the html page in the pdf       var imgWidth = 595.28;
       var imgHeight = (592.28 / contentWidth) * contentHeight;
       var pageData = ("image/jpeg", 1.0);
       var PDF = new JsPDF("", "pt", "a4");
       if (leftHeight &lt; pageHeight) {
         (pageData, "JPEG", 0, 0, imgWidth, imgHeight);
       } else {
         while (leftHeight &gt; 0) {
           (pageData, "JPEG", 0, position, imgWidth, imgHeight);
           leftHeight -= pageHeight;
           position -= 841.89;
           if (leftHeight &gt; 0) {
             ();
           }
         }
       }
       (title + ".pdf"); // Here is the exported file name       ();
       this.$(-1)
     });
   };
 }
};

Notice:

When printing, the css settings of elements above the parent or parent cannot have transform, otherwise the printed pdf will be offset in Firefox browser.

The above is the detailed explanation of the implementation example of Vue exporting a small number of pdfs. For more information about Vue exporting pdfs, please pay attention to my other related articles!