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

Vue生成多文件pdf准考证

这是渲染的数据

在这里插入图片描述

这是生成的pdf文件,直接可以打印

在这里插入图片描述

需要安装和npm依赖和引入封装的pdf.js文件

npm install --save html2canvas  // 页面转图片
npm install jspdf --save  // 图片转pdf

pdf.js文件

import html2canvas from "html2canvas";
import jsPDF from "jspdf";
// 为传的pdf名称动态fileName
export const downloadPDF = (page, fileName) => {html2canvas(page).then(function (canvas) {canvas2PDF(canvas, fileName);});
};
const canvas2PDF = (canvas, fileName) => {let contentWidth = canvas.width;let contentHeight = canvas.height;//a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高let imgWidth = 595.28;let imgHeight = 595.28 / contentWidth * contentHeight;// 第一个参数: l:横向  p:纵向// 第二个参数:测量单位("pt","mm", "cm", "m", "in" or "px")let pdf = new jsPDF("p", "pt");pdf.addImage(canvas.toDataURL("image/jpeg", 1.0),"JPEG",0,0,imgWidth,imgHeight);pdf.save(fileName + ".pdf");
};

具体实现

Tempalte

<template>   <div> <div v-for="(item, index) in listDatas" :key="index"><div class="boss"><div class="box" :ref="`pdf-${index}`"><div class="box_son"><div class="titles">"XXX"竞赛</div><div class="zhunasd">准考证</div><div class="once"><div class="contents"><div>姓名: &nbsp;{{ item.name }}</div><div>考号: &nbsp;{{ item.kaohao }}</div><div>司职: &nbsp;{{ item.gongzhongTitle }}</div></div><div class="photos"><img :src="item.sfzhimgs" alt="" width="100%" height="150px" /></div></div><tableborder="1px solid #2D2822"cellpadding="0"cellspacing="0"class="tables"><tr><td style="width: 250px; border: 1px solid #2d2822">&nbsp;考试类别</td><td style="width: 180px; border: 1px solid #2d2822">&nbsp;序号</td></tr><tr><td style="width: 250px; border: 1px solid #2d2822">&nbsp;理论测试</td><td style="width: 180px; border: 1px solid #2d2822">&nbsp;{{ item.liLunZw }}</td></tr><tr><tdstyle="width: 250px; border: 1px solid #2d2822"v-if="item.fangzhen[1] != undefined">&nbsp;{{ item.fangzhen[0] }}</td><tdstyle="width: 180px; border: 1px solid #2d2822"v-if="item.uuid[1] != undefined">&nbsp;{{ item.uuid[0] }}</td></tr><tr><tdstyle="width: 250px; border: 1px solid #2d2822"v-if="item.fangzhen[1] != undefined">&nbsp;{{ item.fangzhen[1] }}</td><tdstyle="width: 180px; border: 1px solid #2d2822"v-if="item.uuid[1] != undefined">&nbsp;{{ item.uuid[1] }}</td></tr><tr><tdstyle="width: 250px; border: 1px solid #2d2822"v-if="item.fangzhen[2] != undefined">&nbsp;{{ item.fangzhen[2] }}</td><tdstyle="width: 180px; border: 1px solid #2d2822"v-if="item.uuid[2] != undefined">&nbsp;{{ item.uuid[2] }}</td></tr><tr><tdstyle="width: 250px; border: 1px solid #2d2822"v-if="item.fangzhen[3] != undefined">&nbsp;{{ item.fangzhen[3] }}</td><tdstyle="width: 180px; border: 1px solid #2d2822"v-if="item.uuid[3] != undefined">&nbsp;{{ item.uuid[3] }}</td></tr></table><div class="footers"><div>注意事项:</div><div class="footers_one">1、考生凭准考证和身份证进入考场,对号入座,并将准考证、<br /><div class="footers_two">身份证放在桌面上</div></div><div class="footers_two">2、准考证如有涂改或者损坏严重情况,将视为无效证件。</div></div></div></div></div></div><button @click="handleExport">导出PDF</button></div>
</template>

Script

1.转换为base64的图片才能生效 http和https的图片生成都不生效

2.这里用到的是Google Chrome浏览器多文件下载一次最多只有10个,这里我们有做异步处理延迟1秒下载

<script>import { downloadPDF } from "../utils/pdf"; //创建一个utils文件夹 下放封装的pdf
export default {data() {return {listDatas: [{kaohao: "2100",liLunZw: "D106",sfzh: "2110",name: "Stephen Curry",uuid: ["GS01", "GA02", "GF03"],gongzhongTitle: "后卫",fangzhen: ["运球训练", "投篮训练", "上篮训练"],sfzhimgs: "转换为base64的图片才能生效 http和https的图片生成都不生效",},{kaohao: "2100",liLunZw: "D107",sfzh: "2110",name: "Andrew Wiggins",uuid: ["GS01", "GA02", "GF03"],gongzhongTitle: "小前锋",fangzhen: ["运球训练", "投篮训练", "上篮训练"],sfzhimgs: "",},{kaohao: "2100",liLunZw: "D107",sfzh: "2110",name: "Andrew Wiggins",uuid: ["GS01", "GA02", "GF03"],gongzhongTitle: "小前锋",fangzhen: ["运球训练", "投篮训练", "上篮训练"],sfzhimgs: "",},{kaohao: "2100",liLunZw: "D107",sfzh: "2110",name: "Andrew Wiggins",uuid: ["GS01", "GA02", "GF03"],gongzhongTitle: "小前锋",fangzhen: ["运球训练", "投篮训练", "上篮训练"],sfzhimgs: "",},],};},methods: {// 导出pdfhandleExport() {this.downloadPDFs();},// 异步执行下载pdfasync downloadPDFs() {const downloadPromises = [];for (let index = 0; index < this.listDatas.length; index++) {const item = this.listDatas[index].name; //获取名称const pdfElement = this.$refs[`pdf-${index}`][0]; //获取pdf内容循环var content = pdfElement.textContent; //获取文本内容const startIndex = content.indexOf("考号:") + 4; //截取考号为pdf的名称const endIndex = content.indexOf("工种:");const examNumber = content.substring(startIndex, endIndex).trim(); //pdf的名字const ZhongName = item + "," + examNumber; //名称+考号为pdf名称await this.delay(1000); // 延迟1秒const downloadPromise = downloadPDF(pdfElement, ZhongName); //获取打印pdf的内容downloadPromises.push(downloadPromise);}Promise.all(downloadPromises).then(() => {// 全部下载完成后执行的代码console.log("全部下载完成");}).catch((error) => {// 处理下载错误console.error("下载出错", error);});},delay(ms) {return new Promise((resolve) => setTimeout(resolve, ms));},},
};
</script>

Style

<style>
.boss {width: 100%;margin: 0 auto;display: flex;justify-content: center;overflow: hidden;
}
.box {width: 480px;height: 760px;// border: 1px solid #000;display: flex;justify-content: center;// margin-top: 50px;
}
.box_son {width: 425px;height: 600px;margin-top: 30px;// border: 1px solid yellow;
}
.titles {font-size: 20px;font-weight: 800;display: flex;justify-content: center;margin-top: 10px;
}
.zhunasd {font-size: 20px;font-family: Microsoft YaHei;font-weight: 800;text-align: center;
}
.once {width: 100%;display: flex;justify-content: space-between;margin-top: 20px;font-size: 17px;font-family: Microsoft YaHei;font-weight: 500;// border: 1px solid #000;
}
.contents {width: 70%;height: 160px;// border: 1px solid red;line-height: 56px;
}
.photos {width: 30%;height: 160px;// border: 1px solid blue;
}
.tables {width: 425px;margin-top: 20px;height: 180px;
}
.footers {margin-top: 20px;
}
.footers_one {margin-top: 10px;
}
.footers_two {margin-top: 10px;
}
</style>

综上就是全部的实现的内容

相关文章:

Vue生成多文件pdf准考证

这是渲染的数据 这是生成的pdf文件&#xff0c;直接可以打印 需要安装和npm依赖和引入封装的pdf.js文件 npm install --save html2canvas // 页面转图片 npm install jspdf --save // 图片转pdfpdf.js文件 import html2canvas from "html2canvas"; import jsPDF …...

Rust的derive思考

这几天在Yew的学习实践中&#xff0c;发现derive中的参数中包含了yew自己的东西&#xff0c;比如yew::Properties。习惯使用#[derive(Clone, Debug, PartialEq)]之后&#xff0c;发现还有新的成员&#xff0c;这让我好奇起来。 首先让我们来回顾一下derive是什么。 #[derive(…...

Python常用模块

文章目录 1. time&#xff1a;时间2. calendar&#xff1a;日历3. datetime&#xff1a;可以运算的时间4. sys&#xff1a;系统5. os&#xff1a;操作系统6. random&#xff1a;随机数7. json&#xff1a;序列化8. pickle&#xff1a;序列化9. logging 模块9.1 什么是logging模…...

Java“牵手”京东商品评论数据接口方法,京东商品评论接口,京东商品评价接口,行业数据监测,京东API实现批量商品评论内容数据抓取示例

京东平台商品评论数据接口是开放平台提供的一种API接口&#xff0c;通过调用API接口&#xff0c;开发者可以获取京东商品的标题、价格、库存、月销量、总销量、库存、详情描述、图片、评论内容、评论日期、评论图片、追评内容等详细信息 。 获取商品评论接口API是一种用于获取…...

算法leetcode|75. 颜色分类(rust重拳出击)

文章目录 75. 颜色分类&#xff1a;样例 1&#xff1a;样例 2&#xff1a;提示&#xff1a; 分析&#xff1a;题解&#xff1a;rust&#xff1a;go&#xff1a;c&#xff1a;python&#xff1a;java&#xff1a; 75. 颜色分类&#xff1a; 给定一个包含红色、白色和蓝色、共 n…...

网络安全(黑客)自学笔记学习路线

谈起黑客&#xff0c;可能各位都会想到&#xff1a;盗号&#xff0c;其实不尽然&#xff1b;黑客是一群喜爱研究技术的群体&#xff0c;在黑客圈中&#xff0c;一般分为三大圈&#xff1a;娱乐圈 技术圈 职业圈。 娱乐圈&#xff1a;主要是初中生和高中生较多&#xff0c;玩网恋…...

NoSQL:非关系型数据库分类

NoSQL&#xff0c;全称 Not Only SQL&#xff0c;意为不仅仅是 SQL&#xff0c;泛指非关系型数据库。NoSQL 是基于键值对的&#xff0c;而且不需要经过 SQL 层的解析&#xff0c;数据之间没有耦合性&#xff0c;性能非常高。 非关系型数据库又可细分如下&#xff1a; 键值存储…...

【Eclipse】Project interpreter not specified 新建项目时,错误提示,已解决

目录 0.环境 1&#xff09;问题截图&#xff1a; 2&#xff09;错误发生原因&#xff1a; 1.解决思路 2.具体步骤 0.环境 windows 11 64位&#xff0c;Eclipse 2021-06 1&#xff09;问题截图&#xff1a; 2&#xff09;错误发生原因&#xff1a; 由于我手欠&#xff0c;将…...

OPENCV实现图像查找

特征匹配+单应性矩阵 # -*- coding:utf-8 -*- """ 作者:794919561 日期:2023/9/4 """ import cv2 import numpy as np# 读图像 img1 = cv2.imread(F:\\learnOpenCV\\openCVLearning\\pictures\\chess...

vue仿企微文档给页面加水印(水印内容可自定义,超简单)

1.在src下得到utils里新建一个文件watermark.js /** 水印添加方法 */let setWatermark (str1, str2) > {let id 1.23452384164.123412415if (document.getElementById(id) ! null) {document.body.removeChild(document.getElementById(id))}let can document.createE…...

“金融级”数字底座:从时代的“源启”,到“源启”的时代

今年初《数字中国建设整体布局规划》正式发布&#xff0c;这代表着数字中国建设迈向了实质的落地阶段&#xff0c;其背后的驱动就是遍及各行各业的数字化转型。 千姿百态、复杂多样的应用场景&#xff0c;可以看作是遍布数字中国的“点”&#xff1b;千行百业、各种类型的行业…...

zabbix自动发现linux系统挂载的nas盘,并实现读写故障的监控告警

一.准备好被监控机器上面执行脚本,以备服务端发现和监控 脚本的内容: ZABBI安装路径可执行文件及配置文件根据实际部署的路径更改 #!/bin/bash >/zabbixconfpath/zbx_nas.conf >/zabbixscriptspath/findnas.sh >/zabbixscriptspath/checknas.sh >/zabbixscripts…...

无涯教程-JavaScript - DAYS函数

描述 DAYS函数返回两个日期之间的天数。 语法 DAYS (end_date, start_date)争论 Argument描述Required/OptionalEnd_dateStart_date and End_date are the two dates between which you want to know the number of days.RequiredStart_dateStart_date and End_date are th…...

48、springboot 的国际化之让用户在程序界面上弄个下拉框,进行动态选择语言

上一篇是直接改浏览器的支持语言。 在浏览器上面直接改国际化语言 这次要实现的功能是直接在程序界面动态选择语言。 Locale 代表语言、国家。 ★ 在界面上动态改变语言 应用之所以能动态呈现不同的语言界面&#xff0c;其实关键在于如何确定客户端的Locale&#xff08;代…...

FPGA可重配置原理及实现(1)——导论

一、概述 可重配置技术是Xilinx提供的用来高效利用FPGA设计资源实现FPGA资源可重复利用的最新的FPGA设计技术&#xff0c;这种技术的发展为FPGA应用提供了更加广阔的前景。 术语“重构”是指FPGA已经配置后的重新编程。FPGA的重构有两种类型&#xff1a;完全的和部分的。完全重…...

Ubuntu系统下使用宝塔面板实现一键搭建Z-Blog个人博客的方法和流程

文章目录 1.前言2.网站搭建2.1. 网页下载和安装2.2.网页测试2.3.cpolar的安装和注册 3.本地网页发布3.1.Cpolar临时数据隧道3.2.Cpolar稳定隧道&#xff08;云端设置&#xff09;3.3.Cpolar稳定隧道&#xff08;本地设置&#xff09; 4.公网访问测试5.结语 1.前言 Ubuntu系统作…...

数据结构 | 第一章 绪论

问题求解与程序设计 这一节都是介绍性的内容&#xff0c;但是哥尼斯堡的七桥问题值得写写。 #include <stdio.h>int Euler(int mat[4][4], int n) {int count 0;for (int i 0; i < n; i) {int degree 0;for (int j 0; j < n; j) {degree mat[i][j];}if (degr…...

python爬虫入门教程(非常详细):如何快速入门Python爬虫?

示例示例Python爬虫入门教程什么是爬虫爬虫&#xff08;又称网络爬虫&#xff09;是一种按照一定的规则&#xff0c;自动地抓取万维网信息的程序或者脚本。它可以自动地抓取网页内容&#xff0c;并从中提取有用的数据&#xff0c;存储到本地文件或数据库中。 Python爬虫入门教…...

ElementUI浅尝辄止21:Tree 树形控件

树形组件&#xff1a;用清晰的层级结构展示信息&#xff0c;可展开或折叠。 树组件使用挺频繁的&#xff0c;常见于侧边栏树形目录、树形下拉选项按钮或搜索查询树形信息选项 1.如何使用&#xff1f; 基础的树形结构展示 <el-tree :data"data" :props"defa…...

插入排序,选择排序,交换排序,归并排序和非比较排序(C语言版)

前言 所谓排序&#xff0c;就是将一组数据按照递增或者递减的方式进行排列&#xff0c;让这组数据变得有序起来。排序在生活中运用的是十分广泛的&#xff0c;各行各业都用到了排序&#xff0c;比如我们在网购的时候就是按照某种排序的方式来选择东西的。所以去了解排序的实现也…...

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

安宝特方案丨XRSOP人员作业标准化管理平台:AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

unix/linux,sudo,其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...

【RockeMQ】第2节|RocketMQ快速实战以及核⼼概念详解(二)

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

关键领域软件测试的突围之路:如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...