使用 javascript 打印文件答案

【问题标题】：Print files with javascript使用 javascript 打印文件
【发布时间】：2018-01-18 22:58:26
【问题描述】：

我需要使用 javascript 和 iframe 动态打印一些文件。文件列表是 AJAX 调用的响应。我无法避免出现此错误：

_SecurityError: Permission denied to access property "document" on cross-origin object_

来自浏览器。这是我的代码的一部分：

$('.js-print_box').html('<iframe class="js-print_frame" name="iprint" src="print?' + params.join('&') + '" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" width="0" height="0"></iframe>');

$('.js-print_box').append(data.preplanFilesContent);

var iframeEls = document.querySelectorAll('.js-print_frame');
if (iframeEls) {
  for (i = 0; i < iframeEls.length; i++) {
    iframeEl = iframeEls[i];
    $(iframeEl).load(function() {
       var result = iframeEl.contentWindow.document.execCommand('print', false, null);
       if (!result) {
         iframeEl.contentWindow.print();
       }
    });
  }
}

【问题讨论】：

标签： javascript iframe printing

【解决方案1】：

由于“同源政策”，您将无法修改和访问 iframe 中的其他网站。如果您使用某种类型的 MVC，则可能存在允许请求 iframe 的源的配置。

这是为了防止Cross-site Scripting。

这是一个服务器端问题。您需要确定是否可以在服务器端编辑配置以允许源加载 iframe。

您需要这样做，以便您发出请求时的预检请求以 HTTP 200 状态代码的形式返回。

如果您查看网络选项卡，您的预检请求可能会失败。 iframe 来源的服务器需要接受“Access-Control-Allow-Origin”标头以及请求的来源（您的页面），作为跨站点请求的可接受来源。

Access-Control-Allow-Origin

CORS Policy

花一些时间阅读这些主题可能会让您更好地了解这些技术的工作原理！

【讨论】：

感谢您的提问。我阅读了这些文档，但我无法弄清楚我需要在哪里设置这些标题。在 AJAX 网址上？在视图中？我正在使用 Yii，我需要打印的文件在 Web 应用所在的同一台服务器上
我相信这就是您所需要的。 yiiframework.com/forum/index.php/topic/…。这应该是服务器端配置。这意味着它应该在 Yii 配置代码中。应该有一个 Cors 类，你可以在 Yii 框架中用作中间件来允许这样做。即使在同一台服务器上，也要确保它们是相同的协议、相同的主机、相同的域！
我从来没有使用过 Yii 框架，所以在细节方面我无法提供太多帮助。

【解决方案2】：

我将动态 iframe 替换为

<object data="https://static.googleusercontent.com/media/research.google.com/en//pubs/archive/44678.pdf" type="application/pdf">
<iframe src="https://docs.google.com/viewer?url=https://static.googleusercontent.com/media/research.google.com/en//pubs/archive/44678.pdf&embedded=true"></iframe>

在此处查看代码 https://jsfiddle.net/zwdq69q0/

【讨论】：