🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
💡 为什么会触发欣赏器预览而不是下载？
当我们实验在前端实现文件下载时，经常会遇到欣赏器直接打开文件（如 PDF、图片）举行预览，而不是弹出下载框的环境。这通常是由以下两个核心缘故原由导致的：
- HTML5 download 属性的同源限定（核心缘故原由） 根据 W3C 规范， 标签的 download 属性 仅对同源 URL 见效 。如果你的文件地点（好比 OSS 链接、第三方存储或跨域的后端 API）与当前前端页面的域名、端口差别源，欣赏器就会忽略 download 属性，将其视为平凡的页面跳转。对于欣赏器原生支持的格式，就会直接打开预览。
- HTTP 相应头未欺压指定下载 当哀求跨域文件时，欣赏器是否下载取决于服务器返回的 HTTP 相应头。如果服务器返回的 Content-Disposition 的值是 inline （内联展示），大概干脆没有设置该哀求头（只有 Content-Type ），欣赏器就会实验直接渲染该文件。
🛠️ 通例办理方案
方案一：后端处理处罚（🌟 最保举 & 最优雅）
只须要后端在返回该文件的 HTTP 相应头（Response Headers）中，显式指定 Content-Disposition 为 attachment 即可。- Content-Disposition: attachment;
- filename="your_file_name.pdf"
方案二：前端处理处罚（实用于后端无法修改的环境）
如果后端不方便修改相应头，前端可以通过 fetch 或 axios 将文件数据哀求下来转成 Blob 对象，然后生资本地的同源 URL（ blob:http://... ）。如许标签的 download 属性就能完善见效了。
[code]async handleDownload(url, fileName) { if (!url) return; const baseUrl = process.env.VUE_APP_BASE_API || ''; let fullUrl = url; // 补全完备 URL if (!url.startsWith('http://') && !url.startsWith ('https://')) { fullUrl = [baseUrl, url].join('/').replace(/(? ☁️ 针对第三方 OSS 存储的跨域标题
如果文件存放在第三方 OSS 上，直接使用前端 fetch 处理处罚会引发跨域报错吗？
是的！ 如果文件存放在第三方 OSS（如阿里云 OSS、腾讯云 COS、七牛云等）上，直接在前端使用 fetch 去哀求文件流， 大概率会触发 CORS（跨域资源共享）错误 。除非 OSS 服务端明确返回了答应跨域的相应头（ Access-Control-Allow-Origin ），否则欣赏器会拦截这个哀求。
既然文件在 OSS 上，这里提供 3 种主流且优雅的办理方案 （按保举水平从高到低分列）：
方案一：在 OSS 链接后拼接参数欺压下载（🌟 最保举，零跨域、零后端代码）
绝大多数主流 OSS 服务商（阿里云、腾讯云、AWS 等）都支持通过 在 URL 反面拼接参数 的方式，来动态覆盖 HTTP 相应头中的 Content-Disposition 。这意味着你不须要后端改代码，也不须要在前端做复杂的 Blob 转换。
- 阿里云示例 ：在 URL 后追加 ?response-content-disposition=attachment
- 指定文件名 ： ?response-content-disposition=attachment;filename=编码后的文件名.pdf
方案二：设置 OSS 的 CORS 规则（共同前端 Blob 方案）
如果你依然想用前端 fetch 转 Blob 的方式，须要登录 OSS 控制台，设置 跨域设置（CORS） ：
- 泉源 (Origins) ：填入前端项目的域名（开辟环境可填 * ）。
- 答应 Methods ：勾选 GET 。
- 答应 Headers ：填入 * 。 ⚠️ 缺点 ：大文件下载时，前端会先将文件整个吃进内存（Blob），如果文件过大（如几百MB的视频），大概会导致欣赏器内存溢出瓦解。
方案三：后端做一层下载署理（❌ 最不保举）
如果 OSS 无法修改 CORS，且不支持 URL 参数覆盖相应头，只能让后端写一个下载接口，由后端去下载 OSS 文件再流式返回给前端，并附带 Content-Disposition: attachment 。 ⚠️ 缺点 ：极其浪费业务服务器的公网带宽和内存，把原来 OSS 的流量压力转移到了本身的服务器上。
💻 终极实践：接纳【URL拼接参数】方案
综合思量，针对 OSS 存储的文件，我们接纳 方案一（拼接参数）处理处罚即可，完全无需后端修改，也不会有内存溢出的风险。
以下是终极优化后的前端实今世码：
[code]/** * 处理处罚附件下载 * 接纳拼接 response-content-disposition 参数的方式， 欺压 OSS 相应下载头，克制欣赏器跨域预览 * * @param {string} url 附件地点 * @param {string} fileName 附件名称 */handleDownload(url, fileName) { if (!url) return; const baseUrl = process.env.VUE_APP_BASE_API || ''; let fullUrl = url; // 补全非 http(s) 开头的相对路径 if (!url.startsWith('http://') && !url.startsWith ('https://')) { fullUrl = [baseUrl, url].join('/').replace(/(? 如果对您有所资助，接待您点个关注，我会定时更新技能文档，各人一起讨论学习，一起进步。
免责声明：如果侵犯了您的权益，请联系站长及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金. |
发表于 