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

简介: 前几天有个小伙伴找我,他在项目中想让一个视频文件点击下载时不是弹出新页面,而是提示下载,问我咋整。其实,解决办法很简单,就是在后端设置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);
相关文章
|
2月前
|
存储 前端开发 Java
Java后端如何进行文件上传和下载 —— 本地版(文末配绝对能用的源码,超详细,超好用,一看就懂,博主在线解答) 文件如何预览和下载?(超简单教程)
本文详细介绍了在Java后端进行文件上传和下载的实现方法,包括文件上传保存到本地的完整流程、文件下载的代码实现,以及如何处理文件预览、下载大小限制和运行失败的问题,并提供了完整的代码示例。
664 1
|
2月前
|
前端开发 Java
学习SpringMVC,建立连接,请求,响应 SpringBoot初学,如何前后端交互(后端版)?最简单的能通过网址访问的后端服务器代码举例
文章介绍了如何使用SpringBoot创建简单的后端服务器来处理HTTP请求,包括建立连接、编写Controller处理请求,并返回响应给前端或网址。
56 0
学习SpringMVC,建立连接,请求,响应 SpringBoot初学,如何前后端交互(后端版)?最简单的能通过网址访问的后端服务器代码举例
|
3月前
|
存储 前端开发 API
探索后端技术:构建高效系统的关键路径
在数字化时代,后端技术作为软件架构的核心支柱,承载着处理数据逻辑、服务前端应用和确保系统稳定运行的重要职责。本文将深入浅出地介绍后端技术的基础知识、关键组件以及在实际项目中的应用实践,旨在为开发者提供一条清晰的学习路径,助力其构建高效、可扩展的后端系统。通过案例分析和最佳实践的分享,我们将揭示如何运用现代后端技术解决复杂业务问题,提升用户体验,并推动企业的数字化转型进程。
|
4月前
|
开发框架 缓存 前端开发
基于SqlSugar的开发框架循序渐进介绍(21)-- 在工作流列表页面中增加一些转义信息的输出,在后端进行内容转换
基于SqlSugar的开发框架循序渐进介绍(21)-- 在工作流列表页面中增加一些转义信息的输出,在后端进行内容转换
|
5月前
|
存储 开发框架 前端开发
基于SqlSugar的开发框架循序渐进介绍(10)-- 利用axios组件的封装,实现对后端API数据的访问和基类的统一封装处理
基于SqlSugar的开发框架循序渐进介绍(10)-- 利用axios组件的封装,实现对后端API数据的访问和基类的统一封装处理
|
5月前
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理
循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理
|
4月前
|
API
【Azure API 管理】在 Azure API 管理中使用 OAuth 2.0 授权和 Azure AD 保护 Web API 后端,在请求中携带Token访问后报401的错误
【Azure API 管理】在 Azure API 管理中使用 OAuth 2.0 授权和 Azure AD 保护 Web API 后端,在请求中携带Token访问后报401的错误
|
4月前
|
开发框架 前端开发 API
使用代码生成工具快速开发应用-结合后端Web API提供接口和前端页面快速生成,实现通用的业务编码规则管理
使用代码生成工具快速开发应用-结合后端Web API提供接口和前端页面快速生成,实现通用的业务编码规则管理
|
5月前
|
前端开发 应用服务中间件 nginx
网页设计,若依项目修改(It must be done)01----若依打包位置,nginx代理前端静态资源和后端接口,就是怎样设置转载,访问固定端口,让他访问其他资料的配置文件,访问/,给你那些
网页设计,若依项目修改(It must be done)01----若依打包位置,nginx代理前端静态资源和后端接口,就是怎样设置转载,访问固定端口,让他访问其他资料的配置文件,访问/,给你那些
|
5月前
|
前端开发 JavaScript Linux
若依修改之后,无法访问前端项目如何解决,只能访问后端的接口,我的接口8083,端不显示咋解决?在vue.config.js文件中的映射路径要跟后端匹配,到软件商店里找到Ngnix配置代理,设80不用加
若依修改之后,无法访问前端项目如何解决,只能访问后端的接口,我的接口8083,端不显示咋解决?在vue.config.js文件中的映射路径要跟后端匹配,到软件商店里找到Ngnix配置代理,设80不用加

热门文章

最新文章