浏览器内置的 PDF 阅读器如何指定下载文件名

通常在下载附件的时候，我们通过 a 标签的 download 属性来设置文件名。

但如果直接通过 window.open() 打开 PDF 链接，页面将会被浏览器自带的 PDF 阅读器接管。

这意味着下载功能的文件名变得不可控。

解决方案

其实可以在服务端通过设置响应头来指定文件名。
关键在于：

'Content-Disposition': 'attachment; filename="example.pdf"'

// 注意：这是 next.js 的服务端代码
export async function GET() {
  const url = "https:xxx.pdf";
  const response = await fetch(url);
  const blob = await response.blob();

  // 设置所需的响应头
  const headers = {
    "Content-Type": "application/pdf",
    "Content-Disposition": 'inline; filename="example.pdf"',
  };

  return new Response(blob, { headers });
}

两个知识点

关于 Content-Disposition

inline 可以让浏览器打开预览该 PDF，attachment 则会触发浏览器的另存。

Content-Disposition: inline
Content-Disposition: attachment
Content-Disposition: attachment; filename="filename.jpg"

更多内容参考 MDN。

关于 Response 对象

一个在前端几乎不会用的 API，但在服务端的 JS 却常用。

new Response(body, init)

具体见 https://developer.mozilla.org/zh-CN/docs/Web/API/Response/Response