快捷導(dǎo)航

使用JS?的download庫在瀏覽器直接下載文件

更新時(shí)間：2022年12月22日 09:20:20 投稿：yin

一般情況下web項(xiàng)目的瀏覽器下載文件，都是使用form表單或者ajax向后端提交數(shù)據(jù)，發(fā)送請求，后端文件的URL地址或者二進(jìn)制文件流。這篇文章主要介紹了使用JS?的download庫在瀏覽器直接下載文件。

download.js

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() 函數(shù)用于下載文件。下載內(nèi)容可以是 URL、字符串、Blob 或類型化的數(shù)據(jù)數(shù)組，或者通過將文件數(shù)據(jù)表示為 base64 或 url 編碼字符串的 dataURL。

無論輸入格式如何，download() 都使用指定的文件名和 mime 信息以與使用 Content-Disposition HTTP 標(biāo)頭的服務(wù)器相同的方式保存文件。

download(data, strFileName, strMimeType);

data - 下載的數(shù)據(jù)內(nèi)容，可以是 Blob、File、String 或 dataURL。
strFileName - 要創(chuàng)建的文件的名稱。
strMimeType - 要下載的文件的 MIME 內(nèi)容類型。

用法示例

文本

將字符串存儲到 dlText.txt 文件中并下載：

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

dataURL 文本實(shí)例：

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

blob 文本實(shí)例：

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

url 實(shí)例：

download("/robots.txt");

UInt8 文本數(shù)組實(shí)例：

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 字符串實(shí)例：

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

html Blob 實(shí)例：

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

ajax 回調(diào)實(shí)例：

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

二進(jìn)制文件

圖片 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();

到此這篇關(guān)于使用JS 的download庫在瀏覽器直接下載文件的文章就介紹到這了,更多相關(guān)download.js下載文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: