欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 房产 > 建筑 > 手写一个打印PDF方法,完美解决跨域问题

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

2024/10/25 17:18:36 来源:https://blog.csdn.net/io_123io_123/article/details/141253077  浏览:    关键词:手写一个打印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属性就是后端返回的服务器路径

总结:

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

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

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com