如何使文件直接在浏览器中预览或下载
如何使文件直接在浏览器中预览,而不是下载?
首先请正确配置 Content-Type 头部,并且文件的 Content-Disposition 头部的参数值设置为
inline
(浏览器默认值,表示浏览器应该尝试打开内容),当浏览器支持打开当前文件的格式时,浏览器会直接打开该文件,而不是直接下载。如何使文件直接在浏览器中下载,而不是预览?
您可以通过Content-Disposition 参数值设为
attachment
(表示浏览器应该提示用户下载内容)
Content-type
指示资源的MIME类型,指示传输内容的类型
例:application/vnd.ms-excel; charset=utf-8,表示EXCEL类型
<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); } });