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

当使用iframe嵌入PDF文件进行打印时，可能会遇到跨域错误。这是因为浏览器的同源策略限制了从不同源加载的文档之间的交互。为了解决这个问题，你可以尝试以下方法：

1. 将PDF转换为Blob数据：
   通过fetch API获取PDF文件，并将其转换为Blob数据。然后，使用URL.createObjectURL(blobData)创建一个本地的对象URL。这个URL是同源的，因此可以在iframe中使用而不会引发跨域错误。
2. 使用隐藏的iframe进行打印：
   创建一个隐藏的iframe元素，并将其src属性设置为上一步创建的本地对象URL。在iframe加载完成后，调用其contentWindow的print()方法进行打印。

以下是一个示例代码：

function printPDF() {
  fetch('https://example.com/path/to/your/pdf') // 替换为你的PDF文件URL
    .then(response => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.blob(); // 获取二进制数据
    })
    .then(blobData => {
      const PDF_URL = URL.createObjectURL(blobData); // 创建一个本地的对象URL
      const iframe = document.createElement('iframe'); // 创建一个隐藏的iframe元素
      iframe.onload = function() {
        iframe.contentWindow.print(); // 在iframe加载完成后进行打印
      };
      iframe.style.display = 'none';
      iframe.src = PDF_URL; // 将iframe的src设置为本地对象URL
      document.body.appendChild(iframe); // 将iframe添加到页面中
    })
    .catch(error => {
      console.error('Error fetching and printing PDF:', error);
    });
}

调用printPDF()函数即可开始打印过程。请注意，你需要将代码中的PDF文件URL替换为你自己的URL。此外，由于跨域问题和浏览器的安全策略，这种方法可能不在所有情况下都有效。如果遇到问题，请检查你的服务器配置和浏览器的安全设置。