vue3.0pdf导出

<template>
  <div class="home-top">
    <button @click="getPdf('pdf')">导出(pdf)</button>
  </div>
  <div class="home-wrap" ref="exportPdf">
    <PageOne />
    <PageTwo />
    <PageTree />
    <PageFour />
    <PageFive />
    <PageSix />
    <PageSeven />
    <PageEight />
    <PageNine />
    <PageTen />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import PageOne from './PageOne.vue'
import PageTwo from './PageTwo.vue'
import PageTree from './PageThree.vue'
import PageFour from './PageFour.vue'
import PageFive from './PageFives.vue'
import PageSix from './PageSix.vue'
import PageSeven from './PageSeven.vue'
import PageEight from './PageEight.vue'
import PageNine from './PageNine.vue'
import PageTen from './PageTen.vue'
import JsPDF from 'jspdf'
import html2Canvas from 'html2canvas'
import { useReportStore } from "@/store";
export default defineComponent({
  components: {
    PageOne,
    PageTwo,
    PageTree,
    PageFour,
    PageFive,
    PageSix,
    PageSeven,
    PageEight,
    PageNine,
    PageTen
  },
  setup() {
    const store = useReportStore()
    const exportPdf = ref()
    function getPdf(name: string) {
      const title = name || 'index'


      html2Canvas((exportPdf.value), {
        allowTaint: true,
        scale: 4,
        useCORS: true,
      }).then(function (canvas: any) {
        // const HTML_Width = canvas.width;
        // const HTML_Height = canvas.height;
        // const top_left_margin = 15;
        // const totalPDFPages = 10
        // const PDF_Width = HTML_Width + (top_left_margin * 2);
        // const PDF_Height = HTML_Height / totalPDFPages;
        // var canvas_image_width = HTML_Width;
        // var canvas_image_height = HTML_Height;

        // var imgData = canvas.toDataURL("image/jpeg", 1.0);
        // var pdf = new JsPDF('p', 'pt', 'a4');
        // pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, canvas_image_width, canvas_image_height);


        // for (var i = 1; i < totalPDFPages; i++) {
        //   console.log(totalPDFPages);
          
        //   pdf.addPage([PDF_Width, PDF_Height]);
        //   pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height * i) + top_left_margin * 3, canvas_image_width, canvas_image_height);
        // }
            var contentWidth = canvas.width;
        var contentHeight = canvas.height;
        //一页pdf显示html页面生成的canvas高度;
        var pageHeight = contentWidth / 592.28 * 841.89;
        //未生成pdf的html页面高度
        var leftHeight = contentHeight;
        //页面偏移
        var position = 0;
        //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        var imgWidth = 595.28;
        var imgHeight = 595.28 / contentWidth * contentHeight;
        var pageData = canvas.toDataURL('image/jpeg', 1.0);
        var pdf = new JsPDF('p', 'pt', 'a4');
        //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
        //当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight < pageHeight) {
            //在pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示；
            pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
            // pdf.addImage(pageData, 'JPEG', 20, 40, 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')

      }
      )
    }
    onMounted(async () => {
      await store.refetch()
    })
    return { exportPdf, getPdf, store }
  }
})
</script>

<style lang="less" scoped>
@widthpdf: 794px;

::-webkit-scrollbar {
  width: 0 !important;
}

.home-top {
  margin: auto;
 padding: 15px 0;
  width: @widthpdf;
  height: 50px;
  text-align: right;
  button{
    border-radius:5px ;
    color: white;
    background: #176CEB;
    font-size: 16px;
    border: none;
  }
  button:hover{
       background: rgba(23,108,235, 0.8);
    }
}

.home-wrap {
  margin: auto;
  overflow: auto;
  width: @widthpdf;
  height: 100%;
}

@media screen and (max-width: 794px) {

  .home-wrap,
  .home-top {
    width: 100%;
  }
}
</style>