Shulou(Shulou.com)06/01 Report--

In this article Xiaobian introduces in detail for you "vue how to generate high-definition pdf files on html pages", detailed content, clear steps, and proper handling of details. I hope that this article "vue how to generate high-definition pdf files on html pages" can help you solve your doubts.

Two plug-ins, html2canvas and jspdf, are needed.

First, the page is used to generate base64 pictures with html2canvas, and then jspdf is used to insert the pictures into pdf.

The effect picture is as follows

CreateImage () {/ / generate pictures-> pdf let _ this = this; / /-here is to solve the problem of incomplete screenshots when the page has scroll bars window.pageYoffset = 0; document.documentElement.scrollTop = 0; document.body.scrollTop = 0 '/ /-- let canvas = document.createElement ("canvas"); let context = canvas.getContext ("2d"); let _ articleHtml = document.getElementById (' imageTofile'); let _ w = _ articleHtml.clientWidth; let _ h = _ articleHtml.clientHeight / /-to solve the problem that the generated pdf is not clear, first enlarge by 3 times-then reduce by 3 times let scale = 3; canvas.width = _ w * scale; canvas.height = _ h * scale; context.scale (scale, scale) Let opts = {scale: 1, width: _ w, height: _ h, canvas: canvas, useCORS: true}; (window.html2canvas | | html2canvas) (_ articleHtml, opts) .then (canvas = > {/ / IOS13.4 invalid resolution and {(intermediate value) (intermediate value)} is not a function+) This.createPdfAll (canvas, scale);});}

Here I insert the whole img directly into the pdf without truncating the pages, because the truncation needs to be adjusted, which is not very friendly, otherwise the text will be truncated from the middle position.

CreatePdfAll (canvas, scale) {/ / generate picture-> pdf / /-reduce width and height by 3 times-let contentWidth = canvas.width / scale let contentHeight = canvas.height / scale / /-let pdf = new jsPDF ('', 'pt', [contentWidth ContentHeight+50]) / / adding 50 here is the last blank distance from the bottom of the pdf. Adjust let pageData = canvas.toDataURL ('image/jpeg', 1.0) as needed; / / only one page of pdf is generated and not truncated. If you need to truncate, operate pdf.addImage (pageData,' JPEG', 0,0, contentWidth, contentHeight) / / here is the stream file of pdf-"file file let filename = 'question.pdf'" Let datauri = pdf.output ('dataurlstring'); let file = this.dataURLtoFile (datauri,filename); / / upload as a file to the server this.uploadImg (file)}, and the stream file is converted to file dataURLtoFile (dataurl, filename) {var arr = dataurl.split (','); var mime = arr [0] .match (/: (. *?); /) [1] Var bstr = atob (arr [1]); var n = bstr.length; var u8arr = new Uint8Array (n); while (nMel -) {undefined u8arr [n] = bstr.charCodeAt (n);} / / converted to file object return new File ([u8arr], filename, {type:mime}) / / convert to blob object / / return new Blob ([u8arr], {type:mime});}

This kind of solution is pure front-end implementation, does not need back-end cooperation, and the page restoration degree is relatively high, and the demand for pdf operation is not high, it is still a more appropriate solution.

The disadvantage is that it cannot be copied and is not compatible with pdf operations.

Read here, the "vue how to generate high-definition html page pdf file" article has been introduced, want to master the knowledge of this article also need to practice and use in order to understand, if you want to know more about the article, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.