preface

Implementing PDF export without further ado let’s look at the code

The installation

npm install html2canvas --save

npm install jsPDF --save
Copy the code

configuration

** configures (imports, mounts) ** in main.jsimport html2canvas from 'html2canvas'
import jsPDF from 'jsPDF 'Vue.prototype.html2canvas = html2canvas Vue.prototype.jsPDF = jsPDF Or -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- * * index in HTML page directly introducing js file: * *<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>

Copy the code

code

Note: The generated PDF is only visible to the page window, and the scroll bar is not generated if the interception is at the body level and the body sets Overflow: hidden; The extra part is never captured because the dom height of the node is the height visible to the window, not the extra part of the scroll bar. Workaround: Just set Overflow: Auto to visible before exporting; Export the PDF and set it back.

/ / page
<div id="demo" > // The DOM to print


        // Download the PDF method
    function createPDF(id,name) {
        let demo=document.getElementById(id);
        demo.style.overflow='visible';
        html2canvas(demo, {
            allowTaint: true.// Allow cross-domain
            height: document.getElementById(id).scrollHeight,//
            width: document.getElementById(id).scrollWidth,// In order for the horizontal scroll bar contents to be fully displayed, this must be specified
            background: "#FFFFFF".// If the specified div has no background color, it defaults to black
            onrendered:function(canvas) {
                var contentWidth = canvas.width;
                var contentHeight = canvas.height;

                // a PDF page displays the canvas height generated by the HTML page;
                var pageHeight = contentWidth / 595.28 * 841.89;
                // Height of HTML page not generated PDF
                var leftHeight = contentHeight;
                // PDF page offset
                var position = 0;
                // The size of the A4 paper [595.28,841.89], the width and height of the image in the PDF generated by the CANVAS of the HTML page
                var imgWidth = 555.28;
                var imgHeight = 555.28/contentWidth * contentHeight;

                var pageData = canvas.toDataURL('image/jpeg'.1.0);

                var pdf = new jsPDF(' '.'pt'.'a4');
                // There are two heights to distinguish, one is the actual height of the HTML page, and the page height of the generated PDF (841.89)
                // When the content does not exceed the size of a PDF page, no pagination is required
                if (leftHeight < pageHeight) {
                    pdf.addImage(pageData, 'JPEG'.20.0, imgWidth, imgHeight );
                } else {
                    while(leftHeight > 0) {
                        pdf.addImage(pageData, 'JPEG'.20, position, imgWidth, imgHeight)
                        leftHeight -= pageHeight;
                        position -= 841.89;
                        // Avoid adding blank pages
                        if(leftHeight > 0) {
                            pdf.addPage();
                        }
                    }
                }

                pdf.save(name+'.pdf');
            }
        })
        demo.style.overflow='auto';
    };

Copy the code