如何优雅使用 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>
//引入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-layouttrue/false是否显示要转为 PDF 的元素调式要转出的元素的布局时 true,平时 false
float-layouttrue/false如果道具设置为 false 道具 show-layout 将被覆盖。布局不会浮动,并且布局将始终显示。我一直使用的 true,因为做的时候做了两份,一个是在后台显示的,一个是导出为 PDF 的,布局不一样
enable-downloadtrue/false是否弹出转 PDF 后的预览模板,为 true 时调用上面的下载方法默认弹出预览模板调试时开启,完工后关闭
preview-modaltrue/false是否弹出转 PDF 后的预览模板,为 true 时调用上面的下载方法默认弹出预览模板调试时开启,完工后关闭
paginate-elements-by-height任何数字输入的数字将用于对元素进行分页,数字仅以 px 为单位。官方默认 1400,没动过
filename任何字符串导出后的默认 PDF 文件名自定义
pdf-quality0 - 2(可以有小数)2 是最高质量,0.1 是最低质量,0 将使 PDF 消失。官方虽然说是 0~2,但是我调 5 也是更高清了
manual-paginationtrue/false为 true 时不会自动对元素进行分页。为 false 时分页将依赖于具有“html2pdf__page-break”类的元素来知道在哪里分页,也就是下面所写的我一直使用的 false,看需求
pdf-formata0, a1, a2, a3, a4, letter, legal, a5, a6, a7, a8, a9, a10这是 PDF 格式(纸张尺寸)一般都用的a4,所以 a4
pdf-orientationportrait, landscapePDF 方向,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主要没啥,主要是动态样式调整起来确实费事,终于能体会到前端大佬的不易!觉得好玩的可以去试试!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/226967.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

PHPstudy小皮的数据库打开失败问题解决

如果你的MYSQL服务启动后停止&#xff0c;多次重启依然无法解决的情况下&#xff0c;大概率是和本地mysql冲突了 但是&#xff0c;千万不要卸载掉本地mysql&#xff0c;只需要在服务中停止本地mysql即可 将此服务关闭&#xff0c;小皮的mysql即可使用

AtCoder ABC周赛2023 11/4 (Sat) D题题解

目录 原题截图&#xff1a; 题目大意&#xff1a; 主要思路&#xff1a; 注意事项&#xff08;很多人再这个地方掉坑&#xff09;&#xff1a; 代码&#xff1a; 原题截图&#xff1a; 题目大意&#xff1a; 给你两个数组&#xff08;A和B)长度都为n&#xff0c;然你求出一…

从零开发短视频电商 在AWS SageMaker已创建的模型列表中进行部署

1.导航到 SageMaker 控制台。 2.在 SageMaker 控制台的左侧导航栏中&#xff0c;选择 “模型” 选项。 3.在模型列表中&#xff0c;找到您要部署的模型。选择该模型。 4.点击 “创建端点” 选项或者点击 “创建端点配置” 选项都可以进行部署。 选择创建端点进去后还是会进行…

Axure原型组件库,数据可视化动态元件库(超详细Axure9可视化素材)

专门针对Axure制作的动态图表元件库&#xff0c;帮助产品经理更高效地制作高保真图表原型&#xff0c;是产品经理必备元件工具。现分享完整的组件库&#xff0c;大家一起学习。 每一个动态组件在原型文件中都配有详细介绍&#xff0c;文末可下载完整原型组件包~ 1. 本组件库的…

Appium获取toast方法封装

一、前置说明 toast消失的很快&#xff0c;并且通过uiautomatorviewer也不能获取到它的定位信息&#xff0c;如下图&#xff1a; 二、操作步骤 toast的class name值为android.widget.Toast&#xff0c;虽然toast消失的很快&#xff0c;但是它终究是在Dom结构中出现过&…

如何在Spring Boot中集成RabbitMQ

如何在Spring Boot中集成RabbitMQ 在现代微服务架构中&#xff0c;消息队列&#xff08;如RabbitMQ&#xff09;扮演了关键的角色&#xff0c;它不仅能够提供高效的消息传递机制&#xff0c;还能解耦服务间的通信。本文将介绍如何在Spring Boot项目中集成RabbitMQ&#xff0c;…

华为配置Smart Link负载分担示例

Smart Link基本概念 Smart Link通过两个端口相互配合工作来实现功能。这样的一对端口组成了一个Smart Link组。为了区别一个Smart Link组中的两个端口&#xff0c;我们将其中的一个叫做主端口&#xff0c;另一个叫做从端口。同时我们利用Flush报文、Smart Link实例和控制VLAN等…

Windows故障排除 – 连接WiFi却无法上网

Windows故障排除 – 连接WiFi却无法上网 Windows Troubleshooting - Connecting WiFi but PC Cannot Browse Internet By JacksonML 有个同学买了一台崭新的D品牌游戏本&#xff0c;i7处理器&#xff0c;英伟达RTX系列独立显卡及15寸液晶显示器&#xff0c;可谓功能强大。但是…

0011Java程序设计-ssm药店管理系统微信小程序

文章目录 摘 要目 录系统实现5.2服务端开发环境 编程技术交流、源码分享、模板分享、网课分享 企鹅&#x1f427;裙&#xff1a;776871563 摘 要 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机…

设备状态监测好帮手:无线温振传感器的应用

在现代工业生产中&#xff0c;设备状态监测对于确保设备的正常运行和预防故障至关重要。而无线温振传感器的出现为设备状态监测带来了全新的解决方案。本文将介绍无线温振传感器的工作原理和优势&#xff0c;并探讨其在设备状态监测中的广泛应用。 无线温振传感器是一种能够实时…

电脑系统重装Win10专业版操作教程

用户想给自己的电脑重新安装上Win10专业版系统&#xff0c;但不知道具体的重装步骤。接下来小编将详细介绍Win10系统重新安装的步骤方法&#xff0c;帮助更多的用户完成Win10专业版的重装&#xff0c;重装后用户即可体验到Win10专业版系统带来的丰富功能。 准备工作 1. 一台正常…

论文阅读:LSeg: LANGUAGE-DRIVEN SEMANTIC SEGMENTATION

可以直接bryanyzhu的讲解&#xff1a;CLIP 改进工作串讲&#xff08;上&#xff09;【论文精读42】_哔哩哔哩_bilibili 这里是详细的翻译工作 原文链接 https://arxiv.org/pdf/2201.03546.pdf ICLR 2022 0、ABSTRACT 我们提出了一种新的语言驱动的语义图像分割模型LSeg。…

dockerfile简单实践部署(jenkins,wordpress)

实现部署jenkins的流程 配置java环境&#xff0c;导入jenkins包&#xff0c;运行命令 java -jar jenkins包&#xff0c;这里为了减少进入jenkins的web端安装插件&#xff0c;将插件提前部署到容器内。 制作dockerfile 创建镜像所在的文件夹和Dockerfile文件 mkdir /test cd …

【Flink系列六】Flink里面的状态一致性

状态一致性 有状态的流处理&#xff0c;内部每个算子任务都可以有自己的状态&#xff0c;对于流处理器内部来说&#xff0c;所谓的状态一致性&#xff0c;其实就是我们所说的计算结果要保证准确。一条数据不应该丢失&#xff0c;也不应该重复计算。再遇到有故障时可以恢复状态…

P30 C++智能指针

前言 &#x1f3ac; 个人主页&#xff1a;ChenPi &#x1f43b;推荐专栏1: 《C_ChenPi的博客-CSDN博客》✨✨✨ &#x1f525; 推荐专栏2: 《Linux C应用编程&#xff08;概念类&#xff09;_ChenPi的博客-CSDN博客》✨✨✨ &#x1f6f8;推荐专栏3: ​​​​​​《 链表_Chen…

在Spring Cloud使用Hystrix核心组件,并注册到Eureka注册中心去

其实吧&#xff0c;写Spring Cloud系列&#xff0c;我有时候觉得也挺难受的&#xff0c;因为Spring Cloud的微服务启动都需要一个一个来&#xff0c;并且在IDea中也需要占用比较大的内存&#xff0c;并且我本来可以一篇写完5大核心组件的&#xff0c;但是我却分了三篇&#xff…

QT 重定向qdebug输出到自绘界面

因为在嵌入式中调试qt需要查看输出信息,特意写了一个类用户便捷查看qdebug信息 界面如下: 提供了开始,停止,保存,清空,退出功能,具体代码下文给出 文件如下 #ifndef QDEBUGREDIRECT_H #define QDEBUGREDIRECT_H /**qdebug 重定向类 定向到界面控件*李吉磊 2023.12.7* */#in…

【dig命令查询方法】

dig&#xff08;Domain Information Groper&#xff09;是一个用于查询DNS&#xff08;域名系统&#xff09;的命令行工具&#xff0c;它可以帮助您获取关于域名的各种信息&#xff0c;如IP地址、MX记录、NS记录等。下面是dig的详细使用教程。 基本语法&#xff1a; dig [ser…

【数据库】树形数据组织架构下的封锁并发控制,B树索引并发访问控制,树协议原理及案例分析

数据库并发访问树协议 ​专栏内容&#xff1a; 手写数据库toadb 本专栏主要介绍如何从零开发&#xff0c;开发的步骤&#xff0c;以及开发过程中的涉及的原理&#xff0c;遇到的问题等&#xff0c;让大家能跟上并且可以一起开发&#xff0c;让每个需要的人成为参与者。 本专栏会…

docker基本管理和概念

1、定义&#xff1a;一个开源的应用容器引擎&#xff0c;基于go语言开发&#xff0c;运行在liunx系统中的开源的、轻量级的“虚拟机” docker的容器技术可以在一台主机上轻松的为任何应用创建一个轻量级的、可移植的、自给自足的容器 docker的宿主机是liunx系统&#xff0c;集…