js解决pdf使用iframe打印报跨域错误问题

舜岳2024-01-10 6:09

报错如下：

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);
  })
}