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

Posted 2023-02-22

【中文标题】如何在 iframe 中设置 Chrome 打印对话框的默认文件名？

【英文标题】：How can I set the default filename for the Chrome print dialog from within an iframe?

【发布时间】：2017-06-20 05:59:54

【问题描述】：

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

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

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

【问题讨论】：

为什么在打印对话框中需要一个文件名？ Windows（不确定其他操作系统）甚至不会在打印对话框中显示文件名

为了更好的客户体验。当人们将我的报告导出为 PDF 时，我希望默认文件名包含报告编号和日期，因为报告内容会随时间而变化。在 Mac OS X（我假设在其他操作系统上）中，Chrome 将默认文件名设置为文档标题。例如，如果您尝试打印此页面并另存为 PDF，则 OS X 上的 Chrome 会将默认文件名设置为“javascript - 如何从 iframe_ 中设置 Chrome 打印对话框的默认文件名_ - Stack Overflow.pdf”。

When people export my report ... 哦，我误读了default filename for the Chrome print dialog 的意思是您想要在打印对话框中输入文件名 - 没有意识到问题是关于导出到 PDF

【参考方案1】：

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

对于解决方法，如果您的 iframe 与您的父页面共享同一来源，您可以使用：

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

如果它们的来源不同，你就卡住了。

实际上有一个 hack，即使对于涉及 window.open() 的跨域框架也是如此，因此在没有“允许弹出窗口”许可的情况下无法在沙盒 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-sn-p 的沙盒 iframe 中不起作用。