1）html2canvas 截圖

npm install --save html2canvas import html2canvas from 'html2canvas'; // 截圖并回調方法 html2canvas(document.querySelector("#capture")).then(canvas => {document.body.appendChild(canvas) });

2）jspdf 生成導出pdf

npm install jspdf --save import { jsPDF } from "jspdf"; let pdf = new jsPDF('p', 'pt', [pdfX, pdfY]); // l：橫向 p：縱向 pdf.addImage(image.data, 'JPEG', 0, isAddpage, imgX, imgHeight); // 將圖像添加到PDF pdf.save(`測試.pdf`);

參考代碼

function convertCanvasToImage() { html2canvas(document.getElementById('mEcharts'), { onrendered: function(canvas) { //document.body.appendChild(canvas); createPDFObject(canvas.toDataURL("image/jpeg")); } }); } function createPDFObject(imgData) { debugger;var name="柱狀圖";var doc = new jsPDF('p', 'pt');doc.addImage(imgData, 5, 5, 600, 300, 'img');doc.save(''+name+'.pdf')}

橫向導出

// 截屏導出pdf downloadPDF: function () { // 截圖html2canvas(document.querySelector('.kuang-bg')).then(canvas => {// document.body.appendChild(canvas)// canvas的寬度var contentWidth = canvas.width// console.log('canvas寬度：' + contentWidth) // canvas寬度：1546// canvas的高度var contentHeight = canvas.height// console.log('canvas高度：' + contentHeight) // canvas高度：1647// 一頁pdf顯示html頁面生成的canvas高度;// 已知cancas的尺寸，和pdf的比例，按照cancas的尺寸根據比例計算出page的高度// a4紙的尺寸[595.28,841.89]// contentWidth / pageHeight = 592.28 / 841.89// a/b=a1/b1 b=a*b1/a1// 1000*841.89/592.28=1421.4391841696495// 1000/592.28*841.89=1421.4391841696495// var pageHeight = contentWidth * 841.89 / 592.28// 因為是橫著打印，所以高度要反一反var pageHeight = contentWidth * 592.28 / 841.89// var pageHeight = contentWidth / 592.28 * 841.89// console.log('一頁pdf顯示html頁面生成的canvas高度：' + pageHeight) // 一頁pdf顯示html頁面生成的canvas高度：2197.5449787262783// 未生成pdf的html頁面高度var leftHeight = contentHeight// console.log('未生成pdf的html頁面高度:' + leftHeight) // 未生成pdf的html頁面高度：1647// 頁面偏移var position = 0// a4紙的尺寸[595.28,841.89]，html頁面生成的canvas在pdf中圖片的寬高// var imgWidth = 595.28// var imgHeight = 592.28 / contentWidth * contentHeight// 橫著打印，寬和高要對調一下var imgWidth = 841.89var imgHeight = 841.89 / contentWidth * contentHeight// console.log('html頁面生成的canvas在pdf中圖片的高度：' + imgHeight)this.createPDFObject(canvas.toDataURL('image/jpeg', 1.0), leftHeight, pageHeight, imgWidth, imgHeight, position)}) }, createPDFObject: function (imgData, leftHeight, pageHeight, imgWidth, imgHeight, position) { // 導出FDF// let height = this.$refs.top.offsetHeight // 高度var doc = new JsPDF('l', 'pt') // 橫著打印// var doc = new JsPDF('', 'pt', 'a4') // 豎著打印console.log('未生成pdf的html頁面高度:' + leftHeight) // 未生成pdf的html頁面高度：1647console.log('一頁pdf顯示html頁面生成的canvas高度:' + pageHeight) // 一頁pdf顯示html頁面生成的canvas高度：if (leftHeight < pageHeight) { // 沒有超出一頁doc.addImage(imgData, 'jpeg', 0, 0, imgWidth, imgHeight)} else {while (leftHeight > 0) {doc.addImage(imgData, 'jpeg', 0, position, imgWidth, imgHeight)leftHeight -= pageHeightposition -= 595.28if (leftHeight > 0) {doc.addPage()}}}let year = this.chartYearlet sMonth = this.chartMonth[0]let eMonth = this.chartMonth[this.chartMonth.length - 1]doc.save(year + '年' + sMonth + '至' + eMonth + '用電走勢圖.pdf') },

豎向導出

// 截屏導出pdfdownloadPDF: function () { // 截圖html2canvas(document.querySelector('.kuang-bg')).then(canvas => {// document.body.appendChild(canvas)// canvas的寬度var contentWidth = canvas.width// console.log('canvas寬度：' + contentWidth) // canvas寬度：1546// canvas的高度var contentHeight = canvas.height// console.log('canvas高度：' + contentHeight) // canvas高度：1647// 一頁pdf顯示html頁面生成的canvas高度;// 已知cancas的尺寸，和pdf的比例，按照cancas的尺寸根據比例計算出page的高度// a4紙的尺寸[595.28,841.89]// contentWidth / pageHeight = 592.28 / 841.89// a/b=a1/b1 b=a*b1/a1// 1000*841.89/592.28=1421.4391841696495// 1000/592.28*841.89=1421.4391841696495// 豎版var pageHeight = contentWidth * 841.89 / 592.28// 因為是橫著打印，所以高度要反一反// var pageHeight = contentWidth * 592.28 / 841.89// var pageHeight = contentWidth / 592.28 * 841.89// console.log('一頁pdf顯示html頁面生成的canvas高度：' + pageHeight) // 一頁pdf顯示html頁面生成的canvas高度：2197.5449787262783// 未生成pdf的html頁面高度var leftHeight = contentHeight// console.log('未生成pdf的html頁面高度:' + leftHeight) // 未生成pdf的html頁面高度：1647// 頁面偏移var position = 5// a4紙的尺寸[595.28,841.89]，html頁面生成的canvas在pdf中圖片的寬高// 豎著打印var imgWidth = 595.28var imgHeight = 592.28 / contentWidth * contentHeight// 橫著打印，寬和高要對調一下// var imgWidth = 841.89// var imgHeight = 841.89 / contentWidth * contentHeight// console.log('html頁面生成的canvas在pdf中圖片的高度：' + imgHeight)this.createPDFObject(canvas.toDataURL('image/jpeg', 1.0), leftHeight, pageHeight, imgWidth, imgHeight, position)})},createPDFObject: function (imgData, leftHeight, pageHeight, imgWidth, imgHeight, position) { // 導出FDF// let height = this.$refs.top.offsetHeight // 高度// var doc = new JsPDF('l', 'pt') // 橫著打印var doc = new JsPDF('', 'pt', 'a4') // 豎著打印console.log('未生成pdf的html頁面高度:' + leftHeight) // 未生成pdf的html頁面高度：1647console.log('一頁pdf顯示html頁面生成的canvas高度:' + pageHeight) // 一頁pdf顯示html頁面生成的canvas高度：if (leftHeight < pageHeight) { // 沒有超出一頁doc.addImage(imgData, 'jpeg', 5, 0, imgWidth, imgHeight) // x y width height} else {while (leftHeight > 0) {doc.addImage(imgData, 'jpeg', 5, position, imgWidth, imgHeight)leftHeight -= pageHeight// position -= 595.28 // 橫著打印position -= 841.89 // 豎著打印if (leftHeight > 0) {doc.addPage()}}}let year = this.chartYearlet sMonth = this.chartMonth[0]let eMonth = this.chartMonth[this.chartMonth.length - 1]doc.save(year + '年' + sMonth + '至' + eMonth + '用電走勢圖.pdf')},

總結

以上是生活随笔為你收集整理的echarts导出为pdf的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。