如何实现浏览器预览PDF并在下载时使用自定义文件名

问题分析 #

当前代码中，不设置Content-Disposition时，浏览器会直接预览PDF，但用户下载时文件名由浏览器自动生成（通常是URL路径名或默认名）；设置Content-Disposition: attachment会强制文件直接下载，无法先预览。要满足「先预览+用户主动下载+默认文件名」的需求，可采用以下两种方案：

方案一：前端预览按钮 + 独立下载接口 #

1. 预览接口（保持现有逻辑）
   后端提供预览接口，不设置Content-Disposition，让浏览器直接渲染PDF：

   var data = fs.readFileSync('/Users/my/Desktop/demo.pdf');
   res.contentType("application/pdf");
   res.send(data);
   

2. 新增下载接口
   单独写一个用于触发下载的接口，设置Content-Disposition: attachment指定默认文件名：

   var data = fs.readFileSync('/Users/my/Desktop/demo.pdf');
   res.contentType("application/pdf");
   res.setHeader('Content-Disposition', 'attachment; filename=my.pdf');
   res.send(data);
   

3. 前端配合
   在PDF预览页面添加一个下载按钮，点击时请求上述下载接口，用户即可在预览后主动触发带默认文件名的下载。

方案二：利用浏览器PDF预览器原生功能（更简洁） #

直接设置Content-Disposition: inline并指定文件名，浏览器会先预览PDF，当用户点击预览器内置的下载按钮时，会自动使用指定的默认文件名：

var data = fs.readFileSync('/Users/my/Desktop/demo.pdf');
res.contentType("application/pdf");
res.setHeader('Content-Disposition', 'inline; filename=my.pdf');
res.send(data);

说明：inline表示允许浏览器直接预览资源，同时附带的filename参数会被浏览器下载功能采纳，无需额外前端开发。

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