最近在项目上遇到一个棘手的问题:系统之前的打印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
// 打开一个新窗口并加载 URL
const 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属性就是后端返回的服务器路径
总结:
遇到这种跨域问题,可以问一下后端,一般都是后端处理这种问题,我解决完这个问题之后,问了其他后端,给到的反馈是后端之前解决过这种问题,只是跟我对接的这个后端不知道。
为了避免遇到这种情况跟后端扯皮,我还是选择前端自己想办法解决算了、、、