vue2 中把页面导出pdf

记录一下html2Canvas 到 HtmltoImage的坑

第一步：先安装插件

npm i html-to-image  or  npm install html-to-image

　　看到这里你应该知道我在说什么

第二步：打算导出的内容，要给个id标签

<template>
  <div id="pdfContent" class="dashboard-container">
      好多个div和标签
  </div>
<template>  

第三步：这里是实现的代码

别忘记导入：import * as htmlToImage from 'html-to-image'

 async downloadPdf(){
        const dom = document.getElementById('pdfContent')
        const dataUrl = await htmlToImage.toPng(dom, {
          pixelRatio: 2,
          backgroundColor: '#fff'
        })

        const pdf = new jsPDF({
          orientation: 'landscape',
          unit: 'pt',
          format: 'a4'
        })

        const img = new Image()

        img.src = dataUrl

        img.onload = () => {

          const pageWidth = pdf.internal.pageSize.getWidth()

          const pageHeight =
            (img.height * pageWidth) / img.width

          pdf.addImage(
            dataUrl,
            'PNG',
            0,
            0,
            pageWidth,
            pageHeight
          )

          pdf.save('dashboard.pdf')
        }
    }