最近在開(kāi)發(fā)過(guò)程中遇到了一個(gè)問(wèn)題液样，返回一個(gè)字符串把它下載成txt格式。因此在這里對(duì)一些簡(jiǎn)單的下載做一個(gè)總結(jié)。

難過(guò).jpg

a標(biāo)簽點(diǎn)擊下載(手動(dòng)觸發(fā))

當(dāng)可愛(ài)的用戶點(diǎn)擊下載按鈕后于宙，開(kāi)始下載我們的文件。

//html
<a download="文件.txt" id="btn">下載</a>

//js
var blob = new Blob(["我是內(nèi)容"], {
    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()方法會(huì)根據(jù)傳入的參數(shù)創(chuàng)建一個(gè)指向該參數(shù)對(duì)象的URL. 這個(gè)URL的生命僅存在于它被創(chuàng)建的這個(gè)文檔里限煞。 新的URL指向執(zhí)行的File對(duì)象或者是Blob對(duì)象.URL.create?ObjectURL()

2、Blob對(duì)象,就是二進(jìn)制數(shù)據(jù),通過(guò)new Blob()創(chuàng)建的對(duì)象就是Blob對(duì)象.同時(shí)在XMLHttpRequest里,如果指定responseType為Blob,那么得到的返回值也是一個(gè)Bolb對(duì)象.Blob() 员凝、Blob

拿到參數(shù)就下載(自動(dòng)下載)

好了leader說(shuō)了署驻，現(xiàn)在要用戶點(diǎn)擊查看，查看內(nèi)容的同時(shí)下載一份txt

用戶大于天

說(shuō)了一堆廢話上代碼：
Event?Target?.dispatch?Event()
Mouse?Event

exportRaw('文件.txt', '我還是內(nèi)容')

function fakeClick(obj) {
    //實(shí)例化我們的鼠標(biāo)事件
    var event = new MouseEvent('click');
    //自定義事件的觸發(fā)
    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);
}

ajax 實(shí)現(xiàn)

好了旺上，現(xiàn)在不僅要下載txt還有視頻，圖片等.....

怎么回事小老弟.jpg

這里只是簡(jiǎn)單的去實(shí)現(xiàn)以下

• 記得解決跨域問(wèn)題
• 通過(guò) ajax 獲取 Blob
• 保存重命名

    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('文件地址', '文件名稱.格式');

FileSaver.js

FileSaver.js
注：我就把地址扔下來(lái)糖埋，大家可以去使用README.md寫(xiě)的比我清楚啦.

目前進(jìn)入前端學(xué)習(xí)也是很短全是血和淚呀宣吱，如果有錯(cuò)誤還望各位大俠指出來(lái)，如果比我還小白的話大概沒(méi)有吧瞳别，看不明白的直接提出來(lái)征候。

溜了溜了.gif