Export HTML page PDF-- HD

  Need to do a PDF export function, there are many online to find, but are generally guided by the kind of vague, following a high-definition version of the exported PDF are a few M, with export almost normal manual, very clear .

  First used in JS are:

<script  type="text/javascript" charset="utf-8"  src="js/html2canvas.js"></script>
<script  type="text/javascript" charset="utf-8" src="js/jsPdf.debug.js"></script>
<script  type="text/javascript" charset="utf-8" src="js/canvas2image.js"></script>

  Code:  

   <Script>
  function exportReportTemplet () {
             var Element $ = ( "Print #");     // this is to export pdf dom element container div 
            var W = element.width ();     // get the container width 
            var H = element.height ();     // get the container high 
            var the offsetTop = element.offset () top;.     // get the container from the top of the document to 
            var the offsetLeft = element.offset () left;.     // get the container distance to documentation leftmost 
            var canvas = document.createElement ( "canvas" ); 
            canvas.width W * = 2;     // canvas high amplification && width twice 
            canvas.height * 2 = H ;
            var context = canvas.getContext("2d");
            var scale = 2;
            context.scale(2, 2);
          //  context.translate(-offsetLeft - abs, -offsetTop);

            var opts = {
                scale: scale,
                canvas: canvas,
                width: w,
                height: h,
                useCORS: true,
                background: '#FFF'
            }

            html2canvas(element, opts).then(function (canvas) {
                allowTaint: false;
                taintTest: to false ;
                 var the contentWidth = canvas.width;
                 var contentHeight = canvas.height;
                 // a pdf html page display generated canvas height; 
                var pageHeight = the contentWidth / 592.28 * 841.89 ;
                 // not generated pdf html page height 
                var = leftHeight contentHeight;
                 // page offset 
                var position = 0 ;
                 // A4 paper size [595.28,841.89], html page canvas is generated in the image width and height of the pdf 
                var imgWidth = 595.28 ;
                 var= 592.28 imgHeight / * the contentWidth contentHeight; 

                var PageData = canvas.toDataURL ( 'Image / JPEG', 1.0 );
              //    var oCanvas = document.getElementById ( "Print"); 
               // Canvas2Image.saveAsJPEG (oCanvas); 
                var PDF = new new jsPDF ( '', 'Pt', 'A4' ); 

                // there is need to distinguish between two height, the actual height of a html page, and generating the pdf page height (841.89) 
                // when a content does not exceed pdf displayed range, without paging 
                IF (leftHeight < pageHeight) { 
                    pdf.addImage (PageData, 'the JPEG', 0, 0 , imgWidth, imgHeight); 
                } the else {     // tab 
                    while(leftHeight> 0 ) { 
                        pdf.addImage (PageData, 'the JPEG', 0 , position, imgWidth, imgHeight) 
                        leftHeight - = pageHeight; 
                        position - = 841.89 ;
                         // to avoid adding a blank page 
                        IF (leftHeight> 0 ) { 
                            pdf.addPage (); 
                        } 
                    } 
                } 
                pdf.save ( 'sales contract of.pdf' ); 
             }) 
      
        }
      </ Script>

 

Guess you like

Origin www.cnblogs.com/alannxu/p/10982952.html