文件下载的三种方式,前端和后端实现
来源:互联网 发布:植物精灵 mac 编辑:程序博客网 时间:2024/05/18 04:52
1.第一种方法是前后端的接口只给了一个API请求:
前端第一个实现是使用a标签,
<a href="/downloadfilerouter"></a>
前端第二个实现是使用一个div标签,使用click事件,创建一个a标签
<div name="downloadfile" onclick="downloadFileFunction()">DownLoader</div>
function downloadFileFunction() {
let a = document.createElement('a');
a.href = '/downloadfilerouter';
a.click();
}
后端使用nodejs,我在这里把下载的文件固定了,也可以自己传人一个变量进入,在这里需要导入两个模块
var fs = require('fs');
var path = require('path');
router.get('/downloadfilerouter', function (req, res, next) {
var filename = 'desktop.ini';
var filepath = path.join(__dirname, '../uploader/' + filename);
var stats = fs.statSync(filepath);
if (stats.isFile()) {
res.set({
'Content-Type': 'application/octet-stream',
'Content-Disposition': 'attachment; filename=' + filename,
"Content-Length": stats.size
});
fs.createReadStream(filepath).pipe(res);
} else {
res.end(404);
}
});
<a name="download" (click)="downloadfile()"></a>
downloadfile(){
this.filecontent = "this is my file content";
this.url = "localhost:8000/home/home/file.txt";
let a = document.createElement('a');
a.href = "data:text/json;charset=utf-8,"+ this.filecontent;
a.download = "myfilename";
a.click();
}
3.第三种方法和第一种类似,只是创建的是一个iframe,有兴趣可以尝试一下
<a name="download" (click)="downloadfile()"></a>
downloadfile(){
this.url = "localhost:8000/home/home/file.txt";
let elem = document.createElement('iframe');
elem.src = url;
elem.style.display = 'none';
document.body.appendChild(elem);
}
前两种方法详见:https://github.com/wuyoujie/application
- 文件下载的三种方式,前端和后端实现
- 前端和后端分工的三种模式
- AJAX实现文件下载的三种方式
- 已知一个下载文件的后端接口,前端如何请求该接口,实现点击按钮、下载文件到本地。
- 文件下载的三种方式
- php后端强制前端下载文件
- Android 下载的三种实现方式(文件流的读写方式下载,用DownloadManager下载,用管道的方式下载)
- 后端springmvc,前端html5的FormData实现文件断点上传
- html中转义字符的处理 前端和后端两种处理方式
- java web 前端访问后端的几种方式
- servlet上传功能前端和后端的实现
- 前端js文件合并三种方式
- 前端发送get和post请求的三种方式
- SSM-后端接收前端传递的文件
- Meteor 前端 RESTful API 通过后端 API 下载文件
- 电子商务网站的设计与实现(三):四大子系统,登录-账务-前端-后端
- 电子商务网站的设计与实现(三):四大子系统,登录-账务-前端-后端
- 小文件下载(三种方式)
- hihoCoder Challenge 27 #1469 : 福字 dp
- 数论常见定理汇总
- 常用地址(java)
- [leetCode刷题笔记]2017.02.21
- MBProgressHUD的基本使用
- 文件下载的三种方式,前端和后端实现
- 八数码难题
- 面试题七种方式实现Singleton模式
- C语言------#acm在线#
- 皮皮学Web第三弹——ServletConfig
- head first python第五章
- Android开发中的性能优化
- 求模运算--小整理
- Qt5 TcpSocket 客户端/服务器 通讯实例