vue 批量导出pdf 压缩包 zip

vue 批量导出pdf 压缩包 zip

使用插件
html2canvas
jspdf
jszip (百度ai搜出来的是zip-js 这个没法安装)
file-saver

思路:
1.使用 html2canvas+jspdf 将页面转图片转pdf(这个怎么转的可以网上搜下很多)
2.利用jszip+file-saver 结合promise.all 写入压缩包中

1.准备页面

<template><div><div :id="'id'+1">11111</div><div :id="'id'+2">2222</div><div :id="'id'+3">33333</div><div :id="'id'+4">44444</div></div>
</template>
<style lang="scss" scoped>
#id1{background: blue;color: #fff;line-height: 40px;font-size: 30px
}
#id3{background: rgb(0, 255, 128);color: #fff;line-height: 40px;font-size: 30px
}
#id2{background: rgb(255, 136, 0);color: #fff;line-height: 40px;font-size: 30px
}
#id4{background: rgb(255, 0, 106);color: #fff;line-height: 40px;font-size: 30px;
}
</style>

在这里插入图片描述

2.写js

<script>
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
import { saveAs } from 'file-saver'
import Jszip from 'jszip'export default {// 提交handleSubmit() {// 创建一个zip实例const zip = new Jszip()//创建一个promises 容器const promises = []//生成pdf 得到一个含有pdf内容 跟 名称的promiselet p1 = this.generatePDF('id1', '填报记录1')let p2 = this.generatePDF('id2', '填报记录2')promises.push(p1)promises.push(p2)//批量执行promisePromise.all(promises).then(async(pdfs) => {for (let i = 0; i < pdfs.length; i++) {const { PDF, name } = pdfs[i]// 如果只是导出一个pdf,则导出pdf格式if (pdfs.length === 1) {//名称可以自己取PDF.save(`${name}-${new Date().getTime()}.pdf`)// this.allLoading = false// this.loadingText = '正在请求数据'} else {// 否则添加到压缩包里面await zip.file(`${name}-${new Date().getTime()}.pdf`, PDF.output('blob'))}}if (pdfs.length > 1) {zip.generateAsync({ type: 'blob' }).then(content => {//下载 zipsaveAs(content, 'xxxxxxx.zip')})}}).finally(() => {// this.allLoading = false//  this.loadingText = '正在请求数据'})console.log(promises)},//将html转成 pdf 最后一步的时候别使用pdf.save。generatePDF(content, filename) {return new Promise((resolve, reject) => {const cloneDom = document.getElementById(content).cloneNode(true)document.getElementsByTagName('body')[0].appendChild(cloneDom)html2Canvas(cloneDom,{ allowTaint: false }).then((canvas) => {let contentWidth = canvas.widthlet contentHeight = canvas.height// a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高let pageHeight = contentWidth / 592.28 * 841.89let leftHeight = contentHeightlet position = 0let imgWidth = 595.28let imgHeight = 592.28 / contentWidth * contentHeightlet pageData = canvas.toDataURL('image/jpeg', 1.0)let PDF = new JsPDF('', 'pt', 'a4')if (leftHeight < pageHeight) {PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)} else {while (leftHeight > 0) {PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)leftHeight -= pageHeightposition -= 841.89if (leftHeight > 0) {PDF.addPage()}}}// const blob = PDF.output('blob')// console.log(blob)//将pdf内容 跟名称 resolve出去resolve({ PDF, name: filename })// PDF.save(`关联OA申请单(${timeToTime(new Date(), false)}).pdf`)document.getElementsByTagName('body')[0].removeChild(cloneDom)})})}}
}
</script>

下载成功,代码可以直接用
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【免费分享】易上手的STM32多核心开发板资料包一网打尽,教程+课件+视频+项目+源码

想要深入学习STM32开发吗&#xff1f;现在机会来了&#xff01;我们为初学者们准备了一份全面的资料包&#xff0c;包括原理图、教程、课件、视频、项目、源码等&#xff0c;所有资料全部免费领取&#xff0c;课程视频可试看&#xff08;购买后看完整版&#xff09;&#xff0c…

PostgreSQL技术内幕7:PostgreSQL查询编译

文章目录 0.简介1.整体过程2.查询分析2.1 Lex2.2 Yacc2.3 PG词法分析和语法分析介绍2.4 PG语义分析 4.查询优化4.1 预处理4.1.1 提升子链接和子查询4.1.2 预处理表达式4.1.3 处理HAVING子句 4.2 改进查询树4.2.1 路径生成4.2.2 代价估计 4.3 计划生成 0.简介 一次完整的SQL执行…

STM32基础篇:PWR

PWR简介 PWR&#xff08;Power Control&#xff09;&#xff0c;为电源控制模块&#xff0c;负责管理STM32内部的电源供电部分&#xff0c;可以实现可编程电压监测器和低功耗模式的功能。 1、可编程电压监测器 简称PVD&#xff0c;可以监控VDD电源电压。当VDD下降到PVD阀值以…

Spring Boot 整合 Sentinel 实现流量控制

在微服务架构中&#xff0c;流量控制是保障系统稳定性和高可用性的关键技术之一。阿里巴巴开源的 Sentinel 是一款面向分布式系统的流量防护组件&#xff0c;旨在从流量控制、熔断降级、系统负载保护等多个维度保障服务的稳定性。本文将详细介绍如何在 Spring Boot 项目中整合 …

挑战黑神话, 不升级武器通关

第一关随便打打 第二关,提前杀了疯虎,加攻击, 并且自己的点也早点点上攻击力,推荐还是拿了定风珠打, 否则沙尘暴不好处理,需要多打几个回合.玲珑内丹可以去第一关刷小怪 第三关.早点去拿禁 第四关.躲好蝎子的甩尾之后上去劈棍xyy即可. 第五关. 打了这个红孩儿很久,可以考虑跑蓄…

爬虫入门学习

流程 获取网页内容 HTTP请求 Python Requests解析网页内容 HTML网页结构 Python Beautiful Soup储存或分析数据 HTTP (Hypertext Transfer Protocol) 客户端和服务器之间的请求-响应协议 Get方法&#xff1a;获得数据 POST方法&#xff1a;创建数据 HTTP请求 请求行 方法类型…

CPP八股文-模板类.内存管理,指针

为什么模板类的定义需要放在头文件中&#xff1f; 无论是类模板还是函数模板&#xff0c;都是一个蓝图&#xff0c;本身不是一个类或函数&#xff0c;编译器用模板产生指定的类或函数的特定类型版本。产生模板的特定类型实例的过程称为模板的实例化。所以一般将模板类放在头文…

rv1126-rv1109-mkcramfs-mkfs.cramfs-打包文件系统

事情是这样的: 定制了文件系统打包功能;然后我是根据这个指令 fakeroot mkfs.cramfs rootfs_glibc_rv1126/ rootfs.img mkfs.cramfs rootfs_glibc_rv1126/ rootfs.img 起因就是这个fakeroot; 不加的话打出来的rootfs.img是没有用户权限的 然后我根据fakeroot mkfs.cramfs ro…

vue仓库的使用

Vue仓库通常指的是使用Vue CLI创建的项目仓库&#xff0c;它包含了项目的所有源代码、配置文件以及依赖项。以下是如何使用Vue仓库的一些基本步骤和最佳实践&#xff1a; 创建Vue项目 首先&#xff0c;你需要安装Vue CLI&#xff0c;然后使用它来创建一个新的Vue项目。 npm i…

AcWing算法基础课-785快速排序-Java题解

大家好&#xff0c;我是何未来&#xff0c;本篇文章给大家讲解《AcWing算法基础课》785 题——快速排序。这篇文章介绍了使用快速排序算法对整数数列进行排序的方法&#xff0c;包括选择基准元素、分区操作和递归排序子数组。通过详细的步骤和示例&#xff0c;解释了快速排序的…

MySQL之数据库基础

目录 一、数据库 1、基本概念 2、常见的数据库 3、MySQL数据库 连接MySQL服务器 数据逻辑存储 二、数据库和表的本质 三、SQL语句 四、服务器&#xff0c;数据库&#xff0c;表的关系 五、存储引擎 查看存储引擎 一、数据库 1、基本概念 一般来说&#xff0c;数据库…

es映射配置(_mapping)

文章目录 1、创建映射字段2、查看映射关系 1、创建映射字段 PUT /索引库名/_mapping {"properties": {"字段名": {"type": "类型","index": true&#xff0c;"store": true&#xff0c;"analyzer": &q…

Vue转React踩坑记录——useEffect组件卸载时使用useState定义的值返回undefined

bug背景&#xff1a;vue转react踩坑。在vue数据是响应式的&#xff0c;卸载时不会出现数据已经赋值但是卸载是undefined情况&#xff0c;除非手动更改为undefined。而在react流行的hooks写法&#xff0c;你要一直操作数据&#xff0c;react提供的useEffect方法的return 里其实就…

视频结构化从入门到精通——视频结构化主要技术介绍

视频结构化主要技术 1 视频接入 “视频接入”是视频结构化管道的起点&#xff08;SRC Point&#xff09;视频接入是视频结构化处理的第一步&#xff0c;它涉及将视频数据从各种采集源获取到系统中进行进一步处理。视频接入的质量和稳定性对后续的数据处理、分析和应用至关重要…

多参数遥测终端科技守护水电站生态流量下泄

随着我国水电事业的蓬勃发展&#xff0c;水电站在推动地方经济快速增长、缓解能源压力方面发挥了不可替代的作用。然而带来的生态环境问题日益凸显&#xff0c;因水电站下泄流量不足造成部分河段减水、脱水甚至干涸&#xff0c;影响了河流的正常生态功能和居民的生产、生活。因…

Android12 添加设置控制导航栏显示和状态栏下拉

添加key值 位置&#xff1a; frameworks/base/core/java/android/provider/Settings.java /*** Control navigation bar enabled*/ReadableSuppressLint("NoSettingsProvider")public static final String NAVIGATIONBAR_ENABLED "navigationbar_enabled"…

【硬件操作入门】2--GPIO与门电路、二极管三极管、LED电路与操作

【硬件操作入门】2–GPIO与门电路&#xff08;二极管&三极管&#xff09;、LED电路与操作 文章目录 【硬件操作入门】2--GPIO与门电路&#xff08;二极管&三极管&#xff09;、LED电路与操作一、GPIO与门电路1.1、GPIO的应用1.2、GPIO引脚操作1.2.1 设置引脚为GPIO功能…

【计算机组成原理】3.2.4 双端口RAM和多模块存储器

3.2.4 双端口RAM和多模块存储器 本视频涉及两种内存优化技术&#xff0c;分别是“双端口RAM”和“多模块存储器”。其中&#xff0c;“双端口RAM”已从408大纲删除&#xff0c;但由于部分自命题院校依然会考这个概念&#xff0c;视频中仍然保留了这部分内容。 408考生简要了解…

Flutter Riverpod状态管理之AutoDisposeNotifierProvider

Flutter Riverpod状态管理之AutoDisposeNotifierProvider Flutter的Riverpod状态管理&#xff0c;目前来看是官方出的最好用的状态管理库了&#xff0c;今天我们主要看AutoDisposeNotifierProvider的使用&#xff0c;AutoDisposeNotifierProvider具有如下的优势&#xff1a; 1…

day39(8/29)——harbor私有仓库管理

一、harbor私有仓库管理 是python的包管理工具&#xff0c;和yum对redhat的关系是一样的 yum -y install epel-release yum -y install python2-pip pip install --upgrade pip pip list pip 8x pip install --upgrade pip pip install --upgrade pip20.3 -i https://mirror…