精华内容
下载资源
问答
  • 针对单文件的情况下,同源的文件,可以通过 < a> 标签的 download 属性下载文件 const elt = document.createElement('a'); elt.setAttribute('href', url); elt.setAttribute('download', 'file.png'); elt....
  • Vue.js 资源文件下载

    2020-07-07 14:44:02
    Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。...
  • 主要介绍了Javascript前端下载后台传来的文件流代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 主要给大家介绍了关于js使用文件下载csv文件的实现方法,文中通过示例代码介绍的非常详细,对大家学习或者使用js具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
  • 使用JS和HTML5下载在客户端下载文件
  • 如何用 JavaScript 下载文件

    千次阅读 2018-01-08 14:34:49
    我们知道,下载文件是一个非常常见的需求,但由于浏览器的安全策略的限制,我们通常只能通过一个额外的页面,访问某个文件的 url 来实现下载功能,但是这种用户体验非常不好。 幸好,HTML 5 里面为 标签添加了一个...

    • 简介

      我们知道,下载文件是一个非常常见的需求,但由于浏览器的安全策略的限制,我们通常只能通过一个额外的页面,访问某个文件的 url 来实现下载功能,但是这种用户体验非常不好。
      幸好,HTML 5 里面为 <a> 标签添加了一个 download 的属性,我们可以轻易的利用它来实现下载功能,再也不需要用以前的笨办法了。

      原理

      我们先看看 download 的使用方法:

             
      <a href="http://somehost/somefile.zip" download="filename.zip">Download file </a>

      看看上面的代码,只要为 <a> 标签添加 download 属性,我们点击这个链接的时候就会自动下载文件了~
      顺便说下,download 的属性值是可选的,它用来指定下载文件的文件名。像上面的例子中,我们下载到本地的文件名就会是 filename.zip 拉,如果不指定的话,它就会是 somefile.zip 这个名字拉!

      看到这里,你可能会说,坑爹啊,这明明是用 HTML 5 的新特性来实现下载文件嘛,说好的用 JavaScript 下载文件呢?

      事实上,用 JavaScript 来下载文件也是利用这一特性来实现的,我们的 JavaScript 代码不外乎就是:

    • 1.用 JavaScript 创建一个隐藏的 <a> 标签

    • 2.设置它的 href 属性

    • 3.设置它的 download 属性
    • 4.用 JavaScript 来触发这个它的 click 事件

    翻译成 JavaScript 代码就是:

         
    var a = document.createElement( 'a');
    var url = window.URL.createObjectURL(blob);
    var filename = 'what-you-want.txt';
    a.href = url;
    a.download = filename;
    a.click();
    window.URL.revokeObjectURL(url);

    好拉,是不是看到有个陌生的东东呢?

    window.URL

    window.URL 里面有两个方法:

    • createObjectURL 用 blob 对象来创建一个 object URL(它是一个 DOMString),我们可以用这个 object URL 来表示某个 blob 对象,这个 object URL 可以用在 href 和 src 之类的属性上。
    • revokeObjectURL 释放由 createObjectURL 创建的 object URL,当该 object URL 不需要的时候,我们要主动调用这个方法来获取最佳性能和内存使用。

    知道了这两个方法之后,我们再回去看看上面的例子就很容易理解了吧!只是用 blob 对象来创建一条 URL,然后让 <a> 标签引用该 URL,然后触发个点击事件,就可以下载文件了!

    那么问题来了,blob 对象哪里来?

    Blob 对象

    Blob 全称是 Binary large object,它表示一个类文件对象,可以用它来表示一个文件。根据 MDN 上面的说法,File API 也是基于 blob 来实现的。

    由于本文的主题是讲 JavaScript 下载文件,那我们构建 blob 的方式就是通过服务器返回的文件来创建 blob 拉!
    而最简单的方式就是用 fetch API 了,我们可以整合上面的例子:

         
    fetch( 'http://somehost/somefile.zip').then( res => res.blob().then( blob => {
    var a = document.createElement( 'a');
    var url = window.URL.createObjectURL(blob);
    var filename = 'myfile.zip';
    a.href = url;
    a.download = filename;
    a.click();
    window.URL.revokeObjectURL(url);
    }))

    很简单对吧!

    你可能会问,何必这么麻烦呢?直接写成下面这样不就好了:

         
    <a href="http://somehost/somefile.zip" download="myfile.zip">Download file </a>

    嗯,对于这种写法,我只能说,你做的太正确了!如果你要下载的是已经存在服务器上面的静态文件的话,那么写成这样是最方便的。浏览器会帮你处理整个下载过程,不需要你干涉。如果你用 blob 的方式来下载文件的话,会有下面这些限制的:

    限制一:不同浏览器对 blob 对象有不同的限制

    具体看看下面这个表格(出自 FileSaver.js):

    Browser Constructs as Filenames Max Blob Size Dependencies
    Firefox 20+ Blob Yes 800 MiB None
    Firefox < 20 data: URI No n/a Blob.js
    Chrome Blob Yes 500 MiB None
    Chrome for Android Blob Yes 500 MiB None
    Edge Blob Yes ? None
    IE 10+ Blob Yes 600 MiB None
    Opera 15+ Blob Yes 500 MiB None
    Opera < 15 data: URI No n/a Blob.js
    Safari 6.1+* Blob No ? None
    Safari < 6 data: URI No n/a Blob.js

    限制二:构建完 blob 对象后才会转换成文件

    这一点限制对小文件(几十kb)可能没什么影响,但对稍微大一点的文件影响就很大了。试想,用户要下载一个 100mb 的文件,如果他点击了下载按钮之后没看到下载提示的话,他肯定会继续按,等他按了几次之后还没看到下载提示时,他就会抱怨我们的网站,然后离开了。

    然而事实上下载的的确确发生了,只是要等到下载完文件之后才能构建 blob 对象,再转化成文件。而且,用户再触发多几次下载就会造成一些资源上的浪费。

    因此,如果是要下载大文件的话,还是推荐直接创建一个 <a> 标签拉~
    写 html 也好,写 JavaScript 动态创建也好,用自己喜欢的方式去创建就好了。

    为什么要用 JavaScript 下载文件

    好拉,说了半天,其实我们一直说的都是:「不要用 JavaScript 下载文件拉,限制多多,又不好用,直接用 html 就好拉,简单方便又快捷」这个论调。
    事实上也确实如此,但有些时候我们确实需要通过 JavaScript 来做一些处理。

    权限校验

    有些时候,我们需要对下载做一些限制,最常见的就是权限校验了,如检查该用户是否有下载的权限,是否有高速下载的权限等等。这时候,我们可以利用 JavaScript 做一些预处理。如:

         
    fetch( 'http://somehost/check-permission', options).then( res => {
    if (res.code === 0) {
    var a = document.createElement( 'a');
    var url = res.data.url;
    var filename = 'myfile.zip';
    a.href = url;
    a.download = filename;
    a.click();
    } else {
    alert( 'You have no permission to download the file!');
    }
    });

    在这个例子里面,我们没有用 blob 来构建 URL,而是通过后端服务器来计算出用户的下载链接,然后再利用之前提到的动态创建 <a> 标签的方式来实现下载,很简单吧!

    动态文件

    动态生成文件然后返回给客户端也是一个很常见的需求,譬如我们有时候需要做导出数据的功能,把数据库中的某些数据导出到 Excel 中,然后再返回客户端。
    这时候我们就不能简单的指定 href 属性,因为对应的 URL 并不存在。
    我们只能通过 JavaScript 对服务器发出一个请求,通知它去生成某个文件,然后把对应的 URL 返回给客户端。
    有没有感觉这个过程和上面「权限校验」一节很像?肯定拉,因为我们只是对 URL 做了一些预处理而已嘛~

    注意事项

    由于 download 属性是 HTML 5 的新特性,因此它不支持旧版本的浏览器。

    总结

    HTML 5 新的 download 特性真的很好用,结合 JavaScript 的动态能力我们可以很方便的做出复杂的下载功能~

    参考资料

    https://github.com/eligrey/FileSaver.js/blob/master/FileSaver.js
    https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL
    https://developer.mozilla.org/en-US/docs/Web/API/Blob
    http://stackoverflow.com/questions/19327749/javascript-blob-filename-without-link
    http://stackoverflow.com/questions/24501358/how-to-set-a-header-for-a-http-get-request-and-trigger-file-download
    http://blog.bguiz.com/2014/07/03/file-download-with-http-request-header/

    展开全文
  • pdf.js文件下载

    2018-10-31 10:53:57
    博客中所涉及到的文件路径,文件名及需要注释的部分都是与此资源相匹配的,大家可以直接下载配合文档解决问题
  • js下载插件兼容各大主流浏览器,官方使用案例较为实用!
  • 此代码是使用JavaScript在网页中打开下载文件弹出窗口的最佳解决方案。 如果您需要使用javascript将文件下载到客户端浏览器,则只需要使用filePath网址作为输入参数来调用downloadFile(filePath)函数,它将...
  • JavaScript 下载文件并保持原文件名称

    千次阅读 2019-10-31 19:26:02
    <script> // 获取文件名 function fileNameFromHeader (disposition) { var result = null; if (disposition && /filename=.*/ig.test(disposition)) { result = dispos...
    <script>
     // 获取文件名
        function fileNameFromHeader (disposition) {
            var result = null;
            if (disposition && /filename=.*/ig.test(disposition)) {
                result = disposition.match(/filename=.*/ig);
                return decodeURI(result[0].split('=')[1]);
            }
            return null;
            }
    function downloads() {
       var url = '/down_excel';
       var xhr = new XMLHttpRequest();
    
       xhr.open('GET', url, true);        // 也可以使用POST方式,根据接口
    
       xhr.responseType = "blob";    // 返回类型blob
    
       // 定义请求完成的处理函数,请求前也可以增加加载框/禁用下载按钮逻辑
    
       xhr.onload = function () {
    
           // 请求完成
    
           if (this.status === 200) {
    
               // 返回200
    
               var blob = this.response
               var filenames = fileNameFromHeader(xhr.getResponseHeader('Content-Disposition'));
               var reader = new FileReader();
    
               reader.readAsDataURL(blob);    // 转换为base64,可以直接放入a表情href
    
               reader.onload = function (e) {
    
                   // 转换完成,创建一个a标签用于下载
    
                   var a = document.createElement('a');
    
                   a.download = filenames.slice(1,filenames.length-1); //'data.xlsx';
    
                   a.href = e.target.result;
    
                   $("body").append(a);    // 修复firefox中无法触发click
    
                   a.click();
    
                   $(a).remove();
    
               }
    
           }
    
       };
    
       // 发送ajax请求
    
       xhr.send()
    
    }
    </script>

    注:此代码只是个人根据当时的环境满足了当时的需求,记录下来用做后续参考!如有问题,请检查软硬件环境是否一致,由于时间精力有限,大部分未做详细环境描述。

    展开全文
  • 主要介绍了javascript使用Blob对象实现的下载文件操作,结合实例形式分析了javascript使用Blob对象下载文件相关原理、操作技巧与注意事项,需要的朋友可以参考下
  • JS下载文件

    万次阅读 2018-03-16 13:40:59
    下载的代码如下: var xhr = new XMLHttpRequest(); var formData = new FormData(); formData.append('snNumber', $("#snNumber").val()); formData.append('spec', $("#spec"...

    下载的代码如下:

                var xhr = new XMLHttpRequest();
                var formData = new FormData();
                formData.append('snNumber', $("#snNumber").val());
                formData.append('spec', $("#spec").val());
                formData.append('startCreateDate', $("#startCreateDate").val());
                formData.append('endCreateDate', $("#endCreateDate").val());
                formData.append('startActiveDate', $("#startActiveDate").val());
                formData.append('endActiveDate', $("#endActiveDate").val());
                formData.append('supplier', $("#supplier").val());
                formData.append('state', $("#cboDeviceStatus").val());
                xhr.open('POST', vpms.ajaxUrl + vpms.manageUserUrl + "exportExcelDevices", true);
                xhr.setRequestHeader("accessToken", userInfo.accessToken);
                xhr.responseType = 'blob';
                xhr.onload = function (e) {
                    if (this.status == 200) {
                        var blob = this.response;
                        var filename = "设备导出{0}.xlsx".format(vpms.core.date.format("yyyyMMddhhmmss"));
                       
                         var a = document.createElement('a');
                         blob.type = "application/excel";
                         var url = createObjectURL(blob);
                         a.href = url;
                         a.download = filename;
                         a.click();
                         window.URL.revokeObjectURL(url);
                        
                    }
                };
                xhr.send(formData);

            });

    使用Chrome下载运行良好,可IE Explorer 11版本导出Excel按钮无反应或者弹出"需要新应用打开此blob".

    改进下blob的处理方式:如下

                     if (window.navigator.msSaveOrOpenBlob) {
                            navigator.msSaveBlob(blob, filename);
                        } else {

                        var a = document.createElement('a');
                         blob.type = "application/excel";
                         var url = createObjectURL(blob);
                         a.href = url;
                         a.download = filename;
                         a.click();
                         window.URL.revokeObjectURL(url);
                        }

    此时IE下导出正常:



    展开全文
  • javascript实现生成并下载txt文件(支持IE浏览器,谷歌浏览器等)
  • JS下载远程文件

    2016-03-13 13:58:34
    利用微软的XMLMHTTP组件实现的远程文件下载,纯JS实现,可以显示文件大小、下载速度、下载进度、已下载大小。 使用HTA编写界面。
  • 本文通过实例代码给大家介绍了JavaScript 用fetch 实现异步下载文件功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • js实现点击下载文件

    万次阅读 2019-08-20 10:17:33
    直接点击可以下载,需要注意的是download属性,当不加download属性时,如果文件格式为txt、pdf、jpg等浏览器支持直接打开的文件格式,那么不会下载,而是浏览器直接打开;添加download属性之后,就会下...

    请参考:https://blog.csdn.net/PGguoqi/article/details/106817181

    1、使用<a>标签

    <a href="../../static/xxx.xlsx" download="xxx.xlsx">下载</a>

    直接点击可以下载,需要注意的是download属性,当不加download属性时,如果文件格式为txt、pdf、jpg等浏览器支持直接打开的文件格式,那么不会下载,而是浏览器直接打开;添加download属性之后,就会下载,并且下载文件默认命名为你download属性的值。(参考: https://blog.csdn.net/jsnancy/article/details/80824801

     

    2、使用window.open()

    window.open("../../static/xxx.xlsx")
    
    window.open("https://mp.csdn.net/postedit/static/xxx.xlsx")

    当然,下载的资源可以是本地的,也可以是网上的。

     

    3、需要注意的是,最好不要使用中文的文件名。

    展开全文
  • world.js下载

    2020-11-19 15:39:55
    Echarts world.js下载Echarts world.js下载Echarts world.js下载
  • NestJS文件流 产品特点 高效的上载/下载 RAM使用率极低 非常适合提供大文件而不将其存储在文件系统中 接受range标头以支持部分下载 二手包装 以提高性能 连接到MongoDB 用于在Mongo DB之间传输分块文件 解析多部分...
  • moment.js文件下载

    2020-05-07 11:30:54
    Moment.js是一个轻量级的JavaScript时间库,日常开发中,通常会对时间进行下面这几个操作:比如获取时间,设置时间,格式化时间,比较时间等等。接下来,我将按照这些操作对Moment.js中的Doc进行整理分类,方便学习...
  • vue js下载文件方法

    千次阅读 2019-11-15 11:04:11
    // 下载文件 downFile (item) { const link = document.createElement('a') link.setAttribute("download", item.ATTA_NAME) //下载的文件名 link.href = item.ATTA_URL //文件url link.click() ...
  • js下载文件并修改文件名称

    千次阅读 2019-09-26 13:47:23
    //url:文件地址 filename:想要修改为的名称 function download(url, filename) { getBlob(url, function (blob) { saveAs(blob, filename); }); }; funct...
  • 主要介绍了js打开word文档预览操作,结合实例形式分析了两种javascript打开word文档在线预览相关操作技巧,需要的朋友可以参考下
  • js下载文件流,提示文件损坏问题

    千次阅读 2021-01-19 11:53:45
    记录一下前端下载后端返回的文件流,提示文件损坏问题。 const blob = new Blob([content.data], { // type是需要对应的文件类型 type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", }...
  • 在前端想要生成txt或者其他格式文件来保存一些数据,或者在数据请求服务器成功后想要将数据生成文件下载,这些需求还是比较多的,这里使用到的download.js。既可以满足这些需求。 第一步:下载 1.下载可以在...
  • JS下载文件的三种方法

    万次阅读 2019-01-11 17:57:25
    因为公司后端忙得无法给批量下载的api,就我们前端自己把多张图片打包成zip下载,zip打包我们用的是jszip,下面是js实现下载的三种方法: 利用HTML download 属性 var a = document.createElement('a'); //需要...
  • js实现文件下载

    千次阅读 2020-11-21 11:33:35
    后台文件流 function (formData, url, name) { return new Promise((resolve, reject) => { var xhr = new XMLHttpRequest(); xhr.open("POST", url, true); // 也可以使用POST方式,根据接口 xhr.responseType = ...
  • js实现文件流下载文件

    万次阅读 2020-04-27 12:48:03
    } // 文件流转blob对象下载 function downloadFile(data, type, fileName) { let blob = new Blob([data], {type: `application/${type};charset=utf-8`}); // 获取heads中的filename文件名 let downloadElement = ...
  • js文件下载进度条实现

    千次阅读 2019-11-15 14:58:57
    * 下载 * @param {String} url 目标文件地址 * @param {String} filename 想要保存的文件名称 */ download(url: string, filename: string) { this.getBlob(url).then(blob => { this.saveAs(blob, ...
  • js下载文件简单操作

    万次阅读 2017-05-08 13:37:03
    js下载文件的简单操作案例
  • 场景简介 由于业务需要,经常遇到下载各类文件的需求,...但这在 ie 浏览器上的实现又与一般浏览器不同,于是摸索之后写了个通用的下载方法,既可用来下载文件也可下载图片,希望能够帮到大家。 npm 安装使用 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 569,814
精华内容 227,925
关键字:

js下载文件