"Jspdf" Jspdf plugin enables HTML pages to be converted to PDF and downloaded to support paging

1, the purpose: in the previous paragraph is the jquery library or Vue library or both mixed library, HTML pages and data into PDF format and download, support paging

2. Introduction of Class Library package:

<!--. pdf file Download  Download--    <script src= "https://cdn.bootcss.com/html2canvas/0.5.0-beta4/ Html2canvas.js "></script>    <script src=" Https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js "> </script><!--jQuery 2.2.3--><script src= "/plugins/jquery/jquery-2.2.3.min.js" ></script>

3, need to download the content of the page, assume in a div (vue2.0 example):

<Divclass= "Right-aside" id= "Pdfdom" class= "Right-aside ">                < Sectionclass= "Content-header">@yield (' Search ')</ Section>        < Sectionclass= "Content">@yield (' content ')</ Section>        <I-colspan= "8">            <I-buttontype= "Warning" @click = "makempdf ()">Exporting PDF files</I-button>        </I-col></Div><Scripttype= "Text/javascript">functionmakempdf () {if(Confirm ("are you sure you want to download the PDF file?")){       varPDF= NewJspdf ('P','PT','A4'); //Set the print scale the larger the print sizePdf.internal.scaleFactor= 2; varOptions={ pagesplit: true,//Set whether automatic paging          "background": '#FFFFFF'   //If the exported PDF is a black background, you need to set the exported HTML module content background to white.       }; varprinthtml=$ (' #pdfDom '). Get (0); //the contents of a div within a page, and get the div content by IDpdf.addhtml (printhtml, the,  the, Options,function() {Pdf.save ('Target. pdf');    }); }}</Script>

4, or the above JS method can be replaced with this is also possible.

Export the HTML page. pdf file (for jquery, Vue Library)--Xzz 2018/04/24function makempdf (pdfname) {if (Confirm ("Are you sure you want to download the PDF file?"))    {var target = Document.getelementsbyclassname ("right-aside") [0];    Target.style.background = "#FFFFFF"; if (pdfname== ' | | |        pdfname==undefined) pdfname= getnowformatdate ();            Html2canvas (target, {onrendered:function (canvas) {var contentwidth = canvas.width;            var contentheight = canvas.height;            One-page PDF displays the canvas height generated by the HTML page;            var pageheight = contentwidth/592.28 * 841.89;            HTML page with no generated pdf height var leftheight = contentheight;            Page offset var position = 0;            A4 paper Size [595.28,841.89],html page generated canvas in PDF picture of the width of the high var imgwidth = 595.28;            var imgheight = 592.28/contentwidth * contentheight;            var pagedata = Canvas.todataurl (' image/jpeg ', 1.0);            var pdf = new Jspdf (', ' pt ', ' A4 ');          There are two heights to differentiate, one is the actual height of the HTML page, and the page height to generate the PDF (841.89)  When the content does not exceed the range shown on the PDF page, there is no need for paging if (leftheight  <PageHeight{pdf.addimage (pagedata, ' JPEG ', 0, 0, ImgWidth, imgheight); } else {while (Leftheight>0) {pdf.addimage (pagedata, ' JPEG ', 0, position, ImgWidth, imgheight) Leftheigh                    T-= pageheight;                    Position-= 841.89;                    Avoid adding blank pages if (Leftheight > 0) {pdf.addpage ();        }}} Pdf.save (pdfname+ ". pdf"); }      })  }}

5. Effect:

"Jspdf" Jspdf plugin enables HTML pages to be converted to PDF and downloaded to support paging