Dependent files:
https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js https://html2canvas.hertzen.com/dist/html2canvas.min.js
Note: JSPDF file uses debug version, otherwise it will be invalid in Internet Explorer 10. The project is compatible with Internet Explorer 10 or later
The principle of
Html2canvas is used to draw DOM elements, convert them into Canvas objects, and call the API of Canvas objects to convert them into image data formats. Finally, JSPDF plug-in is used to draw pictures.
Disadvantages:
1: The generated PDF is of poor quality and low definition. (It can be improved by enlarging the canvas drawing area and setting DPI, and the corresponding PDF file size will also be increased.) 2: The number of PAGES in PDF will not be automatically calculated, and the location/size of the content to be drawn needs to be set actively, which is inconvenient. Advantages: front-end generation,
Final: No front-end generation solution, use the puppeteer-based node middle tier to generate PDF
const doc = new window.jsPDF('', 'px', 'a4'); doc.text("Download PDF!" , 10, 20); < span style = "max-width: 100%; clear: both; min-height: 1pt; Html2canvas (document.getelementById ("capture"), {scale: 8, DPI: 768,}); // TextBox is a discount chart. Echarts HiggCharts random const canvas1 = await window.html2Canvas (document.getelementById ("textbox"), {scale: 8, dpi: 768,}); // Add a page of PDF and draw the previous HTML. Note that the following numeric parameters are x coordinates, y coordinates, AddImage (canvas. ToDataURL ("image/ JPEG", 1), "JPEG", 0, 40, 300, 35); // doc.addPage(); // doc.addImage(this.chart.toDataURL('image/jpeg', 1), 'JPEG', 0, 100, 150, 75); doc.addImage( canvas1.toDataURL("image/jpeg", 1), "JPEG", 0, 100, 300, 150); doc.save("a4.pdf");