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

手写一个打印PDF方法,完美解决跨域问题

        最近在项目上遇到一个棘手的问题:系统之前的打印PDF文件功能是好的,但是换了个环境发现坏掉了( ╯□╰ ),很无语!排查问题时,代码跟之前一毛一样,本地使用是没问题的,但是到了服务器上,直接报错了。一查才发现,出现了跨域问题。跟后端沟通,后端说不知道什么问题,那还能怎么办呢,前端解决呗,研究了几天想到一个办法,记录分享一下!!!

        直接上代码:

    toPrint (row) {// 确保 filePath 存在且是有效的if (!row.filePath) {console.error('filePath is missing or invalid')return}let str = row.filePath.split('/').slice(3).join('/')let port = this.webConfig.deployType === 'NGINX' ? '' : ':8880'let url = window.location.protocol + '//' + window.location.host + port + '/api/fp/' + str// 打开一个新窗口并加载 URLconst printWindow = window.open(url, '_blank')if (printWindow) {// 等待一段时间确保新窗口内容加载完成后执行打印setTimeout(() => {if (printWindow.document.readyState === 'complete') {printWindow.print()// 关闭新窗口(可选)// printWindow.close();} else {console.error('New window did not load properly.')}}, 1000) // 1秒钟的延迟,可以根据实际情况调整时间} else {console.error('Failed to open new window for printing')}},

方法原理:

        原理其实很简单:浏览器自带预览PDF文件的功能,并且有下载按钮,我们只要想办法打开PDF文件的预览,再调用它的printWindow.print()方法,即可轻松实现打印功能。

使用方法:

        1、后端返回文件路径即可,这里我们这边预览的时候路径有要求,如果路径不一样可以根据自己的需要修改

        2、调用时,在toPrint方法里面传入一个对象,对象的filePath属性就是后端返回的服务器路径

总结:

        遇到这种跨域问题,可以问一下后端,一般都是后端处理这种问题,我解决完这个问题之后,问了其他后端,给到的反馈是后端之前解决过这种问题,只是跟我对接的这个后端不知道。

        为了避免遇到这种情况跟后端扯皮,我还是选择前端自己想办法解决算了、、、 


http://www.mrgr.cn/news/2684.html

相关文章:

  • 【论文阅读】Retargeting and Respecializing GPU Workloads for Performance Portability
  • 详解华为项目管理,附华为高级项目管理内训材料
  • SwiftUI中 Swift Data 对象关联查询
  • 20240820模拟面试
  • LangGPT结构化提示词
  • Java学习框架
  • 深度学习Day-30:CGAN入门丨生成手势图像丨可控制生成
  • 文档翻译软件哪个好用?后悔没早发现这5款
  • Kubernetes中如何对etcd进行备份和还原
  • 点单小程序搭建教程,叫号+排单+多种插件等功能使用指南
  • 算法笔记|Day26贪心算法IV
  • C语言中的预处理详解
  • 项目实战--SpringBoot整合EasyExcel实现数据导入导出
  • uniapp用户列表页面渲染、增删改查逻辑
  • 边缘计算下的图像识别:实现低延迟的实时智能处理
  • C语言注释的作用,规范编程为什么要善于写注释,经验之谈
  • 使用Linux Systemd部署DotNet Quartz.Net定时任务
  • clickhouse_driver
  • RUST知识框架与学习框架
  • fastadmin 控制器的权限管理