当前位置: 首页 > news >正文

如何优雅使用 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主要没啥,主要是动态样式调整起来确实费事,终于能体会到前端大佬的不易!觉得好玩的可以去试试!

相关文章:

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

使用 vue-html2pdf 插件 业务背景&#xff0c;老板想要一份能征服客户的pdf报表&#xff0c;传统的pdf要手撕&#xff0c;企业中确实有点耗费时间&#xff0c;于是github上面看到开源的这个插件就…废话不多说&#xff0c;直接上教程 1.使用下面命令安装 vue-html2pdf npm i…...

C语言第十六集(前)

1.关于那个整形存储入char的 是先取好补码,再截断 例: 2.%u是以十进制的形式打印无符号整数 3.注意(背):存储的char类型变量的补码为10000000的直接解析为-128 4.signed char 类型的变量取值范围是-128~127 5.unsigned char 类型的变量取值范围是0~255 6.有符号类型的变量…...

Makefile语法

一、Makefile规则格式 Makefile 里面是由一系列的规则组成的&#xff0c;这些规则格式如下&#xff1a; 目标…... : 依赖文件集合…… 命令 1 命令 2 ……参考上一节gcc编译器与Makefile入门参考这条规则 1 main: main.o input.o calcu.o2 gcc -o main main.o input.o c…...

用户案例|Milvus 助力 Credal.AI 实现 GenAI 安全与可控

AIGC 时代&#xff0c;企业流程中是否整合人工智能&#xff08;AI&#xff09;对于的企业竞争力至关重要。然而&#xff0c;随着 AI 不断发展演进&#xff0c;企业也在此过程中面临数据安全管理、访问权限、数据隐私等方面的挑战。 为了更好地解决上述问题&#xff0c;Credal.A…...

MySQL三 | 多表查询

目录 多表查询 内连接 隐式内连接 显示内连接 外连接 左外连接 右外连接 自连接 子查询 多表查询 笛卡尔积:集合A和集合B的所有组合情况 A * B 在多表查询时应消除无效的笛卡尔积 内连接 查询的是两张表交集的地方 隐式内连接 SELECT 字段列表 FROM 表1&#xf…...

PostgreSQL 索引介绍和使用事项

索引内容 关键点 索引是一种数据结构&#xff0c;用于加快数据库查询的速度。它类似于书籍的目录&#xff0c;可以快速定位到特定的数据页。 PG数据库支持多种类型的索引&#xff0c;包括B树索引、哈希索引、GiST索引、SP-GiST索引和GIN索引等。 B树索引是PG数据库中最常用的…...

MySQL注入攻防详解:保障数据库安全的最佳实践

引言 MySQL作为广泛使用的关系型数据库&#xff0c;其安全性一直备受关注。然而&#xff0c;MySQL注入攻击是一种常见而危险的安全漏洞&#xff0c;攻击者通过巧妙构造的输入&#xff0c;可以绕过应用程序的验证&#xff0c;执行恶意的SQL语句&#xff0c;导致数据泄露、篡改或…...

ubuntu or MacOS 源码安装 fmt fmtlib

1&#xff0c;前情 提醒这个源代码需要从release中下载 打包好的&#xff0c;而直接用git clone下载不了&#xff0c;可能github上的这个git clone的链接仅仅是给fmt lib的开发者使用的吧&#xff1b; 下载fmtlib的release源代码u下载fmtlib的release源代码 2&#xff0c;解压编…...

vue watch

vue 使用watch监听props的一些小建议 当在watch里面给data赋值&#xff0c;请使用深拷贝。 <template><div class"container"><div class"left"><div class"button_group"><!-- <button click"rand…...

异常检测 | 基于孤立森林(Isolation Forest)的数据异常数据检测(结合t-SNE降维可视化)

异常检测 | MATLAB实现基于孤立森林的数据异常检测 目录 异常检测 | MATLAB实现基于孤立森林的数据异常检测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 Matlab实现基于孤立森林(Isolation Forest)的数据异常数据检测可视化&#xff08;完整源码和数据) 基于孤立森林(…...

【深度学习】一维数组的聚类

在学习聚类算法的过程中&#xff0c;学习到的聚类算法大部分都是针对n维的&#xff0c;针对一维数据的聚类方式较少&#xff0c;今天就来学习下如何给一维的数据进行聚类。 方案一&#xff1a;采用K-Means对一维数据聚类 Python代码如下&#xff1a; from sklearn.cluster im…...

100多种视频转场素材|专业胶片,抖动,光效电影转场特效PR效果预设

100多种 Premiere Pro 效果预设&#xff0c;包含&#xff1a;“胶片框架”、“胶片烧录”、“彩色LUT”、“相机抖动”、“电影Vignette”和“胶片颗粒”。非常适合制作复古风格的视频&#xff0c;添加独特的色彩。包括视频教程。 来自PR模板网&#xff1a;https://prmuban.com…...

http与apache

目录 1.http相关概念 2.http请求的完整过程 3.访问浏览器背后的原理过程 4.动态页面与静态页面区别 静态页面&#xff1a; 动态页面&#xff1a; 5.http协议版本 6.http请求方法 7.HTTP协议报文格式 8.http响应状态码 1xx&#xff1a;提示信息 2xx&#xff1a;成功…...

一、服务器准备

本案例使用VMware Workstation Pro虚拟机创建虚拟服务器来搭建Linux服务器集群&#xff0c;所用软件及版本如下&#xff1a; Centos7.7-64bit 1、三台虚拟机创建 第一种方式&#xff1a;通过iso镜像文件来进行安装(不推荐) 第二种方式&#xff1a;直接复制安装好的虚拟机文…...

区块链optimism主网节点搭建

文章目录 官方参考资料编译环境搭建编译Optimism Monorepo编译op-geth 执行下载数据快照生成op-geth和op-node通信密钥op-geth执行脚本 op-node执行脚本 启动日志op-gethop-node 本文是按照官方参考资料基于源码的方式成功搭建optimism主网节点。 官方参考资料 源码&#xff1…...

Bounding boxes augmentation for object detection

Different annotations formats Bounding boxes are rectangles that mark objects on an image. There are multiple formats of bounding boxes annotations. Each format uses its specific representation of bouning boxes coordinates 每种格式都使用其特定的边界框坐标…...

【计算机网络学习之路】HTTP请求

目录 前言 HTTP请求报文格式 一. 请求行 HTTP请求方法 GET和POST的区别 URL 二. 请求头 常见的Header 常见的额请求体数据类型 三. 请求体 结束语 前言 HTTP是应用层的一个协议。实际我们访问一个网页&#xff0c;都会像该网页的服务器发送HTTP请求&#xff0c;服务…...

java之字符串常用处理函数

在Java中&#xff0c;你可以使用Collections.sort()方法对字符串中的字符进行排序。这个方法会按照字母顺序对字符进行排序。 以下是一个例子&#xff1a; import java.util.Arrays; import java.util.Collections; public class Main { public static void main(…...

【XILINX】ERROR:Place:1136 - This design contains a global buffer instance

记录一个ISE软件使用过程中遇到的问题及解决方案。 芯片&#xff1a;spartan6 问题 ERROR:Place:1136 - This design contains a global buffer instance, , driving the net,>, that is driving the following (first 30) non-clock load pins. This is not a recommended…...

【文件上传系列】No.0 利用 FormData 实现文件上传、监控网路速度和上传进度(原生前端,Koa 后端)

利用 FormData 实现文件上传 基础功能&#xff1a;上传文件 演示如下&#xff1a; 概括流程&#xff1a; 前端&#xff1a;把文件数据获取并 append 到 FormData 对象中后端&#xff1a;通过 ctx.request.files 对象拿到二进制数据&#xff0c;获得 node 暂存的文件路径 前端…...

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

线程同步:确保多线程程序的安全与高效!

全文目录&#xff1a; 开篇语前序前言第一部分&#xff1a;线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分&#xff1a;synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

企业如何增强终端安全?

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

return this;返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

云原生安全实战:API网关Kong的鉴权与限流详解

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关&#xff08;API Gateway&#xff09; API网关是微服务架构中的核心组件&#xff0c;负责统一管理所有API的流量入口。它像一座…...