html5+js前端文件下载附源码

来源:程序思维浏览:3010次
最近在开发程序,遇到了一些问题,在做文件下载时比如下载txt文件和图片a标签链接肯定是不行的,因为会在浏览器上面直接打开,正常情况应该是后台给接口前端来调用就ok了,但是现在后端比较懒不做下载功能让前端来做下载,那么前端如何做下载呢?今天给大家分享一下:

html5+js前端文件下载附源码

方法一:

<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,但是需要后台给的文件是二进制格式,并不是文件路径,这个方法是我在实际开发中使用的,当时后台给我返回的数据就是二进制。

好了就说到这里,对了如果是低版本浏览器做下载最好还是后台来解决吧。

代码下载
精品好课
React实战视频教程仿京东移动端电商
React是前端最火的框架之一,就业薪资很高,本课程教您如何快速学会React并应用到实战,对正在工作当中或打算学习React高薪就业的你来说,那么这门课程便是你手中的葵花宝典。
jQuery视频教程从入门到精通
jquery视频教程从入门到精通,课程主要包含:jquery选择器、jquery事件、jquery文档操作、动画、Ajax、jquery插件的制作、jquery下拉无限加载插件的制作等等......
Vue2+Vue3+ES6+TS+Uni-app开发微信小程序从入门到实战视频教程
2021年最新Vue2+Vue3+ES6+TypeScript和uni-app开发微信小程序从入门到实战视频教程,本课程教你如何快速学会VUE和uni-app并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己...
最新完整React视频教程从入门到精通纯干货纯实战
React是目前最火的前端框架,就业薪资很高,本课程教您如何快速学会React并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习React高薪就...
HTML5基础入门视频教程易学必会
HTML5基础入门视频教程,教学思路清晰,简单易学必会。适合人群:创业者,只要会打字,对互联网编程感兴趣都可以学。课程概述:该课程主要讲解HTML(学习HTML5的必备基础语言)、CSS3、Javascript(学习...
VUE2+VUE3视频教程从入门到精通(全网最全的Vue课程)
VUE是目前最火的前端框架之一,就业薪资很高,本课程教您如何快速学会VUE+ES6并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习VUE高薪就...
HTML5视频播放器video开发教程
适用人群1、有html基础2、有css基础3、有javascript基础课程概述手把手教你如何开发属于自己的HTML5视频播放器,利用mp4转成m3u8格式的视频,并在移动端和PC端进行播放支持m3u8直播格式,兼容...
最新完整React+VUE视频教程从入门到精,企业级实战项目
React和VUE是目前最火的前端框架,就业薪资很高,本课程教您如何快速学会React和VUE并应用到实战,教你如何解决内存泄漏,常用库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习Re...
收藏
扫一扫关注我们