龙空技术网

JS下载文件的那些事(a标签与ajax)

用户1521331951111582 233

前言:

而今各位老铁们对“会js就会ajax”大体比较看重,各位老铁们都需要知道一些“会js就会ajax”的相关资讯。那么小编也在网络上汇集了一些有关“会js就会ajax””的相关内容,希望各位老铁们能喜欢,各位老铁们一起来了解一下吧!

最近在开发过程中遇到了一个问题,返回一个字符串把它下载成txt格式。因此在这里对一些简单的下载做一个总结。

1、a标签点击下载(手动触发)

      //html      <a download="文件.txt" id="btn">        下载      </a>;       //js      var blob = new Blob(["我是内容"], {        type: "text/csv,charset=UTF-8",      });      var url_object = window.URL || window.webkitURL || window;      document.getElementById("btn").href = url_object.createObjectURL(blob); 

注:

1、URL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL. 这个URL的生命仅存在于它被创建的这个文档里。 新的URL指向执行的File对象或者是Blob对象.

URL.createObjectURL()

2、Blob对象,就是二进制数据,通过new Blob()创建的对象就是Blob对象.同时在XMLHttpRequest里,如果指定responseType为Blob,那么得到的返回值也是一个Bolb对象.Blob() 、Blob

2、拿到参数就下载(自动下载)

好了leader说了,现在要用户点击查看,查看内容的同时下载一份txt

EventTarget.dispatchEvent()

MouseEvent

      exportRaw("文件.txt", "我还是内容");       function fakeClick(obj) {        //实例化我们的鼠标事件        var event = new MouseEvent("click");        //自定义事件的触发        obj.dispatchEvent(event);      }      function exportRaw(name, data) {        var urlObject = window.URL || window.webkitURL || window;        var export_blob = new Blob([data]);        var save_link = document.createElement("a");        save_link.href = urlObject.createObjectURL(export_blob);        save_link.download = name;        fakeClick(save_link);      }

3、ajax 实现

好了,现在不仅要下载txt还有视频,图片等.....这里只是简单的去实现以下:

l 记得解决跨域问题

l 通过 ajax 获取 Blob

l 保存重命名

      function getBlob(url) {        return new Promise((res) => {          const xhr = new XMLHttpRequest();          xhr.open("GET", url, true);          xhr.responseType = "blob";          xhr.onload = () => {            if (xhr.status === 200) {              res(xhr.response);            }          };          xhr.send();        });      }       function saveAs(blob, filename) {        if (window.navigator.msSaveOrOpenBlob) {          // Internet Explorer 10 的 msSaveBlob 和 msSaveOrOpenBlob 方法允许用户在客户端上保存文件          navigator.msSaveBlob(blob, filename);        } else {          const url_object = window.URL || window.webkitURL || window;          const save_link = document.createElement("a");          const click_event = new MouseEvent("click");          save_link.href = url_object.createObjectURL(blob);          save_link.download = filename;          save_link.dispatchEvent(click_event);          url_object.revokeObjectURL(save_link.href);        }      }      function download(url, filename) {        getBlob(url).then((blob) => {          saveAs(blob, filename);        });      }      download("文件地址", "文件名称.格式");

4、FileSaver.js

注:我就把地址扔下来,大家可以去使用README.md写比我清楚啦.

标签: #会js就会ajax