使用 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>
//引入vue-html2pdf
import VueHtml2pdf from "vue-html2pdf";
export default {
components: {
//注册组件
VueHtml2pdf
},
methods: {
//声明下载为PDF的方法
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: #1890FF;
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.属性整理一下
| 属性 | 值 | 描述 | 本人建议 |
|---|---|---|---|
| show-layout | true/false | 是否显示要转为 PDF 的元素 | 调式要转出的元素的布局时 true，平时 false |
| float-layout | true/false | 如果道具设置为 false 道具 show-layout 将被覆盖。布局不会浮动，并且布局将始终显示。 | 我一直使用的 true，因为做的时候做了两份，一个是在后台显示的，一个是导出为 PDF 的，布局不一样 |
| enable-download | true/false | 是否弹出转 PDF 后的预览模板，为 true 时调用上面的下载方法默认弹出预览模板 | 调试时开启，完工后关闭 |
| preview-modal | true/false | 是否弹出转 PDF 后的预览模板，为 true 时调用上面的下载方法默认弹出预览模板 | 调试时开启，完工后关闭 |
| paginate-elements-by-height | 任何数字 | 输入的数字将用于对元素进行分页，数字仅以 px 为单位。 | 官方默认 1400，没动过 |
| filename | 任何字符串 | 导出后的默认 PDF 文件名 | 自定义 |
| pdf-quality | 0 - 2（可以有小数） | 2 是最高质量，0.1 是最低质量，0 将使 PDF 消失。 | 官方虽然说是 0~2，但是我调 5 也是更高清了 |
| manual-pagination | true/false | 为 true 时不会自动对元素进行分页。为 false 时分页将依赖于具有“html2pdf__page-break”类的元素来知道在哪里分页，也就是下面所写的 | 我一直使用的 false，看需求 |
| pdf-format | a0, a1, a2, a3, a4, letter, legal, a5, a6, a7, a8, a9, a10 | 这是 PDF 格式（纸张尺寸） | 一般都用的a4，所以 a4 |
| pdf-orientation | portrait, landscape | PDF 方向，landscape 是横向，portrait 是纵向 | 看需求 |
| pdf-content-width | 任何 css 尺寸（例如“800px”、“65vw”、“70%”） | PDF 内容宽度 | 800px 应该是 a4 最大的尺寸，具体边距我使用的 padding |
4.说到分页这个，组件中有自动分页，但是会影响你的页眉页脚，如果不想自动分页的话，直接在元素后面加上下面代码即可分页
<div class="html2pdf__page-break"></div>
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主要没啥，主要是动态样式调整起来确实费事，终于能体会到前端大佬的不易！觉得好玩的可以去试试！
