堕落不振功业废,勤耕不辍日月新

使用 JS 的 download 库来下载资源

综合 hailen 8℃

HTML5 a 标签可以使用 download 属性来设置资源的下载,但需要是同源,如果浏览器可以解析也会直接打开。

这时我们可以通过第三方库 download 来实现更完整的下载功能。

download.js 相关资源:

  • NPM 安装:npm install downloadjs
  • download.js 库提供了 download() 函数用于下载文件。

    下载内容可以是 URL、字符串、Blob 或类型化的数据数组,或者通过将文件数据表示为 base64 或 url 编码字符串的 dataURL。

    无论输入格式如何,download() 都使用指定的文件名和 mime 信息以与使用 Content-Disposition HTTP 标头的服务器相同的方式保存文件。

    download(data, strFileName, strMimeType);
    • data – 下载的数据内容,可以是 Blob、File、String 或 dataURL。
    • strFileName – 要创建的文件的名称。
    • strMimeType – 要下载的文件的 MIME 内容类型。

    实例

    文本

    将字符串存储到 dlText.txt 文件中并下载:

    download("hello world", "dlText.txt", "text/plain");

    dataURL 文本实例:

    download("data:text/plain,hello%20world", "dlDataUrlText.txt", "text/plain");

    blob 文本实例:

    download(new Blob(["hello world"]), "dlTextBlob.txt", "text/plain");

    url 实例:

    download("/robots.txt");

    UInt8 文本数组实例:

    var str= "hello world",    arr= new Uint8Array(str.length);
    str.split("").forEach(function(a,b){
      arr[b]=a.charCodeAt();
    });
    
    download( arr, "textUInt8Array.txt", "text/plain" );

    HTML

    html 字符串实例:

    download(document.documentElement.outerHTML, "dlHTML.html", "text/html");

    html Blob 实例:

    download(new Blob(["hello world".bold()]), "dlHtmlBlob.html", "text/html");

    ajax 回调实例:

    $.ajax({
            url: "/download.html",
            success: download.bind(true, "text/html", "dlAjaxCallback.html")
    });

    二进制文件

    图片 URL:

    download("/diff6.png");

    异步下载图片:

    var x=new XMLHttpRequest();
    x.open( "GET", "/diff6.png" , true);
    x.responseType="blob";
    x.onload= function(e){download(e.target.response, "awesomesauce.png", "image/png");};
    x.send();

    转载请注明:我是IT » 使用 JS 的 download 库来下载资源

    喜欢 (0)or分享 (0)