vue2中 html中div标签内荣下载导出pdf文件

<template>
  <div class="pdfWrap">
    <el-button type="primary" @click="exportPdf" :loading="loading"
      >下载合同</el-button
    >
    <div id="pdfDom">
      <div class="contentWrapper">
        <div class="title">这是文字内容</div>
        <br />
        <div class="title">这里你可以随意写内容</div>
        <div>注意 如果出现分页有遮挡问题 在有遮挡的位置设置个下边距即可，例如这里下方加了个p标签</div>
        <p class="pageSplit"></p>
      </div>
    </div>
  </div>
</template>
<script>
import html2canvas from "html2canvas";
import jsPDF from "jspdf";
export default {
  data() {
    return {
      loading: false,
    };
  },
  methods: {
    // 合同内容下载为pdf
    exportPdf() {
      this.loading = true;
      // target 为需要导出PDF的DOM元素
      const targetDom = document.querySelector("#pdfDom"); // 这个dom元素是要导出pdf的div容器
      var clonedNode = targetDom.cloneNode(true); //克隆元素解决滚动区域问题
      clonedNode.setAttribute(
        "style",
        `width: ${targetDom.width};height: ${targetDom.scrollHeight}px;`
      ); // 克隆元素的高度设置为可滚动的高度
      document.body.appendChild(clonedNode); //放到body后面
      html2canvas(clonedNode, {
        allowTaint: true,
        useCORS: true, // 如果说所生成的页面中带有跨域的图片，这个useCors需要设置为True 否则画布被污染不会显示
        backgroundColor: "#fff",
        scale: 2,
      }).then((canvas) => {
        const pdf = new jsPDF("p", "mm", "a4"); // A4纸，纵向
        let ctx = canvas.getContext("2d"),
          a4w = 170,
          a4h = 257, // A4大小，210mm x 297mm，保留左右20mm边距 上下20mm的边距，显示区域170x257
          imgHeight = Math.floor(a4h * (canvas.width / a4w)), //按A4显示比例换算一页图像的像素高度
          // 已生成pdf的html页面高度
          renderedHeight = 0;

        while (renderedHeight < canvas.height) {
          const page = document.createElement("canvas");
          const pageHeight = Math.min(
            imgHeight,
            canvas.height - renderedHeight
          ); //可能内容不足一页
          page.width = canvas.width;
          page.height = pageHeight;
          //用getImageData剪裁指定区域，并画到前面创建的canvas对象中
          page
            .getContext("2d")
            .putImageData(
              ctx.getImageData(0, renderedHeight, canvas.width, pageHeight),
              0,
              0
            );
          pdf.addImage(
            page.toDataURL("image/jpeg", 1.0),
            "JPEG",
            20,
            20,
            a4w,
            Math.min(a4h, (a4w * page.height) / page.width)
          ); // 添加图像到页面，保留左右20mm边距 上下30mm
          renderedHeight += imgHeight;
          if (renderedHeight < canvas.height) pdf.addPage(); //如果后面还有内容，添加一个空页
        }
        const today = new Date().toLocaleDateString().replace(/\//g, "-");
        // 本地下载
        pdf.save(`下载文件名称${today}.pdf`, pdf);
        document.body.removeChild(clonedNode); //最后记得移除截图时添加的
        this.loading = false;
      });
    },
  },
};
</script>
<style scoped lang="scss">
.pageSplit {
  margin-bottom: 20px;
  display: block;
}

div {
  font-weight: inherit;
}
#pdfDom {
  /* 高度设置为0,使下载内容不可见隐藏 */
  height: 0px;
  width: 650px;
  overflow: auto;
  text-align: left;
}
.contentWrapper {
  font-size: 16px;
  line-height: 2;
  .title {
    font-size: 22px;
    font-weight: 700;
    text-align: center;
  }
  .subTitle {
    font-size: 18px;
    font-weight: 700;
    margin: 15px 0px;
  }
  p {
    text-indent: 2em;
  }
  .footer{
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    & > div {
      width: 50%;
    }
  }
}
</style>

首先确保安装了html2canvas和jspdf