当前位置: 首页 > 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;这些能力可以帮助程序员更快地理解问题、更高效地设计和实现解决方案。天赋的确可以帮助程序员更容易地入门和更快地掌…...

如何快速上手uesave-rs:虚幻引擎存档编辑的终极指南

如何快速上手uesave-rs&#xff1a;虚幻引擎存档编辑的终极指南 【免费下载链接】uesave 项目地址: https://gitcode.com/gh_mirrors/ue/uesave 还在为无法修改心爱游戏的存档而烦恼吗&#xff1f;想要自定义游戏体验却不知从何下手&#xff1f;uesave-rs这款强大的Rus…...

Surface硬盘不够用?教你用cfadisk把SD卡变本地硬盘(附详细图文)

Surface硬盘扩容实战&#xff1a;用cfadisk将SD卡完美变身本地存储 每次打开Surface的存储设置&#xff0c;看到那根触目惊心的红色容量条&#xff0c;相信不少用户都会感到焦虑。作为微软旗下最受欢迎的移动生产力工具&#xff0c;Surface系列在便携性和性能上表现出色&#x…...

Qt官网抽风连不上?亲测有效的Qt6在线安装网络问题终极解决手册

Qt6在线安装网络问题终极解决手册&#xff1a;从反复失败到一次成功 看着Qt安装器上那个刺眼的"无法连接服务器"提示&#xff0c;我第27次点击了重试按钮。作为一名有十年经验的开发者&#xff0c;我从未想过会在安装环境这一步耗费整整一个下午。这不是个例——根据…...

科哥CAM++镜像入门指南:快速搭建中文语音识别系统

CAM镜像入门指南&#xff1a;快速搭建中文语音识别系统 1. 系统概述 CAM说话人识别系统是一个基于深度学习的声纹识别工具&#xff0c;由科哥封装为易用的Docker镜像。它能快速判断两段语音是否来自同一说话人&#xff0c;并提取语音特征向量&#xff0c;适用于身份验证、语音…...

OpenClaw+Qwen3.5-4B-Claude:5个提升效率的CLI增强技能

OpenClawQwen3.5-4B-Claude&#xff1a;5个提升效率的CLI增强技能 1. 为什么需要CLI增强技能 作为一个长期与终端打交道的开发者&#xff0c;我发现自己每天要重复输入大量相似命令。比如查看日志时要反复输入tail -f加路径&#xff0c;管理Docker时要不断敲docker ps -a。更…...

JSON·学习笔记

“误报。我的安全阀一切正常。” “我们继续&#xff0c;今天我想解释一下什么是JSON。” “是啊&#xff0c;这个词我听过很多次了&#xff0c;什么意思&#xff1f;” “随着网络的发展&#xff0c;带有 JavaScript 的 HTML 页面开始主动与服务器通信并从服务器下载数据。为…...

计算机网络 之 【自定义协议、序列化与反序列化】(C++使用JSON示例)

目录 1.自定义协议与序列化/反序列化 2.Json简介 Json是什么 第三方库提供&#xff0c;使用时包含头文件 JSON 的数据类型 JSON结构示例 C使用JSON示例 1.自定义协议与序列化/反序列化 协议的必要性 协议是通信双方的约定&#xff0c;它定义了数据的格式和含义&#xff…...

s2-pro GPU算力适配实战:显存优化部署让语音合成延迟降低40%

s2-pro GPU算力适配实战&#xff1a;显存优化部署让语音合成延迟降低40% 1. 专业语音合成新选择 s2-pro是Fish Audio开源的专业级语音合成模型镜像&#xff0c;它让高质量的文本转语音变得触手可及。与普通语音合成工具不同&#xff0c;s2-pro支持通过参考音频复用音色&#…...

单光子雪崩二极管(SPAD):原理、极高增益机制与微光探测解析

摘要 单光子雪崩二极管(Single-Photon Avalanche Diode, SPAD)是当前量子通信、激光雷达(LiDAR)、生物荧光成像及弱光探测领域的核心器件。其最显著的特征在于能够探测单个光子级别的极微弱光信号。本文将从器件物理层面深入剖析SPAD如何通过工作在“盖革模式”(Geiger M…...

告别格式烦恼:哈工大深圳LaTeX论文模板的6大核心优势

告别格式烦恼&#xff1a;哈工大深圳LaTeX论文模板的6大核心优势 【免费下载链接】hitszthesis A dissertation template for Harbin Institute of Technology, ShenZhen (HITSZ), including bachelor, master and doctor dissertations. 项目地址: https://gitcode.com/gh_m…...