程序员的知识教程库

网站首页 > 教程分享 正文

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

henian88 2024-08-15 21:51:06 教程分享 13 ℃ 0 评论


最近在开发过程中遇到了一个问题,返回一个字符串把它下载成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

https://github.com/eligrey/FileSaver.js
注:我就把地址扔下来,大家可以去使用README.md写比我清楚啦.

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表