The front end generates PDF, and the use of jspdf + html2canvas (Vue)

Time:2022-1-13

The effect of PDF generated by the front end is not as good as that generated by the back end, but it can also be generated.
This paper mainly usesjspdf+html2CanvasHTML to PDF.Jspdf does not support ChineseTherefore, you need to cooperate with html2canvas. If you convert pictures into PDF, you don’t have to consider Chinese and English, but there will be problemspagingandThe style is not friendlyQuestion of

1、 Preliminary preparation

The front end generates PDF, and the use of jspdf + html2canvas (Vue)

1. Install jspdf:npm install jspdf –save

2. Install html2canvas:npm install –save html2canvas

2、 Code

1. html

Use hereiframeNest HTML files that need to be converted into PDF;

If the PDF content is dynamic, you can throw the HTML to the back end, let the back end use freemaker FTL template language or any other template language to change, and then pass the whole HTML to the front end as a string, and then the front end uses the srcdoc attribute of iframe to render the content.

The front end generates PDF, and the use of jspdf + html2canvas (Vue)

2. Generate a single page

There is no split page content, but it is not very friendly to the style presentation. Sometimes the content is offset, sometimes good or bad. After continuous attempts, you can write the width of html2canvas to death when the offset occurs, but you need to guess the specific value

//Single page PDF: CSS can be highly adaptive (a CSS is used here. In order to realize multi page PDF without page segmentation of pictures, the height of each page is written in CSS. A4page)
    getOnePdf() {
      Var title = "single page report";
      var dom = document. getElementById("pdf-container");  //  Generate HTML content of PDF
      html2Canvas(dom, {
        allowTaint: true,
        scrollY: 0,
        scrollX: 0,
        Usecors: true, // enable Cross Hospital
        Width: 1000, // this width is bullshit. Fix 1000 to prevent offset!
        height: dom.offsetHeight
      }).then(function(canvas) {
        var contentWidth = canvas.width;
        var contentHeight = canvas.height;
        var pdfWidth = (contentWidth + 10) / 2 * 0.75;
        var pdfHeight = (contentHeight + 200) / 2 * 0.75; //  500 is left blank at the bottom
        var imgWidth = pdfWidth;
        var imgHeight = contentHeight / 2 * 0.75; // There is no need to leave a blank distance here
        var pageData = canvas.toDataURL("image/jpeg", 1.0);
        var pdf = new JsPDF("", "pt", [pdfWidth, pdfHeight]);
        pdf.addImage(pageData, "jpeg", 0, 0, imgWidth, imgHeight);
        pdf.save(title + ".pdf");
      });
    },
The front end generates PDF, and the use of jspdf + html2canvas (Vue)

3. Generate multiple pages

Pagination will cause problems: for example, the picture is split, a row of the table is broken from the middle, etc I use the stupid method to manually adjust the width and height of iframe + html2canvas width, height + contentwidth and contentheight, and try out the appropriate values bit by bit (there should be a better method, but the technology is limited)

//The width and height of iframe + the width, height + contentwidth and contentheight of html2canvas need to be manually adjusted for the multi page PDF converted style
    getManyPdf() {
      let _this = this;
      var dom = document. getElementById("pdf-container"); //  Generate HTML content of PDF
      html2Canvas(dom, {
        allowTaint: true,
        scrollY: 0,
        scrollX: 0,
        Usecors: true, // enable Cross Hospital
        Width: 1000, // this width is bullshit. Fix 1000 to prevent offset!
        height: dom.offsetHeight
      }).then(function(canvas) {
        var contentWidth = 900; //  Wide high write dead, forced paging
        var contentHeight = 5060;

        //One page PDF displays the height of the canvas generated by the HTML page;
        var pageHeight = contentWidth / 592.28 * 841.89;
        //HTML page height without PDF generated
        var leftHeight = contentHeight;
        //Page offset
        var position = 0;
        //A4 paper size [595.28841.89], width and height of canvas generated by HTML page in PDF
        var imgWidth = 595.28;
        var imgHeight = 3400; //  For paging, so write dead. 592.28 / contentwidth * contentheight will cause the picture to be segmented

        var pageData = canvas.toDataURL("image/jpeg", 1.0);
        var pdf = new JsPDF("", "pt", "a4");
        //There are two heights that need to be distinguished. One is the actual height of the HTML page and the height of the generated PDF page (841.89)
        //When the content does not exceed the range displayed on one page of PDF, pagination is not required
        if (leftHeight < pageHeight) {
          pdf.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
        } else {
          while (leftHeight > 0) {
            //ARG3 -- > left margin; Arg4 -- > distance upper margin; Arg5 -- > width; Arg6 -- > height
            pdf.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
            leftHeight -= pageHeight;
            position -= 841.89;
            //Avoid adding blank pages
            if (leftHeight > 0) {
              pdf.addPage();
            }
          }
        }
        pdf. Save ('multi page report}. PDF ');
      });
    }

3、 All codes

<div style="width: 100%; height: 100%; overflow: auto">
    < El button @ Click = "getonepdf" type = "primary" > download single page < / El button >
    < El button @ Click = "getmanypdf" type = "primary" > Download multi page < / El button >

    <!--  Container to PDF -- >
    <div>
      <iframe src="/exportPDF/exportPDF.html" width="1000" height="5200"></iframe>
    </div>
  </div>
</template>

<script>
import html2Canvas from "html2canvas";
import JsPDF from "jspdf";
export default {
  data() {
    return {};
  },
  methods: {
    //Single page PDF: CSS can be highly adaptive (a CSS is used here. In order to realize multi page PDF without page segmentation of pictures, the height of each page is written in CSS. A4page)
    getOnePdf() {
      Var title = "single page report";
      var dom = document. getElementById("pdf-container");  //  Generate HTML content of PDF
      html2Canvas(dom, {
        allowTaint: true,
        scrollY: 0,
        scrollX: 0,
        Usecors: true, // enable Cross Hospital
        Width: 1000, // this width is bullshit. Fix 1000 to prevent offset!
        height: dom.offsetHeight
      }).then(function(canvas) {
        var contentWidth = canvas.width;
        var contentHeight = canvas.height;
        var pdfWidth = (contentWidth + 10) / 2 * 0.75;
        var pdfHeight = (contentHeight + 200) / 2 * 0.75; //  500 is left blank at the bottom
        var imgWidth = pdfWidth;
        var imgHeight = contentHeight / 2 * 0.75; // There is no need to leave a blank distance here
        var pageData = canvas.toDataURL("image/jpeg", 1.0);
        var pdf = new JsPDF("", "pt", [pdfWidth, pdfHeight]);
        pdf.addImage(pageData, "jpeg", 0, 0, imgWidth, imgHeight);
        pdf.save(title + ".pdf");
      });
    },
    //The width and height of iframe + the width, height + contentwidth and contentheight of html2canvas need to be manually adjusted for the multi page PDF converted style
    getManyPdf() {
      let _this = this;
      var dom = document. getElementById("pdf-container"); //  Generate HTML content of PDF
      html2Canvas(dom, {
        allowTaint: true,
        scrollY: 0,
        scrollX: 0,
        Usecors: true, // enable Cross Hospital
        Width: 1000, // this width is bullshit. Fix 1000 to prevent offset!
        height: dom.offsetHeight
      }).then(function(canvas) {
        var contentWidth = 900; //  Wide high write dead, forced paging
        var contentHeight = 5060;

        //One page PDF displays the height of the canvas generated by the HTML page;
        var pageHeight = contentWidth / 592.28 * 841.89;
        //HTML page height without PDF generated
        var leftHeight = contentHeight;
        //Page offset
        var position = 0;
        //A4 paper size [595.28841.89], width and height of canvas generated by HTML page in PDF
        var imgWidth = 595.28;
        var imgHeight = 3400; //  For paging, so write dead. 592.28 / contentwidth * contentheight will cause the picture to be segmented

        var pageData = canvas.toDataURL("image/jpeg", 1.0);
        var pdf = new JsPDF("", "pt", "a4");
        //There are two heights that need to be distinguished. One is the actual height of the HTML page and the height of the generated PDF page (841.89)
        //When the content does not exceed the range displayed on one page of PDF, pagination is not required
        if (leftHeight < pageHeight) {
          pdf.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
        } else {
          while (leftHeight > 0) {
            //ARG3 -- > left margin; Arg4 -- > distance upper margin; Arg5 -- > width; Arg6 -- > height
            pdf.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
            leftHeight -= pageHeight;
            position -= 841.89;
            //Avoid adding blank pages
            if (leftHeight > 0) {
              pdf.addPage();
            }
          }
        }
        pdf. Save ('multi page report}. PDF ');
      });
    }
  },
  created() {
    
  },
  mounted() {}
};
</script>

remaining problems

1. Generate multi page PDF, and the paging content is split

Recommended Today

Redis visualization tool redisinsight

Redisinsight Ubuntu deployment of redis visualization tool 1、 Download redisinsight 2、 Disposition 3、 Run redisinsight 4、 Use Redisinsight: monitor redis Use the browser based management interface to check redis data, monitor health status and execute runtime server configuration for redis deployment. Explore and interact with your redis data Reduce redis memory usage Real time monitoring […]