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

vue3中pdf打印问题处理

1 get请求参数问题
之前的请求是post得不到参数,今天发现的问题很奇怪,从前端进入网关,网关居然得不到参数。
前端代码

const print = () => {let linkUrlStr = proxy.$tool.getUrlStr(proxy.$api.invOrder.psiInvOrder.printSalOutstock,{asId:userInfo.value.currentAsId,recvStatus:condForm.value.recvStatus,busiType:condForm.value.busiType,startBillDate:condForm.value.billDateRange[0],endBillDate:condForm.value.billDateRange[1],token:proxy.$tool.cookie.get(sysConfig.TOKEN_NAME),Group : 'eayc',Tenat : 'psi',})window.open(linkUrlStr,'_blank');
}
tool.getUrlStr = (url,params) => {//对象 拼接成 & 字符串if (!params) return url;let result = url + "?";params &&Object.keys(params).forEach((item) => (result += `${item}=${params[item]}&`));return result.slice(0, -1);
}

浏览器新打开页面可以看到参数
1
但进去到网关后,
1
查看一个正确案例的如下,uri应该是要有参数的
2
直接讲请求参数复制到地址栏,是可以访问到数据的。但因为是get请求,时间需要做转换.使用@DateTimeFormat(pattern = "yyyy-MM-dd")
1
如果将url复制到浏览器中请求网关是可以的。为何通过node中转却不行呢?
在另外一个工程上面的处理方案是ok的,这种办法简单而有效。为什么在新的工程中反而出了问题呢?
1
既然这条路在这个工程实在走不下去,那么采取“变则通”的方案,不采用get,还是采用post。拿到文件流后,再调用winow.open打开
调整后的代码如下

const print = async () => {const res = await proxy.$api.invOrder.psiInvOrder.printSalOutstock({...condForm.value})const blob = new Blob([res.data], { type: 'application/pdf' })let url = window.URL.createObjectURL(blob)const page = window.open(url, '_blank')// 因为window.open,故而需要增加延迟,否则标题为空setTimeout(function() { page.document.title = '销售出库单' }, 100)
}
	public postOnlyFile = (url: string, data = {} , config: AxiosRequestConfig<any> = {}): Promise<any> =>axios({...this.baseConfig,headers:{...this.baseConfig.headers,'Content-Type': "application/json"},responseType:'blob',url,method: 'post',data,...config,})

2 pdf页面样式问题
pdf是通过easyexcel先生成excel,然后再转为pdf。

    @Overridepublic void print(OutputStream outputStream, String pathName, PsiInvOrderDto psiInvOrderDto) {Resource resource = new ClassPathResource(pathName);InputStream inputStream = null;String fileName = DateUtil.getDateRandom() + ".xls";File file = new File(TmpDic.url + File.separator + fileName);try {inputStream = resource.getInputStream();FileUtils.copyInputStreamToFile(inputStream, file);} catch (IOException e) {e.printStackTrace();}ExcelWriter excelWriter = EasyExcel.write(outputStream).withTemplate(file).build();WriteSheet writeSheet = EasyExcel.writerSheet(0)//单元格.registerWriteHandler(new NoRedStyleCellHander()).build();FillConfig fillConfig = FillConfig.builder().forceNewRow(Boolean.TRUE).build();excelWriter.fill(psiInvOrderDto.getOrderDetails(), fillConfig, writeSheet);excelWriter.fill(psiInvOrderDto, writeSheet);excelWriter.finish();file.delete();}

设置单元格样式

@Slf4j
public class NoRedStyleCellHander implements CellWriteHandler {/*** 样式类*/private CellStyle cellStyle;@Overridepublic void beforeCellCreate(WriteSheetHolder writeSheetHolder, WriteTableHolder writeTableHolder, Row row, Head head, Integer integer, Integer integer1, Boolean aBoolean) {}@Overridepublic void afterCellCreate(WriteSheetHolder writeSheetHolder, WriteTableHolder writeTableHolder, Cell cell, Head head, Integer integer, Boolean aBoolean) {}@Overridepublic void afterCellDataConverted(WriteSheetHolder writeSheetHolder, WriteTableHolder writeTableHolder, CellData cellData, Cell cell, Head head, Integer integer, Boolean aBoolean) {}@Overridepublic void afterCellDispose(WriteSheetHolder writeSheetHolder, WriteTableHolder writeTableHolder, List<CellData> list, Cell cell, Head head, Integer integer, Boolean aBoolean) {if (cellStyle == null) {cellStyle = writeSheetHolder.getSheet().getWorkbook().createCellStyle();}if (cellStyle!=null){//背景颜色cellStyle.setFillPattern(FillPatternType.SOLID_FOREGROUND);cellStyle.setFillForegroundColor(IndexedColors.WHITE.getIndex());// 下边框cellStyle.setBorderBottom(BorderStyle.THIN);// 左边框cellStyle.setBorderLeft(BorderStyle.THIN);// 上边框cellStyle.setBorderTop(BorderStyle.THIN);// 右边框cellStyle.setBorderRight(BorderStyle.THIN);Font font = writeSheetHolder.getSheet().getWorkbook().createFont();font.setBold(true);cellStyle.setFont(font);//设置金额格式if (cell.getCellType() == CellType.NUMERIC.getCode()) {Workbook workbook = cell.getSheet().getWorkbook();DataFormat dataFormat = workbook.createDataFormat();cellStyle.setDataFormat(dataFormat.getFormat("#,##0.00"));}cell.setCellStyle(cellStyle);}}
}

得到的是这样的pdf,可以看到合并单位格的地方都是漆黑一片.如果上面的代码没有添加.registerWriteHandler(new NoRedStyleCellHander()),则是一片漆黑
2
原本我的excel模板是这样的,那么如何解决这个问题呢?
2
通过调整wps的配置,同时去掉registerWriteHandler(new NoRedStyleCellHander()).
在excel模板中讲底色调整为白色,将边框设置为"无边框"
1
模板如下:
1
得到的效果如下:
2
看到上面的效果,就很容易明白,为什么还有黑色,因为你需要将单元填充为白色,那么内容就显示出来了。
2
接着再看,为什么标题没有出来呢?销售出库单跟其他有什么区别吗,为什么其他的可以出来,而标题不能出来。既然其他的可以出来,而标题不能出来,他们的区别在于字体大小不一致,那么问题就很可能出在这里。朝这个方向来探究,就知道了。设置行高。
1
再看,问题解决了
在这里插入图片描述

相关文章:

vue3中pdf打印问题处理

1 get请求参数问题 之前的请求是post得不到参数&#xff0c;今天发现的问题很奇怪&#xff0c;从前端进入网关&#xff0c;网关居然得不到参数。 前端代码 const print () > {let linkUrlStr proxy.$tool.getUrlStr(proxy.$api.invOrder.psiInvOrder.printSalOutstock,{a…...

如何向嵌入式设备中添加tcpdump工具

说明&#xff1a;tcpdump是一个在网络设备调试中一个非常重要的工具&#xff0c;它并不像hexdump等工具集成在busybox里面&#xff0c;也不像其他的软件一样只需要依赖linux标准的库就可以实现&#xff0c;它需要pcap相关的库和加密的相关库。 本文主要是基于realtek 83系列的…...

伦茨科技Apple Find My认证芯片-ST17H6x芯片

深圳市伦茨科技有限公司&#xff08;以下简称“伦茨科技”&#xff09;发布ST17H6x Soc平台。成为继Nordic之后全球第二家取得Apple Find My「查找」认证的芯片厂家&#xff0c;该平台提供可通过Apple Find My认证的Apple查找&#xff08;Find My&#xff09;功能集成解决方案。…...

uni-app 前后端调用实例 基于Springboot 数据列表显示实现

锋哥原创的uni-app视频教程&#xff1a; 2023版uniapp从入门到上天视频教程(Java后端无废话版)&#xff0c;火爆更新中..._哔哩哔哩_bilibili2023版uniapp从入门到上天视频教程(Java后端无废话版)&#xff0c;火爆更新中...共计23条视频&#xff0c;包括&#xff1a;第1讲 uni…...

python渗透工具编写学习笔记:10、网络爬虫基础/多功能编写

目录 前言 10.1 概念 10.2 调度器/解析器 10.3 存储器/去重器 10.4 日志模块 10.5 反爬模块 10.6 代理模块 前言 在渗透工具中&#xff0c;网络爬虫有着不可忽视的作用&#xff0c;它能够快速而精准的搜寻、提取我们所需要的信息并按照我们所需要的格式排列&#xff0c;…...

Python武器库开发-武器库篇之子域名扫描器开发(四十一)

Python武器库开发-武器库篇之子域名扫描器开发(四十一) 在我们做红队攻防或者渗透测试的过程中&#xff0c;信息收集往往都是第一步的&#xff0c;有人说&#xff1a;渗透的本质就是信息收集&#xff0c;前期好的信息收集很大程度上决定了渗透的质量和攻击面&#xff0c;本文将…...

通俗易懂的15个Java Lambda表达式案例

文章目录 1. **实现Runnable接口**&#xff1a;2. **事件监听器**&#xff08;如Swing中的ActionListener&#xff09;&#xff1a;3. **集合遍历**&#xff08;使用forEach方法&#xff09;&#xff1a;4. **过滤集合**&#xff08;使用Stream API&#xff09;&#xff1a;5. …...

十七:爬虫-JS逆向(上)

1、什么是JS、JS反爬是什么&#xff1f;JS逆向是什么? JS:JS全称JavaScript是互联网上最流行的脚本语言&#xff0c;这门语言可用于HTML 和 web&#xff0c;更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。JavaScript 是一种轻量级的编程语言。JavaScript 是…...

How to implement anti-crawler strategies to protect site data

How to implement anti-crawler strategies to protect site data 信息校验型反爬虫User-Agent反爬虫Cookie反爬虫签名验证反爬虫WebSocket握手验证反爬虫WebSocket消息校验反爬虫WebSocket Ping反爬虫 动态渲染反爬虫文本混淆反爬虫图片伪装反爬虫CSS偏移反爬虫SVG映射反爬虫字…...

王国维的人生三境界,这一生至少当一次傻瓜

一、人生三境界 古今之成大事业、大学问者&#xff0c;必经过三种之境界。“昨夜西风凋碧树&#xff0c;独上高楼&#xff0c;望尽天涯路。”此第一境也。“衣带渐宽终不悔&#xff0c;为伊消得人憔悴。”此第二境也。“众里寻他千百度&#xff0c;蓦然回首&#xff0c;那人却…...

Jmeter二次开发实操问题汇总(JDK问题,jar包问题)

前提 之前写过一篇文章&#xff1a;https://qa-lsq.blog.csdn.net/article/details/119782694 只是简单尝试了一下生成一个随机手机号码。 但是如果在工作中一个实际场景要用的二次开发&#xff0c;可能会遇到一些问题。 比如这样一个场景&#xff1a; Mobile或者前端调用部分…...

网络安全B模块(笔记详解)- 数字取证

数据分析数字取证-attack 1.使用Wireshark查看并分析Windows 7桌面下的attack.pcapng数据包文件,通过分析数据包attack.pcapng找出恶意用户的IP地址,并将恶意用户的IP地址作为Flag(形式:[IP地址])提交; 解析:http.request.method==POST ​ Flag:[172.16.1.102] 2.继续…...

阿里云服务器8080端口安全组开通图文教程

阿里云服务器8080端口开放在安全组中放行&#xff0c;Tomcat默认使用8080端口&#xff0c;8080端口也用于www代理服务&#xff0c;阿腾云atengyun.com以8080端口为例来详细说下阿里云服务器8080端口开启教程教程&#xff1a; 阿里云服务器8080端口开启教程 阿里云服务器8080端…...

vmlinux, vmlinux.bin, bzImage; cmake的find_package(Clang)新增了哪些变量( 比较两次记录的所有变量差异)

vmlinux, vmlinux.bin, bzImage cd /bal/linux-stable/ file vmlinux #vmlinux: ELF 32-bit LSB executable, Intel 80386, version 1 (SYSV), statically linked, BuildID[sha1]=b99bbd9dda1ec2751da246d4a7ae4e6fcf7d789b, not stripped #文件大小 20MB, 19940148Bfile ar…...

webpack配置入门

webpack是需要一定配置才能使用的&#xff0c;否则无任何效果。在开始webpack学习之前必须理解以下5个核心概念。 5大核心配置 1.entry(入口) webpack从那个文件开始打包&#xff0c;支持单文件入口&#xff08;vue和react脚手架单入口&#xff09;和多文件入口 2.output(输…...

Elasticsearch 8.X进阶搜索之“图搜图”实战

Elasticsearch 8.X “图搜图”实战 1、什么是图搜图&#xff1f; "图搜图"指的是通过图像搜索的一种方法&#xff0c;用户可以通过上传一张图片&#xff0c;搜索引擎会返回类似或者相关的图片结果。这种搜索方式不需要用户输入文字&#xff0c;而是通过比较图片的视…...

LLM之RAG实战(十三)| 利用MongoDB矢量搜索实现RAG高级检索

想象一下&#xff0c;你是一名侦探&#xff0c;身处庞大的信息世界&#xff0c;试图在堆积如山的数据中找到隐藏的一条重要线索&#xff0c;这就是检索增强生成&#xff08;RAG&#xff09;发挥作用的地方&#xff0c;它就像你在人工智能和语言模型世界中的可靠助手。但即使是最…...

UI动效设计师通往高薪之路,AE设计从基础到进阶教学

一、教程描述 UI动效设计&#xff0c;顾名思义即动态效果的设计&#xff0c;用户界面上所有运动的效果&#xff0c;也可以视其为界面设计与动态设计的交集&#xff0c;或者可以简单理解为UI设计中的动画效果&#xff0c;是UI设计中不可或缺的组成部分。现在UI设计的要求越来越…...

APK多渠道加固打包笔记之360加固宝

知识储备 首先需要知道V1,V2,V3签名的区别&#xff0c;可以参考之前的文章&#xff1a;AndroidV1,V2,V3签名原理详解 前言&#xff1a;一般开发者会指定使用自己创建的证书&#xff0c;如果没有指定&#xff0c;则会默认使用系统的证书&#xff0c;该默认的证书存储在C:\Users…...

编程天赋和努力哪个更重要?

编程天赋和努力在编程中都非常重要&#xff0c;但它们的侧重点不同。 编程天赋通常指的是与生俱来的、在逻辑思维、抽象思维、创造力等方面的能力&#xff0c;这些能力可以帮助程序员更快地理解问题、更高效地设计和实现解决方案。天赋的确可以帮助程序员更容易地入门和更快地掌…...

屋顶变身“发电站” ,中天合创屋面分布式光伏发电项目顺利并网!

5月28日&#xff0c;中天合创屋面分布式光伏发电项目顺利并网发电&#xff0c;该项目位于内蒙古自治区鄂尔多斯市乌审旗&#xff0c;项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站&#xff0c;总装机容量为9.96MWp。 项目投运后&#xff0c;每年可节约标煤3670…...

多种风格导航菜单 HTML 实现(附源码)

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

华为云Flexus+DeepSeek征文|DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色&#xff0c;华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型&#xff0c;能助力我们轻松驾驭 DeepSeek-V3/R1&#xff0c;本文中将分享如何…...

嵌入式学习笔记DAY33(网络编程——TCP)

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

用鸿蒙HarmonyOS5实现中国象棋小游戏的过程

下面是一个基于鸿蒙OS (HarmonyOS) 的中国象棋小游戏的实现代码。这个实现使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chinesechess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├──…...

6个月Python学习计划 Day 16 - 面向对象编程(OOP)基础

第三周 Day 3 &#x1f3af; 今日目标 理解类&#xff08;class&#xff09;和对象&#xff08;object&#xff09;的关系学会定义类的属性、方法和构造函数&#xff08;init&#xff09;掌握对象的创建与使用初识封装、继承和多态的基本概念&#xff08;预告&#xff09; &a…...

k8s从入门到放弃之HPA控制器

k8s从入门到放弃之HPA控制器 Kubernetes中的Horizontal Pod Autoscaler (HPA)控制器是一种用于自动扩展部署、副本集或复制控制器中Pod数量的机制。它可以根据观察到的CPU利用率&#xff08;或其他自定义指标&#xff09;来调整这些对象的规模&#xff0c;从而帮助应用程序在负…...

32单片机——基本定时器

STM32F103有众多的定时器&#xff0c;其中包括2个基本定时器&#xff08;TIM6和TIM7&#xff09;、4个通用定时器&#xff08;TIM2~TIM5&#xff09;、2个高级控制定时器&#xff08;TIM1和TIM8&#xff09;&#xff0c;这些定时器彼此完全独立&#xff0c;不共享任何资源 1、定…...

一些实用的chrome扩展0x01

简介 浏览器扩展程序有助于自动化任务、查找隐藏的漏洞、隐藏自身痕迹。以下列出了一些必备扩展程序&#xff0c;无论是测试应用程序、搜寻漏洞还是收集情报&#xff0c;它们都能提升工作流程。 FoxyProxy 代理管理工具&#xff0c;此扩展简化了使用代理&#xff08;如 Burp…...

6.9-QT模拟计算器

源码: 头文件: widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QMouseEvent>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent nullptr);…...