javascript - 如何从 iframe 中设置 Chrome 打印对话框的默认文件名？

Question

我正在开发一个项目，我的部分项目是 iframe 中的仪表板。我请求仅将我正在处理的 iframe 导出为 PDF(也就是说，仅显示 iframe 内容，而不显示其周围的包装内容)。我已经使用一些 jQuery 让它工作了，但是 我现在很难设置默认文件名以保存为 PDF。 This SO answer很有帮助(当页面不在 iframe 中时，设置 document.title 有效)，但在 iframe View 中单击导出按钮时，它不起作用。这是我尝试过的示例:

$('#export-button').click(function() {
    $('#iframe-contents').show();
    document.title = 'default_filename';
    window.print();
});

有谁知道在 iframe 中调用 window.print() 时如何在 Chrome 打印对话框中设置默认文件名？

Answer 1

Firefox 确实将 pdf 名称直接设置为 iframe 文档的名称，奇怪的是 chrome 却没有。

要解决此问题，如果您的 iframe 与父页面同源，您可以使用:

document.title = window.parent.document.title = "yourTitle";

如果它们不具有相同的起源，你就会陷入困境。

实际上，即使对于涉及 window.open() 的跨源框架，也有一个 hack，因此在没有“allow-popups”权限的情况下无法在沙盒 iframe 中工作。

function renameIframedPrint(title) {
  var title = "myFile";
  try {
    // same-origin frame
    document.title = window.parent.document.title = title;
    print();
  } catch (e) { // cross-origin frame

    // we could instead grab the current content of the page
    // but for the demo, location.href will do
    var p = window.open(location.href);
    p.onload = function() {
      // no more frame so we don't care ;-)
      p.document.title = "myFile";
      // a bit more hack to close the popup once printed...
      function closePopup() {
        p.close();
      }
      if ('onafterprint' in p) {
        // FF and IE
        p.onafterprint = closePopup
      } else {
        // webkit don't support onafterprint
        var mediaQueryList = p.matchMedia('print');
        mediaQueryList.addListener(mqlListener);

        function mqlListener(mql) {
          if (!mql.matches) {
            closePopup();
            mediaQueryList.removeListener(mqlListener);
          }
        }
      }
    }
    // we're ready
    p.print();
  };
}

External Live Demo ，因为 open() 无法在 stack-snippet 的沙盒 iframe 中工作。