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

小张快跑。2024-08-17 10:25

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

直接上代码：

javascript 复制代码

    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属性就是后端返回的服务器路径

总结：

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

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