美文网首页
跨域打印pdf

跨域打印pdf

作者: 大佬啊 | 来源:发表于2020-01-06 23:44 被阅读0次

公司有个需求,能下载能打印pdf,但是公司文件系统部署在其他服务器,与当前前端项目不在一个服务器,于是就产生了目前的问题-跨域怎么操作?

一、需要安装的依赖

print-js: 为了打印使用的js工具库

npm install print-js --save

二、纯前端处理(无效的实验)

暂时没有办法,试过通过一个iframe代理生成实际的iframe,然后在实际iframe的onload方法来打印代理iframe,但是想法很美好,实验结果很残酷,打印imge类型的可以,pdf的话全是白纸,及实际iframe没有加载完毕就执行了代理iframe打印。

帖上尝试的代码,有想法能实现的,请联系我 哈哈

function printIframe(url) {
  const proxyIframe = document.createElement('iframe');
  const body = document.getElementsByTagName('body')[0];
  body.appendChild(proxyIframe);
  proxyIframe.style.width = '100%';
  proxyIframe.style.height = '100%';
  proxyIframe.style.display = 'none';
  const contentWindow = proxyIframe.contentWindow;
  contentWindow.document.open();
  contentWindow.document.write('<iframe id="myifa" src="' + url + '"  width="800" height="900" frameborder="0" marginheight="0" marginwidth="0">');
  contentWindow.onload = function() {
    setTimeout(function() {
      const Iframe = contentWindow.document.getElementById('myifa');
      setTimeout(function() {
        contentWindow.focus();
        contentWindow.print();
      }, 5000);
    }, 0);
  };

  contentWindow.document.close();
}

三、让后台服务器来处理,把数据拿过来然后前端再处理

这种方法是目前笔者试过最有效的办法,虽然效率低,但其至少实现了功能......
实现步骤:
1.通过ajax拿到后台返回的二进制文件流
2.处理得到base64格式的数据
3.通过pdf-js打印

import printJs from 'print-js';
// axios类似于ajax,这里简写了
axios.get('/api/getfile', {
  ...payload,
})
.then(response => {
  // 假设response时后台返回的二级制文件流
  let result;
  const uint8Array = new Uint8Array(response);
  for(let i = 0; i< uint8Array.length; i++) {
    // String.fromCharCode:将 Unicode 编码转为一个字符:
    result += String.fromCharCode(uint8Array[i]);
  }
  let printBase64 = window.btoa(result);
  // 与src里直接放入data:application/pdf;base64 xxxx这样的格式, 真正的base64数据是xxx不包含之前的
  // 如果要是做预览,请自行加上前边类型字段
  printJs({ printable: printBase64, type: 'pdf', base64: true });
})
.catch(error => {
  console.log(error);
});

OVER~

如果你有更好的办法,烦请留言@我了

相关文章

  • 跨域打印pdf

    公司有个需求,能下载能打印pdf,但是公司文件系统部署在其他服务器,与当前前端项目不在一个服务器,于是就产生了目前...

  • pdf.js预览pdf文件

    一、下载pdf.js[http://mozilla.github.io/pdf.js/] 二、使用 跨域问题的解决...

  • 深入跨域问题(3) - 利用 JSONP 解决跨域

    深入跨域问题(1) - 初识 CORS 跨域资源共享;深入跨域问题(2) - 利用 CORS 解决跨域深入跨域问题...

  • 关于设置env等环境变量的思考

    1、如何处理跨域后台处理跨域前端处理跨域浏览器处理跨域 前端本地处理跨域:代理线上跨域的处理方式:Nginx反向代...

  • Web前后端跨域问题处理

    跨域问题有前台跨域(iframe间)和后台跨域。 前台跨域的解决方案可以采用跨域文档通讯(Cross domain...

  • 跨域

    跨域 什么是跨域: 解决跨域 通过jsonp原理:在页面引入跨域js和css时,没有存在跨域问题.因此可以动态创建...

  • 跨域问题详解分析

    参考文档 CORS详解 跨域资源共享 CORS 详解 js中几种实用的跨域方法原理详解 跨域的那些事儿 跨域与跨域...

  • pdf.js远程跨域问题

    远程 PDF 加载的时候失败, 解决办法是本地写一个pdf 的解析器 入口文件, 开启一下,跨域的限制就好

  • 跨域问题:好几种解决方案

    跨域分为广义跨域和狭义跨域 广义跨域:一个域下的文档或脚本试图去请求另一个域下的资源; 广义跨域可以分为以下几种:...

  • ajax readystatus=0;status=0 报错

    跨域 跨域 跨域 一定要找运维或者后台解决

网友评论

      本文标题:跨域打印pdf

      本文链接:https://www.haomeiwen.com/subject/lfvlactx.html