Background: The company’s previous PDF implementation was implemented by the backend, which generated the PDF and returned the link to the front end, which did the processing. Because implementation by the back end costs performance, it is intended to be implemented by the front end. I read a lot of schemes on Baidu and Digging gold, and decided to use HTMLToCanvas and jsPdf to achieve PDF. So to begin:

1. Install two dependencies:

npm i html2canvas -S
npm i jspdf -S
Copy the code

Implementation idea: HTML to canvas after the generated picture export PDF

Html2canvas is a plug-in to convert HTML code to Canvas, and jsPDF is to generate PDF from Canvas

2. Code implementation:

PageYOffset = 0; window.pageyoffset = 0; window.pageyoffset = 0; document.documentElement.scrollTop = 0 document.body.scrollTop = 0 html2Canvas(document.querySelector(`#${targetDom}`), {/ / targetDom dom, is the goal is to generate a canvas element allowTaint: true, / / allow cross-domain (I never tried, ha ha ~) useCORS: Scale: 2, // The larger the value is, the clearer it will be. My simple attempt to change it to 1.5 is a bit fuzzy. // Dpi: DevicePixelRatio * 2, // window.devicePixelRatio is the devicePixelRatio}). Then (canvas => {let position = 0; // Let canvasWidth = canvas.width; let canvasHeight = canvas.height; // let pageWidth = a4Width; let pageHeight = (a4Width / canvasWidth) * canvasHeight; Let jpeg = canvas. ToDataURL ('image/jpeg', 1.0); // The first argument is vertical and horizontal, the second argument is unit, and the third argument is the size of the generated PDF. [164.14, 424.5] // Let PDF = new JsPDF(", 'pt', 'a4'); // If (canvasHeight < pageHeight) {// If (canvasHeight < pageHeight) { AddImage (jpeg, 'JPEG', 0, 0, pageWidth, pageHeight); addImage(jpeg, 'jpeg ', 0, pageWidth, pageHeight); Else {while (canvasHeight > 0) {PDF. AddImage (jpeg, 'JPEG', 0, position, pageWidth, pageHeight); canvasHeight -= pageHeight; position -= a4Height; // Avoid adding a blank page if (canvasHeight > 0) {pdf.addPage(); } } } pdf.save(fileName + '.pdf'); // fileName fileName, custom})Copy the code

3. Effect screenshot:

Click ok below to generate a preview of the generated DOM page (page layout, etc., copied from elsewhere)Copy the code

The preview image is not fully generated, as shown below:Copy the code

Window. PageYOffset = 0; Document. The documentElement. ScrollTop = 0 document. The body. The scrollTop = 0 look at rendering:Copy the code

Last download:

// PDF is the instance object generated by new JsPDF('', 'pt', 'a4')Copy the code

Summary: probably the PDF implementation is like this, but finally to print the generated PDF, printing is similar to the size of the supermarket receipt, because the generated PDF is converted from pictures to PDF, resulting in printer printing will be distorted, no longer choose to achieve this demand by the front end. Small limited capacity – – – there is a print of the effect can be shown to everyone:

By the way, my hands look pretty white ~~ hahahaCopy the code

Off-topic: this is my first time writing the Nuggets, and a lot of the code is borrowed from the big guys, so I’m sorry if it looks familiar. Some of the descriptions of the wrong also ask big men to correct. It is also a record of something funny. I hope I can keep it in the future!!