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

跨域错误通常发生在尝试从不同的域（域名、协议或端口不同）加载资源时。在这种情况下，你可能在尝试通过iframe嵌入一个PDF文件，而该PDF文件与你的网页不同源。

为了解决这个问题，你可以考虑以下几种方法：

1. CORS设置：如果PDF文件的服务器支持跨源资源共享（CORS），你可以配置服务器以允许你的网页域进行资源共享。
2. 代理服务：在你自己的服务器上创建一个代理服务，该服务可以请求PDF文件并返回它，从而避免跨域问题。
3. PDF.js库：使用PDF.js等客户端PDF处理库直接在客户端加载和渲染PDF，而不是通过iframe。

以下是使用代理服务的简单示例：

假设你有一个API端点/proxy-pdf，它可以在服务器端获取PDF文件并返回。

// 前端JavaScript代码
const iframe = document.createElement('iframe');
iframe.style.display = 'none'; // 确保iframe不可见
iframe.onload = function() {
  // iframe加载完成后，可以将iframe中的PDF内容打印出来
  const printWindow = iframe.contentWindow;
  printWindow.print();
};
iframe.src = '/proxy-pdf?url=' + encodeURIComponent('http://example.com/pdf-file.pdf');
document.body.appendChild(iframe);

// 服务器端代码（示例使用Node.js和Express）
const express = require('express');
const axios = require('axios');
const app = express();
 
app.get('/proxy-pdf', async (req, res) => {
  const pdfUrl = req.query.url;
  const response = await axios({
    url: pdfUrl,
    responseType: 'stream',
  });
  res.setHeader('Content-Type', 'application/pdf');
  response.data.pipe(res);
});
 
app.listen(3000);

确保服务器正确配置以允许跨域请求，并且客户端有权获取代理后的PDF文件。这样，当用户尝试打印时，实际上是在打印服务器端获取的PDF文件，从而避免了跨域问题。