当前位置: 代码网 > it编程>编程语言>Javascript > js解决pdf使用iframe打印报跨域错误问题的方法示例

js解决pdf使用iframe打印报跨域错误问题的方法示例

2024年05月15日 Javascript 我要评论
报错如下:uncaught domexception: failed to read a named property ‘print’ from ‘window&r

报错如下:

uncaught domexception: failed to read a named property ‘print’ from ‘window’: blocked a frame with origin “https://xxxx.com” from accessing a cross-origin frame.
at iframe.onload (:10:26)

解决方法:

把 pdf 转 blob 二进制数据, 通过 createobjecturl 生成本地对象 url, 在创建 iframe 调用打印接口

printpdf()
function printpdf() {
  fetch('https://xxxxx.com/xxxx.pdf')
  .then(response => {
    if (!response.ok) {
      throw new error('network response was not ok');
    } 
    return response.blob(); // 获取二进制数据
  })
  .then(blobdata => {
      // 替换这里的 pdf_url 为你要打印的 pdf 文件链接
      const pdf_url = url.createobjecturl(blobdata);
    
      // 创建一个隐藏的 iframe 元素
      const iframe = document.createelement('iframe');
      // 等待 pdf 加载完成后进行打印
      iframe.onload = function() {
        iframe.contentwindow.print();
      };
      iframe.style.display = 'none';
      iframe.src = pdf_url;
    
      // 将 iframe 添加到页面中
      document.body.appendchild(iframe);
  })
}

附:iframe打印pdf跨域问题,使用blob流转为同源

 <iframe :src="pdfurl2" width="100%" height="700px" id="printme" hidden></iframe>
 <iframe :src="pdfurl" width="100%" height="700px"></iframe>
 
import axios from 'axios'
 axios({
    method: 'get',
    url: this.pdfurl,
    responsetype: 'blob'
  })
   .then(response => {
    this.pdfurl2= window.url.createobjecturl(response.data)
    settimeout(() => { 
      document.getelementbyid('printme').contentwindow.print();
     },2000) 
 
    })
      .catch(function(error) {
       console.log(error)
    })

总结 

到此这篇关于js解决pdf使用iframe打印报跨域错误问题的文章就介绍到这了,更多相关js pdf用iframe打印报跨域错误内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网!

(0)

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com