Export the page form to PDF with front-end JS (ii)

　　I said before, the page to export the table as a PDF, through the code I gave intact implementation of its requirements, but not a few days, and said, because my table is a maximum of 26 lines on the page, if the table row more than one, you will click on the next page and then export the PDF, because it is customer-oriented, So to minimize the user's operation, so to change, a button to export all the tables, and then automatically pagination, each page plus a specific picture. I'm going to @#@#@!. This is.... , no way, change Bai, back and forth tossing two days, finally let me to the whole out, not easy AH! Really is the need to have the power Ah!

First say my way: first or in accordance with the normal page display, when clicking the Export PDF button, jump to another page, in this page table is not paginated, but completely displayed in a page, and then render the PDF export, through the cavase of the dislocation, using blank images, covering the superfluous table, Then go down until all of the moves are complete so that you can export multiple pages. It's like the same principle.

　　The first is still the same, the introduction of files

<script src= "Add/pdf/jquery.js" ></script><script src= "Add/pdf/jspdf.debug.js" ></script> <script src= "Add/pdf/html2canvas.min.js" ></script><script src= "Add/pdf/exportpdf.js" ></ Script>

Exportpdf.js

$ (' #exportpdf '). Click (function () {Html2canvas (document.getElementById ("contents"), {Onrendered:function(canvas) {//page-generated canvas high            varContentheight =Canvas.height; //HTML page height for PDF not generated            varAllheight =Contentheight; //PDF Page Header offset distance (offset)            varPosition = 60; //A4 size of paper [595.28,841.89],html page generated canvas in PDF picture width height            varImgWidth = 595; varImgdata = Canvas.todataurl (' image/jpeg '));

var img1_base = ' ~ ';
var img2_base = ' ~ ';
var img3_base = ' ~ ';
var img4_base = ' ~ ';
var img5_base = ' ~ '; //Initialize the PDF, set the appropriate format            varDoc =NewJspdf ("P", "PT", "A4"); varp = 1, I= 1.5, Z= Math.ceil (LAST_COUNTS/26);
If the height is less than one pageif(Allheight < 1100) {                //page FormDoc.addimage (imgdata, 0, position, ImgWidth, contentheight/i);//a blank picture (Overrides will be exceeded)Doc.addimage (img4_base, 0, 0, 600, 110); //Company logoDoc.addimage (Img1_base, 10, 5, 90, 50); Doc.addimage (Img2_base,450, 5, 130, 50); //blank picture (Overrides are not required)Doc.addimage (img4_base, 0, 760, 600, 200); Doc.addimage (Img3_base,450, 780, 120, 40); //Order Total PictureDoc.addimage (img5_base, 0, 68, 600, 25);
　　　　　　　　　// text (because Jspdf does not support Chinese, so it will be used in Chinese to make pictures)  doc.setfontsize (10); Doc.text (8, 85, start_time); Doc.text (75, 85, End_time); Doc.text (160, 85, String (last_counts)); Doc.text (268, 85, String (Total_price)); Doc.text (508, 85, String (Lists[p])); Doc.text (290, 820, String (p)); } Else {                //if greater than one page                if(Z > 0) {                    //page FormDoc.addimage (imgdata, 0, position, ImgWidth, contentheight/i);//Blank PictureDoc.addimage (img4_base, 0, 0, 600, 110); //Company logoDoc.addimage (Img1_base, 10, 5, 90, 50); Doc.addimage (Img2_base,450, 5, 130, 50); //Blank PictureDoc.addimage (img4_base, 0, 760, 600, 200); Doc.addimage (Img3_base,450, 780, 120, 40); //Order Total PictureDoc.addimage (img5_base, 0, 68, 600, 25); Doc.setfontsize (10); Doc.text (8, 85, start_time); Doc.text (75, 85, End_time); Doc.text (160, 85, String (last_counts)); Doc.text (268, 85, String (Total_price)); Doc.text (508, 85, String (Lists[p])); Doc.text (290, 820, String (p));
Each page is exported with a corresponding offset position-= 624; Z-= 1;  while(Z > 0) {doc.addpage (' A4 ', ' PT '); //page FormDoc.addimage (imgdata, 0, position, ImgWidth, contentheight/i);//Blank PictureDoc.addimage (img4_base, 0, 0, 600, 130); //Table HeaderDoc.addimage (Img6_base, 5, 113, 586, 24); //Company logoDoc.addimage (Img1_base, 10, 5, 90, 50); Doc.addimage (Img2_base,450, 5, 130, 50); Doc.addimage (Img4_base,0, 760, 600, 200); Doc.addimage (Img3_base,450, 780, 120, 40); //Order Total PictureDoc.addimage (img5_base, 0, 68, 600, 25); Doc.setfontsize (10); Doc.text (8, 85, start_time); Doc.text (75, 85, End_time); Doc.text (160, 85, String (last_counts)); Doc.text (268, 85, String (Total_price)); P+ = 1; Doc.text (508, 85, String (Lists[p])); Doc.text (300, 820, String (p)); //allheight = +;Position-= 624; Z-= 1; }}} doc.save (' Bill.pdf '); }, Background:' #FFF '    }) });

Export the page form to PDF with front-end JS (ii)