手写一个打印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
      // 打开一个新窗口并加载 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属性就是后端返回的服务器路径

总结:

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

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

  • 4
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 要解决vue-pdf跨域问题,可以采取以下几种方法: 1. 使用代理服务器:可以在vue.config.js中配置代理服务器,将跨域请求发送到代理服务器上,再由代理服务器去请求pdf文件。这样可以避免直接在前端发起跨域请求,从而解决跨域问题。 2. 设置响应头:在后端服务器中设置Access-Control-Allow-Origin头,允许前端的请求跨域访问。可以设置"*"表示允许所有域名的跨域请求,也可以指定具体的域名。 3. 使用后端接口:将pdf文件存储在后端服务器上,然后通过后端接口去请求pdf文件并返回给前端。这样可以避免直接在前端发起跨域请求。 4. JSONP方式请求:如果后端支持JSONP方式,可以在前端使用JSONP方式去请求pdf文件。JSONP通过动态创建<script>标签实现跨域请求,并且服务器返回的是一段可执行的JavaScript代码。 以上是几种常用的解决vue-pdf跨域问题方法,具体选择哪种方法取决于项目需求和后端支持情况。 ### 回答2: Vue-pdf一个用于在Vue项目中显示PDF的插件。在某些情况下,可能会遇到跨域问题,即无法加载外部PDF文件。以下是解决跨域问题方法: 1. 在Vue项目的配置文件vue.config.js中添加webpack配置。找到configureWebpack选项,添加以下代码: ``` module.exports = { configureWebpack: { devServer: { headers: { "Access-Control-Allow-Origin": "*" } } } } ``` 这将设置允许所有域名访问该服务。请注意,这样做可能会在生产环境中引起安全风险,仅在开发环境中使用。 2. 使用一个代理服务器来代理PDF文件的请求。在vue.config.js中添加以下代码: ``` module.exports = { devServer: { proxy: { '/api': { target: 'http://example.com', changeOrigin: true, pathRewrite: { '^/api': '' } } } } } ``` 这将把以/api开头的请求转发到http://example.com上。确保将http://example.com替换为实际的PDF文件所在的服务器地址。 3. 将PDF文件转换为base64编码格式,然后通过URL.createObjectURL方法将其作为Blob对象传递给vue-pdf。可以使用axios或其他网络请求库来获取PDF文件,并使用FileReader将其转换为base64编码。 以上方法中的任何一种都可以解决跨域问题,需要根据具体情况选择适合的方法。 ### 回答3: 要解决Vue-PDF跨域问题,可以通过设置服务器代理、使用nginx来解决。下面将详细介绍两种方法: 1. 设置服务器代理: 如果Vue项目是使用vue-cli创建的,并且项目使用的是webpack-dev-server作为开发服务器,可以在项目的根目录下创建vue.config.js文件,并在其中添加以下内容: ```javascript module.exports = { devServer: { proxy: { '/api': { // 将/api替换为实际的API请求前缀 target: 'http://example.com', // 设置实际接口的域名 changeOrigin: true, // 允许跨域 secure: false // 关闭SSL验证 } } } } ``` 其中,`/api`是你实际的API请求前缀,`http://example.com`是实际接口的域名。这样,当你在Vue组件中发起API请求时,会自动将请求代理到指定的域名,解决跨域问题。 2. 使用nginx: 如果项目部署在nginx服务器上,可以通过配置nginx来解决跨域问题。首先,打开nginx的配置文件,在`http`块中添加以下内容: ```nginx location /api/ { rewrite ^.+api/?(.*)$ /$1 break; proxy_pass http://example.com/; // 将example.com替换为实际的接口域名 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } ``` 在上述配置中,`/api/`是你实际的API请求前缀,`http://example.com/`是实际接口的域名。这样,当你在Vue组件中发起API请求时,nginx会将请求代理到指定的域名,解决跨域问题。 无论是使用服务器代理还是nginx,都可以解决Vue-PDF跨域问题。根据具体情况选择适合自己项目的方法即可。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值