I want to realize a visual chart page in the front-end position PDF File export , Let's share it here jsPDF and html2canvas Bao Jiang Vue Page export to PDF How to do it .
<>1. download npm package
npm install html2canvas npm install jspdf
<>2. Creating plug-ins .js file
Vue-cli The project is in the ./utils Under the folder , I use it here nuxt frame , So it's in the ./plugins Under the folder .
import html2Canvas from 'html2canvas'; import JsPDF from 'jspdf'; export
default { install (Vue, options) { Vue.prototype.getPdf = function () { var
title= this.pdfTitle; // Exported pdf file name html2Canvas(document.querySelector(this.
pdfSelector), { // Exported html element 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 < pageHeight) { PDF.addImage(pageData, 'JPEG', 0, 0,
imgWidth, imgHeight); } else { while (leftHeight > 0) { PDF.addImage(pageData,
'JPEG', 0, position, imgWidth, imgHeight); leftHeight -= pageHeight; position -=
841.89; if (leftHeight > 0) { PDF.addPage(); } } } PDF.save(title + '.pdf'); })
} } }
The above plug-in code can be copied directly , Then in the referenced Vue Just fill in your own parameters in the file .
<>3. Modify reference page
Export button call getPdf method ,data Fill in the parameters .
<template> <div id="pdfPrint"> <!-- call getPdf method --> <el-button @click=
"getPdf('#pdfPrint')"> Save as PDF</el-button> </div> </template> <script> export
default { data() { return { // Fill in the exported pdf File name and html element pdfTitle: ' Factor evaluation report ',
pdfSelector: '#pdfPrint', } },
That's about it , It's very simple , Any questions can be asked in the comments section below ~
Technology