如何修改嵌入iframe的Web应用另存为PDF时的建议文件名？

可行，但不同主流浏览器的实现逻辑有差异，需要针对性处理：

Chromium系浏览器（Chrome/Edge等） #

这类浏览器会将document.title作为PDF保存的文件名建议，在iframe场景下：

• 同域iframe：直接在iframe内部的beforeprint事件中修改自身标题即可，建议打印后恢复原标题避免影响页面展示：

addEventListener("beforeprint", () => {
  const originalTitle = document.title;
  document.title = "foo.pdf";

  // 打印完成后恢复原标题
  addEventListener("afterprint", () => {
    document.title = originalTitle;
  }, { once: true });
});

• 跨域iframe：受同源策略限制，父页面无法直接修改iframe的标题，需要iframe内部代码配合修改，或通过postMessage通信触发iframe执行标题修改逻辑。

Firefox #

Firefox优先读取页面的<meta name="product">标签内容作为PDF文件名建议，其次才参考document.title，处理方式如下：

• 可以预先在iframe的HTML中设置该meta标签：

<meta name="product" content="foo.pdf">

• 也可以在beforeprint事件中动态修改：

addEventListener("beforeprint", () => {
  let productMeta = document.querySelector('meta[name="product"]');
  if (!productMeta) {
    productMeta = document.createElement('meta');
    productMeta.name = "product";
    document.head.appendChild(productMeta);
  }
  const originalContent = productMeta.content;
  productMeta.content = "foo.pdf";

  // 打印后恢复原内容
  addEventListener("afterprint", () => {
    productMeta.content = originalContent;
  }, { once: true });
});

注意事项 #

• 文件名仅为浏览器的建议，用户仍可手动修改，无法强制锁定。
• 跨域iframe场景下必须依赖iframe内部代码配合，无法绕过同源策略直接操作。
• 部分旧版浏览器可能不支持beforeprint/afterprint事件，建议做兼容性判断。

内容的提问来源于stack exchange，提问作者baitendbidz