Vue Export page is implemented in PDF format

After viewing online, let’s talk about it. It is to convert the page into a picture format. Then through the picture 64 code. Generate PDF .. Look at their articles, have made the following finishing ..

It’s easy to say, then how do you achieve it?

1, we have to add two modules

First. Convert the page HTML to a picture

NPM Install –Save HTML2CANVAS
   Second. PDF 

NPM Install JSPDF –Save

2, define global functions .. Create an HTMLTOPDF.JS file in the specified location. I am personal habits Put (‘src / Components / Utils / HTMLTOPDF’)
   / / Export page is PDF Format Import HTML2CANVAS from 'HTML2CANVAS'IMPORT JSPDF from' JSPDF ' export default {install (Vue, options) {Vue.prototype.getPdf = function () {var title = this.htmlTitle html2Canvas (document.querySelector ( '# pdfDom'), {allowTaint: true}). then (function (canvas ) {let contentWidth = canvas.width let contentHeight = CAnvas.height let pageHeight = contentWidth / 592.28 * 841.89 let leftHeight = contentHeight let position = 0 let imgWidth = 595.28 let imgHeight = 592.28 / contentWidth * contentHeight let pageData = canvas.toDataURL ( 'image / jpeg', 1.0) let PDF = new JSPDF ('', 'PT', 'A4') IF (LeftHeight 
0) {PDF.Addimage (PageData, ‘JPEG’, 0, POSITION, IMGWIDTH, IMGHETIT) LeftHeight – = PageHeight Position – = 841.89 IF LeftHeight> 0) {pdf.addpage ()}}} pdf.save (title + ‘.pdf’)}}}}

3, Main.js uses our defined function files.
  Import htmltopdf from '@ / components / utils / htmltopdf'Vue.use (htmltopdf)   

4, in the exported page .. Call our getPDF method.

HTML
   
// gives yourself to the UI section. Define IDs “PDFDOM. This section will be part of PDF display
Export PDF

Export default {data () {return {htmltitle: ‘page exports PDF file name’}}}
  
Summary
The above is the implementation of the VUE export page introduced by Xiaobian to everyone, I hope that everyone can help, if you have If you have any questions, please leave a message, the small package will reply to everyone in time. Thank you very much for your support of Tumi Cloud Website!

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment