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

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

目录

• 报错如下：
• 解决方法：
• 附：iframe打印pdf跨域问题，使用blob流转为同源
• 总结 

报错如下：

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打印报跨域错误内容请搜索3672js教程以前的文章或继续浏览下面的相关文章希望大家以后多多支持3672js教程！

您可能感兴趣的文章:

• js调用iframe实现打印页面内容的方法
• JavaScript打印iframe内容示例代码