The preparatory work

Html2canvas JSPDF –save import html2canvas from “html2canvas” import JSPDF from “JSPDF”

The following is an example

Page DOM structure

<div class="printmain" ref="printPdf" > <table border="1"> <tr> <td rowspan="3"></td> <td colspan="4" Class = "middle" > list and promote cooperation < / td > < / tr > < tr > < td colspan = "4" class = "tr" > number: < / td > < / tr > < tr > < td style = "width: 120 px;" Class = "bold" > b: < / td > < td > < / td > < td style = "width: 120 px;" Class = "bold" > party a: < / td > < td > < / td > < / tr > < tr > < td rowspan = "17" > < / td > < td colspan = "4" > billing details < / td > < / tr > < tr > < td colspan = "4" style="padding:0;" > <table class="border-in"> <tr> <td style="width:120px;" > channel name < / td > < td > channel ID < / td > < td > billing way < / td > < td > unit price < / td > < td > < / td > < td > settlement amount < / td > < td > note (during) < / td > < / tr > < tr > < td > 1 < / td > < td > < / td > < td > < / td > < td > < / td > < td > < / td > < td > < / td > < td > < / td > < / tr > < / table > < / td > < / tr > < tr > < td colspan = "2" > total < / td > < td Colspan = "2" > 0 < / td > < / tr > < tr > < td colspan = "2" > caps < / td > < td colspan = "2" class = "tl" > RMB: </ TD > </tr> <tr> < TD colspan="4" style="background:# CCC "class="bold"> </ TD > </tr> <tr> < TD style="width: 120px;" ">< td>< td>< td style="width: 120px; > bank account < / td > < td > < / td > < / tr > < tr > < td style = "width: 120 px;" ">< td>< td>< td>< td style="width: 120px; > invoice rate < / td > < td > 6% < / td > < / tr > < tr > < td style = "width: 120 px;" "> <td style="width: 120px; > make out an invoice content < / td > < td > information service < / td > < / tr > < tr > < td colspan = "4" style = "background: # CCC" class = "bold" > payer (party a) information < / td > < / tr > < tr > < td style="width: 120px;" ">< td>< td>< td style="width: 120px; > bank < / td > < td > < / td > < / tr > < tr > < td style = "width: 120 px;" ">< td style=" max-width: 100%; clear: both; min-height: 1em; 6% > account < / td > < td > < / td > < / tr > < tr > < td style = "width: 120 px;" "> <td style="width: 120px; > </ TD > </tr> < TR > < TD colspan="4" style="background:# CCC "class="bold"> The payer shall hold two copies </ TD > </tr> < TR > < TD colSPAN ="4" style="background:# CCC "class="bold"> The unit price of settlement for this period shall be subject to the unit price on the statement sealed by both parties </ TD > </ TR > < TR > <td colspan="2" class="bold"></ TD >< td colspan="2" class="bold"></ tr> <tr style="height:100px; <td COLSPAN ="2"> <td Colspan ="2"> Date: < / td > < td colspan = "2" > date: < / td > < / tr > < / table > < / div > < button type = "danger" @ click = "canvas" > test < / button >Copy the code

Perform function block logic

Html2canvas (this.$refs.printPdf,{scale: 2,dpi:){// this.$refs.printPdf 144,}). Then (canvas = > {var context = canvas. GetContext (' 2 d) / / the following content close anti-aliasing context. MozImageSmoothingEnabled = false;  context.webkitImageSmoothingEnabled = false; context.msImageSmoothingEnabled = false; context.imageSmoothingEnabled = false; document.body.appendChild(canvas); ImgUri = canvas.todataurl (); var type = 'png'; var imgData = canvas.toDataURL(type); var _fixType = function(type) { type = type.toLowerCase().replace(/jpg/i, 'jpeg'); var r = type.match(/png|jpeg|bmp|gif/)[0]; return 'image/' + r; }; imgData = imgData.replace(_fixType(type),'image/octet-stream'); var saveFile = function(data, Filename) {/ / save picture processing function var save_link = document. The createElementNS (' http://www.w3.org/1999/xhtml ', 'a'); save_link.href = data; save_link.download = filename; var event = document.createEvent('MouseEvents'); event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); save_link.dispatchEvent(event); }; SaveFile (imgData,' settlement execution.png '); Var contentWidth = canvas.width; var contentHeight = canvas.height; Var pageHeight = contentWidth / 592.28 * 841.89; var leftHeight = contentHeight; Var position = 0; Var imgWidth = 595.28; // The size of the a4 paper [595.28,841.89], the width of the canvas generated by the HTML page in PDF. Var imgHeight = 595.28 / contentWidth * contentHeight; Var pageData = canvas.todataurl ('image/jpeg', 1.0); var pdf = new jsPDF('', 'pt', 'a4'); // PDF. Internal. ScaleFactor = 1.5; // 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). If (leftHeight < pageHeight) {PDF. AddImage (pageData, 'JPEG', 0, 0, imgWidth, imgHeight); } else { while (leftHeight > 0) { pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight) leftHeight -= pageHeight; The position - = 841.89; // Avoid adding a blank page if (leftHeight > 0) {pdf.addPage(); } } } pdf.save('stone.pdf'); })Copy the code

CSS style (Canvas living area must be visible area can not draw hidden content, so need to display the page first, after the image is generated and then hide

.printmain {position: fixed; // Separate from the document does not take up space; Z - index: - 1; // Set to invisible; width: 600px; Padding: 0.5 px; }Copy the code