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

Qwen3.5-4B-Claude-Opus应用场景:技术博客选题生成、文章大纲结构化输出

Qwen3.5-4B-Claude-Opus应用场景&#xff1a;技术博客选题生成与文章大纲结构化输出 1. 模型概述与核心能力 Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF是基于Qwen3.5-4B的推理蒸馏模型&#xff0c;特别强化了结构化分析和逻辑推理能力。这个经过优化的版本以GGUF…...

wan2.1-vae开源可部署:支持国产操作系统(麒麟/UOS)的适配方案

wan2.1-vae开源可部署&#xff1a;支持国产操作系统&#xff08;麒麟/UOS&#xff09;的适配方案 1. 平台介绍 muse/wan2.1-vae 文生图是基于 Qwen-Image-2512 模型的AI图像生成平台&#xff0c;支持中英文提示词&#xff0c;可生成高质量、高分辨率的图像。该平台特别针对国…...

从“连连看”到DFA最小化:一个游戏化思路帮你彻底理解状态等价

从“连连看”到DFA最小化&#xff1a;用游戏化思维破解编译原理难题 编译原理作为计算机科学的核心课程之一&#xff0c;常常让初学者望而生畏。特别是当教材开始讨论"确定性有限自动机&#xff08;DFA&#xff09;最小化"这类概念时&#xff0c;那些抽象的状态转换图…...

Go语言广播系统设计:基于Channel的高性能事件分发机制

引言 在后端系统架构中&#xff0c;事件广播是一种常见的通信模式。本文将深入分析一个基于Go语言channel实现的广播管理器&#xff0c;探讨其设计思想、实现细节以及在实际项目中的应用价值。 参考代码 点击直达 背景与需求 在许多应用场景中&#xff0c;我们需要实现一对…...

LangChainJS智能代理开发:构建自主决策的AI系统完整指南

LangChainJS智能代理开发&#xff1a;构建自主决策的AI系统完整指南 【免费下载链接】langchainjs 项目地址: https://gitcode.com/GitHub_Trending/la/langchainjs LangChainJS是一个强大的JavaScript/TypeScript框架&#xff0c;专门用于构建基于大语言模型&#xff…...

如何用WechatFerry构建企业级微信自动化解决方案

如何用WechatFerry构建企业级微信自动化解决方案 【免费下载链接】wechatferry 基于 WechatFerry 的微信机器人底层框架 项目地址: https://gitcode.com/gh_mirrors/wec/wechatferry 一、场景化价值&#xff1a;从业务痛点到自动化突破 在数字化转型加速的今天&#xf…...

手把手教你windows下如何部署copaw

前言&#xff1a; 本文内容主要讲解通过手工部署python并使用pip安装部署copaw&#xff0c;在官网有一键部署脚本等等教程&#xff0c;都很方便&#xff0c;但为什么作者要通过手工部署python环境&#xff0c;原因很简单&#xff0c;解决环境冲突的问题&#xff0c;通过conda能…...

轻量级二维码工具性能优化:从加载到部署的全流程实践

轻量级二维码工具性能优化&#xff1a;从加载到部署的全流程实践 【免费下载链接】qrcodejs Cross-browser QRCode generator for javascript 项目地址: https://gitcode.com/gh_mirrors/qr/qrcodejs 二维码生成功能已成为现代Web应用的常见需求&#xff0c;但传统实现方…...

UniApp实战:如何安全高效地在安卓10+设备上实现本地数据存储(附权限配置避坑指南)

UniApp安卓10本地数据存储实战&#xff1a;权限配置与高性能方案设计 当你的UniApp在安卓10设备上突然无法保存用户配置时&#xff0c;控制台那行冰冷的"Permission denied"可能让整个开发团队陷入深夜加班。这不是简单的API调用问题&#xff0c;而是安卓存储机制变革…...

Python调用SM9国密库为何慢?揭秘OpenSSL 3.0+与gmssl 3.2.1在ECC双线性对运算中的3层性能断点

第一章&#xff1a;Python调用SM9国密库性能瓶颈的全局观测在实际政务系统与金融信创项目中&#xff0c;Python通过ctypes或CFFI方式调用国产SM9算法C语言实现&#xff08;如GMSSL或OpenSSL国密分支&#xff09;时&#xff0c;常出现显著的吞吐量下降与高延迟抖动。这种性能退化…...