JS打印iframe内嵌PDF时修改Save as PDF默认文件名的方法

出现默认文件名是DownloadReport的原因是浏览器会把iframe加载路径的最后一段作为默认的保存文件名，可通过以下两种方案解决： #

方案1：后端修改响应头（最推荐，兼容性最高） #

直接在/Employee/DownloadReport接口返回PDF响应时，添加Content-Disposition响应头即可，样例如下：

Content-Disposition: inline; filename=这里替换成实际的employeeId.pdf

说明：

• inline参数表示让浏览器直接打开PDF文件而不是触发下载，符合你当前iframe加载的场景
• filename参数指定的名称会被浏览器识别为默认文件名，不管是直接下载还是打印时选择「另存为PDF」都会生效

如果是.NET后端的写法参考：

public IActionResult DownloadReport(int id, bool isEmp, string act)
{
    byte[] pdfBytes = GetPdfReportBytes(id);
    Response.Headers.Add("Content-Disposition", $"inline; filename={id}.pdf");
    return File(pdfBytes, "application/pdf");
}

方案2：前端适配（后端无法修改时使用） #

如果不方便调整后端接口，可以先通过接口把PDF的二进制流拉取到前端，生成自定义的Blob URL再赋值给iframe，调整后的JS代码如下：

// 发起请求拉取PDF二进制流
fetch(`/Employee/DownloadReport?id=${empid}&isEmp=${flag}&act=print`)
  .then(response => response.blob())
  .then(pdfBlob => {
    // 生成Blob URL
    const pdfUrl = URL.createObjectURL(pdfBlob);
    const printFrame = $('#printFrame');
    printFrame.attr('src', pdfUrl);
    printFrame.on('load', function() {
      window.frames['frm'].focus();
      window.frames['frm'].print();
      // 打印完成后释放Blob URL，避免内存泄漏
      setTimeout(() => URL.revokeObjectURL(pdfUrl), 1000);
    });
  });

如果部分浏览器还是没有识别到自定义文件名，可以额外要求后端生成PDF文件时，将PDF的内置标题属性设置为对应的employeeId，浏览器打印时也会优先读取PDF的内置标题作为默认文件名。

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