使用 JS 的 download 库来下载资源

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

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

download.js 相关资源:

Github 地址:https://github.com/rndme/download
本站下载地址:https://static.runoob.com/download/download-master.zip
CDN 库:https://cdn.staticfile.org/downloadjs/1.4.8/download.min.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.οnlοad= function(e){download(e.target.response, “awesomesauce.png”, “image/png”);};
x.send();

  • 22
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱技术爱源码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值