如何优雅使用 vue-html2pdf 插件生成pdf报表

使用 vue-html2pdf 插件

业务背景，老板想要一份能征服客户的 pdf 报表，传统的 pdf 要手撕，企业中确实有点耗费时间，于是 github 上面看到开源的这个插件就…废话不多说，直接上教程

1. 使用下面命令安装 vue-html2pdf

npm i vue-html2pdf

2. 在 vue 组件下使用

template>
   div>
       !-- 具体说明看文档 -->
       vue-html2pdf
   	      :show-layout="false"
   	      :float-layout="true"
   	      :enable-download="true"
   	      :preview-modal="true"
   	      :paginate-elements-by-height="1400"
   	      :filename="fileName"
   	      :pdf-quality="2"
   	      :manual-pagination="false"
   	      pdf-format="a4"
   	      pdf-orientation="portrait"
   	      pdf-content-width="800px"
   	      @progress="onProgress($event)"
   	      @hasStartedGeneration="hasStartedGeneration()"
   	      @rendered="hasGenerated($event)"
   	      ref="html2Pdf"
       >
           section slot="pdf-content">
               !-- 这里写要生成 PDF 的元素 -->
                           section class="pdf-item">
                               span>
                                   div class="wrapper">
                                       div class="header">
                                       div class="main">
                                       div class="footer">
                               /span>
                           /section>
                           div class="html2pdf__page-break"/> 
                           ...有几页就再写一个 pdf-item 就好了
           /section>
       /vue-html2pdf>
   /div>
/template>

import VueHtml2pdf from "vue-html2pdf";
export default {
   components: {
       
       VueHtml2pdf
   },
   methods: {
       
       generateReport () {
           this.$refs.html2Pdf.generatePdf()
       }
   },
}

另外我加了进度条，看到有这个加载的属性，就顺便封装了个进度条，看起来更优雅一点。默认值我设置的 1，这个看自己调整。废话不说，直接上代码（Progress.vue），在项目中直接引用即可

template>
  div class="m-progress" :style="`width:${width}px;`">
    div class="m-progress-outer">
      div class="m-progress-inner">
        div :class="['u-progress-bg', {'u-success-bg': progress>= 100}]" :style="`width: ${progress>= 100 ? 100:progress}%; height: ${strokeWidth}px;`">/div>
      /div>
    /div>
    template v-if="showInfo">/template>
    svg class="u-success" v-if="progress>=100" viewBox="64 64 896 896" data-icon="check-circle" aria-hidden="true" focusable="false">
      path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 0 1-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z">/path>/svg>
    p class="u-progress-text" v-else>{{ progress>=100 ? 100:progress }}%/p>
  /div>
/template>
script>
export default {
  name: 'Progress',
  props: {
    width: { 
      type: Number,
      default: 600
    },
    progress: { 
      type: Number,
      default: 1
    },
    strokeWidth: { 
      type: Number,
      default: 8
    },
    showInfo: { 
      type: Boolean,
      default: true
    }
  }
}
/script>
style lang="scss" scoped="scoped">
.m-progress {
  height: 24px;
  margin: 0 auto;
  display: flex;
  .m-progress-outer {
    width: 100%;
    .m-progress-inner {
      display: inline-block;
      width: 100%;
      background: #f5f5f5;
      border-radius: 100px;
      .u-progress-bg {
        
        background: linear-gradient(to right, rgb(16, 142, 233), rgb(135, 208, 104));
        border-radius: 100px;
        transition: all .3s cubic-bezier(.08,.82,.17,1);
      }
      .u-success-bg {
        background: #52C41A;
      }
    }
  }
  .u-success {
    width: 16px;
    height: 16px;
    fill: #52C41A;
    margin-left: 8px;
    margin-top: 4px;
  }
  .u-progress-text {
    font-size: 16px;
    line-height: 24px;
    margin-left: 8px;
    color: rgba(0,0,0,.45);
  }
}
/style>

3. 属性整理一下

4. 说到分页这个，组件中有自动分页，但是会影响你的页眉页脚，如果不想自动分页的话，直接在元素后面加上下面代码即可分页

5. 个人使用感想：使用这个插件后，渲染的话还可以的直接和 vue 能搭配，更能和 E -Charts 搭配使用，确实方便，优点：节约开发成本，提高开发效率，拿来即用。缺点：不支持超链接功能，有时候业务场景需要在 pdf 中超链接，如果有这个功能的话，那就很全了。当然，也不是说这个组件不好，使用起来还是比较丝滑的。主要是看业务场景吧。
6. 项目中遇到比较棘手的问题，就是动态排版展示，因为本人是后端，所以跟专业前端大佬不能比，就想记录一下

本身是想写死多少个平台，然后使用 v -if 或者 v -show 来展示，但是代码量有点冗余不说，还没有排版好，就想到了 v -for。

					div class="b1" style="width: 100%; display: flex; flex-wrap: wrap;">
                      div v-for="(platform, index) in platforms"
                           :key="index" v-if="platform.count > 0"
                           class="bordered3"
                           style="flex-basis: calc(50% - 10px); margin-right: 10px; margin-bottom: 10px;">
                        div class="r3">
                          p class="p1">{{ platform.instituteType }}处理违规数量/p>
                          span class="p2">{{ platform.count }}/span>
                        /div>
                        div class="r4">
                          img class="tb"
                               :src="getPlatformImage(platform.instituteType)"
                               alt="Sample Image">
                        /div>
                      /div>
                    /div>

v-for 主要没啥，主要是动态样式调整起来确实费事，终于能体会到前端大佬的不易！觉得好玩的可以去试试！