双鱼座的天蝎

导航

如何使文件直接在浏览器中预览或下载

 

如何使文件直接在浏览器中预览,而不是下载?

首先请正确配置 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);
    }
});

 





 

posted on 2024-03-06 14:27  双鱼座的天蝎  阅读(361)  评论(0编辑  收藏  举报