【vue3.0】实现导出的PDF文件内容是红头文件格式

本文主要是介绍【vue3.0】实现导出的PDF文件内容是红头文件格式,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

效果图:

在这里插入图片描述

编写文件里面的主要内容

  <main><div id="report-box"><p>线索描述</p><p class="label"><span>线索发现时间:</span> <span>{{ detailInfoVal?.problem.createdDate }}</span></p><p class="label"><span>派发时间:</span> <span>{{ detailInfoVal?.taskCreateTime }}</span></p><p class="label"><span>所属责任区:</span> <span>{{ detailInfoVal?.problem.regionalName }}</span></p><p>处置描述</p><ElInputv-model="textarea":autosize="{ minRows: 4, maxRows: 4 }"maxlength="200"type="textarea"placeholder="请填写"show-word-limit/><div style="margin-top: 10px"><p>整改图片对比</p><span>【整改前 {{ detailInfoVal?.taskCreateTime }}</span><br /><ElImagev-for="(item, index) in srcList":key="item"class="img":infinite="false":src="item":zoom-rate="1.2":initial-index="initialIndexImage":preview-src-list="srcList"fit="cover"hide-on-click-modal@show="onPreviewImg(index)"/><br /><span>【整改后 {{ detailInfoVal?.taskUpdateTime }}</span><div v-if="srcList2.length" class="img_box"><div v-for="(item, index) in srcList1" :key="index"><imgv-if="['png', 'jpg', 'jpeg'].includes(item.type)":src="item.url"style="width: 120px; height: 120px; border-radius: 5px; margin-right: 5px"/></div></div><br /><span v-if="!srcList2.length">暂无图片信息</span></div></div></main>

在导出事件里面处理文件的红色标题以及红丝横线,小圆点功能

在这里插入图片描述

在这里插入图片描述

使用的工具:【jspdf】【html2canvas】

npm install jspdf
npm install html2canvas

引入

import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
import dayjs from 'dayjs';//文件里内容我用到了时间

核心代码

html2canvas(document.querySelector('#report-box'), { backgroundColor: '#fff', useCORS: true }).then((canvas) => {const pageData = canvas.toDataURL('image/png');var contentWidth = canvas.width;var contentHeight = canvas.height;var imgWidth = 530;var imgHeight = (595.28 / contentWidth) * contentHeight;var pdf = new jsPDF('', 'pt', 'a4'); // 纵向排列window.pdfAddFont(pdf);pdf.addFont('SourceHanSans-Normal.ttf', 'SourceHanSans-Normal', 'normal');pdf.setFont('SourceHanSans-Normal');const fontColor = 'red'; //文字的颜色,哪里需要设置 就在需要添加文字之前去执行// 添加双横线的函数function addDoubleLine(y) {pdf.setLineWidth(5);pdf.setDrawColor(255, 0, 0);// 绘制第一条横线pdf.line(40, y, 570, y);pdf.setLineWidth(2);// 绘制第二条横线,y + 10 表示下方有10单位的间隔pdf.line(40, y + 5, 570, y + 5);}// 添加圆点function addDoubleDot(x, y) {// 设置圆的样式(红色填充)pdf.setFillColor('red');// 开始一个新的路径const radius = 1;pdf.ellipse(x, y, radius, radius);}pdf.setFontSize(20); // 设置字体大小pdf.setTextColor(fontColor); // 设置字体颜色pdf.text('有害生物异常任务报告', 620 / 2, 40, {  //第二个参数 和第三个参数(左、上)align: 'center',});pdf.setFontSize(12); // 设置字体大小pdf.setTextColor(0, 0, 0);pdf.text('有害生物防治检疫站', 40, 75, {align: 'left',});pdf.text(`${dayjs().format('YYYY-MM-DD HH:mm:ss')}`, 570, 75, {align: 'right',});pdf.setTextColor(227, 60, 47);// 调用函数添加双横线addDoubleLine(80);pdf.addImage(pageData, 'JPEG', 40, 110, imgWidth, imgHeight);pdf.setFontSize(12); // 设置字体大小pdf.setTextColor(113, 115, 118);pdf.text(`编辑${userRoleInfo.value.userName}`, 40, imgHeight + 160, {align: 'left',});// 调用函数添加双横线addDoubleLine(imgHeight + 140);// 调用函数添加小圆点addDoubleDot(620 / 2, imgHeight + 155);pdf.save(`有害生物异常任务报告-${dayjs().format('YYYY-MM-DD HH:mm:ss')}`);});

备注

代码中添加字体之前调用了 window.pdfAddFont() 是提前写好的一个js文件,放到了服务器上,文件的内容
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/5fcc724083f342fe9d5987d2fd1a21b5.png

其中对于html2canvas参数的介绍如下:

在这里插入图片描述

这篇关于【vue3.0】实现导出的PDF文件内容是红头文件格式的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/837494

相关文章

mybatis执行insert返回id实现详解

《mybatis执行insert返回id实现详解》MyBatis插入操作默认返回受影响行数,需通过useGeneratedKeys+keyProperty或selectKey获取主键ID,确保主键为自... 目录 两种方式获取自增 ID:1. ​​useGeneratedKeys+keyProperty(推

Spring Boot集成Druid实现数据源管理与监控的详细步骤

《SpringBoot集成Druid实现数据源管理与监控的详细步骤》本文介绍如何在SpringBoot项目中集成Druid数据库连接池,包括环境搭建、Maven依赖配置、SpringBoot配置文件... 目录1. 引言1.1 环境准备1.2 Druid介绍2. 配置Druid连接池3. 查看Druid监控

Linux在线解压jar包的实现方式

《Linux在线解压jar包的实现方式》:本文主要介绍Linux在线解压jar包的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux在线解压jar包解压 jar包的步骤总结Linux在线解压jar包在 Centos 中解压 jar 包可以使用 u

c++ 类成员变量默认初始值的实现

《c++类成员变量默认初始值的实现》本文主要介绍了c++类成员变量默认初始值,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录C++类成员变量初始化c++类的变量的初始化在C++中,如果使用类成员变量时未给定其初始值,那么它将被

Qt使用QSqlDatabase连接MySQL实现增删改查功能

《Qt使用QSqlDatabase连接MySQL实现增删改查功能》这篇文章主要为大家详细介绍了Qt如何使用QSqlDatabase连接MySQL实现增删改查功能,文中的示例代码讲解详细,感兴趣的小伙伴... 目录一、创建数据表二、连接mysql数据库三、封装成一个完整的轻量级 ORM 风格类3.1 表结构

基于Python实现一个图片拆分工具

《基于Python实现一个图片拆分工具》这篇文章主要为大家详细介绍了如何基于Python实现一个图片拆分工具,可以根据需要的行数和列数进行拆分,感兴趣的小伙伴可以跟随小编一起学习一下... 简单介绍先自己选择输入的图片,默认是输出到项目文件夹中,可以自己选择其他的文件夹,选择需要拆分的行数和列数,可以通过

Python中将嵌套列表扁平化的多种实现方法

《Python中将嵌套列表扁平化的多种实现方法》在Python编程中,我们常常会遇到需要将嵌套列表(即列表中包含列表)转换为一个一维的扁平列表的需求,本文将给大家介绍了多种实现这一目标的方法,需要的朋... 目录python中将嵌套列表扁平化的方法技术背景实现步骤1. 使用嵌套列表推导式2. 使用itert

Python使用pip工具实现包自动更新的多种方法

《Python使用pip工具实现包自动更新的多种方法》本文深入探讨了使用Python的pip工具实现包自动更新的各种方法和技术,我们将从基础概念开始,逐步介绍手动更新方法、自动化脚本编写、结合CI/C... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

在Linux中改变echo输出颜色的实现方法

《在Linux中改变echo输出颜色的实现方法》在Linux系统的命令行环境下,为了使输出信息更加清晰、突出,便于用户快速识别和区分不同类型的信息,常常需要改变echo命令的输出颜色,所以本文给大家介... 目python录在linux中改变echo输出颜色的方法技术背景实现步骤使用ANSI转义码使用tpu

Python使用python-can实现合并BLF文件

《Python使用python-can实现合并BLF文件》python-can库是Python生态中专注于CAN总线通信与数据处理的强大工具,本文将使用python-can为BLF文件合并提供高效灵活... 目录一、python-can 库:CAN 数据处理的利器二、BLF 文件合并核心代码解析1. 基础合