浏览器访问路径不提示下载而显示新页面(后端解决方案)

简介: 前几天有个小伙伴找我,他在项目中想让一个视频文件点击下载时不是弹出新页面,而是提示下载,问我咋整。其实,解决办法很简单,就是在后端设置Content-Type为application/octet-stream,因为也不是一个小伙伴问过我这问题了,所以写个DEMO给大家参考参考素材:https://raw.

前几天有个小伙伴找我,他在项目中想让一个视频文件点击下载时不是弹出新页面,而是提示下载,问我咋整。其实,解决办法很简单,就是在后端设置Content-Typeapplication/octet-stream,因为也不是一个小伙伴问过我这问题了,所以写个DEMO给大家参考参考
素材:https://raw.githubusercontent.com/nickdesaulniers/netfix/gh-pages/demo/frag_bunny.mp4

以nodejs代码为例,我将实现访问"/video"时跳转到浏览器的自带播放页面,
当访问"/frag_bunny.mp4"时弹出下载提示

代码:

var http = require('http');
var fs = require('fs');
var url = require('url');

var routes = {//<====路由
    "/video"(request, response) {
        fs.readFile("frag_bunny.mp4", 'binary', function (err, data) {
            if (err) {
                console.log(err);
                response.writeHead(500, { 'Content-Type': 'text/html' });
            } else {
                response.writeHead(200, { 'Content-Type': 'video/mp4' });//<====mp4标识
                response.write(data, 'binary');
            }
            response.end();
        });
    },
    "/frag_bunny.mp4"(request, response) {
        fs.readFile("frag_bunny.mp4", 'binary', function (err, data) {
            if (err) {
                console.log(err);
                response.writeHead(500, { 'Content-Type': 'text/html' });
            } else {
                response.writeHead(200, { 'Content-Type': 'application/octet-stream' });//<====文件流标识
                response.write(data, 'binary');
            }
            response.end();
        });
    },
    "/"(request, response) {
        response.writeHead(200, { 'Content-Type': 'text/html' }); 
        response.write(`
            <a target= "_blank" href="/video">打开页面显示播放界面</a>
            <br />
            <a target= "_blank" href="/frag_bunny.mp4">打开页面提示下载</a>
        `);
        response.end();
    },
    "/404"(request, response) {
        response.writeHead(404, { 'Content-Type': 'text/html' });
        response.write("404");
        response.end();
    }
}
// 创建服务器
http.createServer(function (request, response) {
    // 解析请求,包括文件名
    var pathname = url.parse(request.url).pathname;
    // 输出请求的文件名
    console.log("Request for " + pathname + " received.");
    route = routes[pathname] 
    if (route) {
        route(request, response);
    } else {
        routes["/404"](request, response);
    }
}).listen(8889);
相关文章
|
5天前
|
缓存 JavaScript
vue阻止浏览器刷新和关闭页面提示
使用场景:在使用vuex进行缓存管理时,页面的缓存会随着页面关闭而消失,如果缓存动作仍在进行中,关闭页面会导致数据丢失,此时需要阻止页面关闭
112 3
|
5天前
|
移动开发 小程序 API
微信外部浏览器或短信链接唤起微信小程序的解决方案
微信外部浏览器或短信链接唤起微信小程序的解决方案
193 1
|
5天前
|
前端开发
前端接受后端文件流并下载到本地的方法
前端接受后端文件流并下载到本地的方法
76 0
|
1天前
浏览器兼容性解决方案
浏览器兼容性解决方案。
9 1
|
5天前
|
小程序 应用服务中间件 Linux
【Nginx】微信小程序后端开发、一个域名访问多个服务
【Nginx】微信小程序后端开发、一个域名访问多个服务
18 0
|
5天前
|
网络协议 关系型数据库 Linux
使用PHPStudy搭建本地web网站并实现任意浏览器公网访问
使用PHPStudy搭建本地web网站并实现任意浏览器公网访问
14 0
|
5天前
浏览器兼容性解决方案
【5月更文挑战第4天】浏览器兼容性解决方案。
14 5
|
5天前
|
运维 安全 定位技术
云HIS系统采用B/S架构云端SaaS服务的方式提供,使用用户通过浏览器即能访问
云HIS系统采用B/S架构云端SaaS服务的方式提供,使用用户通过浏览器即能访问
29 2
|
5天前
|
Ubuntu 关系型数据库 MySQL
如何在Ubuntu使用宝塔部署Emlog网站并发布到公网实现任意浏览器访问
如何在Ubuntu使用宝塔部署Emlog网站并发布到公网实现任意浏览器访问
|
5天前
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。

热门文章

最新文章