如何使文件直接在浏览器中预览或下载
如何使文件直接在浏览器中预览,而不是下载?
首先请正确配置 Content-Type 头部,并且文件的 Content-Disposition 头部的参数值设置为
inline
(浏览器默认值,表示浏览器应该尝试打开内容),当浏览器支持打开当前文件的格式时,浏览器会直接打开该文件,而不是直接下载。如何使文件直接在浏览器中下载,而不是预览?
您可以通过Content-Disposition 参数值设为
attachment
(表示浏览器应该提示用户下载内容)
Content-type
指示资源的MIME类型,指示传输内容的类型
例:application/vnd.ms-excel; charset=utf-8,表示EXCEL类型
1 2 3 | < head > < meta http-equiv='Content-Type' content='application/vnd.ms-excel; charset=utf-8' /> </ head > |
Content-Disposition
MIME 协议的扩展,表示服务端指示客户端响应的两种形式
header("Content-Disposition:inline"); //直接在浏览器上显示
header("Content-Disposition:attachment;filename=downloaded.txt"); //以附件的形式下载或保存
示例:
$.ajax({ url: filePath, type: 'GET', xhrFields: { responseType: 'blob' // 重要:设置返回数据类型为blob }, success: function (data) { var blobUrl = window.URL.createObjectURL(data); // 创建一个临时的URL指向blob对象 var downloadLink = document.createElement('a'); // 创建一个链接元素 downloadLink.href = blobUrl; // 设置链接元素属性 downloadLink.download = fileName; // 设置文件名 downloadLink.click(); // 触发点击 window.URL.revokeObjectURL(blobUrl); // 清理 }, error: function (xhr, status, error) { console.error(error); } });
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库