echarts导出为pdf

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.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页面高度：1647
  console.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 -= pageHeight
      position -= 595.28
      if (leftHeight > 0) {
        doc.addPage()
      }
    }
  }
  let year = this.chartYear
  let sMonth = this.chartMonth[0]
  let eMonth = this.chartMonth[this.chartMonth.length - 1]
  doc.save(year + '年' + sMonth + '至' + eMonth + '用电走势图.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 = 5

        // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高

        // 竖着打印
        var imgWidth = 595.28
        var 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页面高度：1647
      console.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.chartYear
      let sMonth = this.chartMonth[0]
      let eMonth = this.chartMonth[this.chartMonth.length - 1]
      doc.save(year + '年' + sMonth + '至' + eMonth + '用电走势图.pdf')
    },