html5+js前端文件下载附源码
日期:2018-10-27
来源:程序思维浏览:3010次
最近在开发程序,遇到了一些问题,在做文件下载时比如下载txt文件和图片a标签链接肯定是不行的,因为会在浏览器上面直接打开,正常情况应该是后台给接口前端来调用就ok了,但是现在后端比较懒不做下载功能让前端来做下载,那么前端如何做下载呢?今天给大家分享一下:
方法一:
<a href="web.txt" download="web前端发展前景.txt">普通下载</a>
href:后台的下载地址
download:下载后的文件名
利用a标签的download属性做下载,简单易用,但是不兼容IE。
方法二:
<a onclick="binaryFile('text','web前端发展前景.txt')">二进制下载</a>
<script>
//content是后台传过来的二进制内容
function binaryFile(content,fileName){
var blob = new Blob([content]);
//如果是IE10+用msSaveBlob方法
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, fileName);
} else {//其他浏览器
// 创建隐藏的可下载链接
var eleLink = document.createElement('a');
eleLink.download = fileName;
// 字符内容转变成blob地址
var blob = new Blob([content]);
eleLink.href = URL.createObjectURL(blob);
// 触发点击
document.body.appendChild(eleLink);
eleLink.click();
// 然后移除
document.body.removeChild(eleLink);
}
}
</script>
这个方法可以兼容IE,但是需要后台给的文件是二进制格式,并不是文件路径,这个方法是我在实际开发中使用的,当时后台给我返回的数据就是二进制。
好了就说到这里,对了如果是低版本浏览器做下载最好还是后台来解决吧。
代码下载
方法一:
<a href="web.txt" download="web前端发展前景.txt">普通下载</a>
href:后台的下载地址
download:下载后的文件名
利用a标签的download属性做下载,简单易用,但是不兼容IE。
方法二:
<a onclick="binaryFile('text','web前端发展前景.txt')">二进制下载</a>
<script>
//content是后台传过来的二进制内容
function binaryFile(content,fileName){
var blob = new Blob([content]);
//如果是IE10+用msSaveBlob方法
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, fileName);
} else {//其他浏览器
// 创建隐藏的可下载链接
var eleLink = document.createElement('a');
eleLink.download = fileName;
// 字符内容转变成blob地址
var blob = new Blob([content]);
eleLink.href = URL.createObjectURL(blob);
// 触发点击
document.body.appendChild(eleLink);
eleLink.click();
// 然后移除
document.body.removeChild(eleLink);
}
}
</script>
这个方法可以兼容IE,但是需要后台给的文件是二进制格式,并不是文件路径,这个方法是我在实际开发中使用的,当时后台给我返回的数据就是二进制。
好了就说到这里,对了如果是低版本浏览器做下载最好还是后台来解决吧。
代码下载
精品好课