标签：canvas vue 导出 width vue3.0 import var pdf

<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>

标签：canvas,vue,导出,width,vue3.0,import,var,pdf
来源： https://www.cnblogs.com/zjxzhj/p/16276110.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。