快捷導(dǎo)航

JavaScript實(shí)現(xiàn)文件下載的超簡(jiǎn)單兩種方式分享

更新時(shí)間：2023年12月08日 16:59:26 作者：張張打怪獸

這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)文件下載的超簡(jiǎn)單兩種方式,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

文件下載一般有幾種情況

1.url
2.文件流

file-saver庫(kù)實(shí)現(xiàn)文件下載

// 流方式
import { saveAs } from "file-saver";
//content 文件流，xxx.pdf 文件名稱(chēng)
saveAs(content, `xxx.pdf`);
 
// url方式  
import { saveAs } from "file-saver";
const url = 'xxx.jpg'
fetch(url)
.then((response) => response.blob())
.then((blob) => {
  saveAs(blob, `xxx.pdf`);
  })

手寫(xiě)方式

url方式

原理：創(chuàng)建一個(gè)a標(biāo)簽，傳入url點(diǎn)一下a標(biāo)簽就可以下載了

流方式

???????原理：將流轉(zhuǎn)換成緩存的url，再創(chuàng)建一個(gè)a標(biāo)簽傳入url，點(diǎn)一下就實(shí)現(xiàn)了

【工具類(lèi)】文件下載類(lèi)

 
//utils/downloadFile
class DownloadFile {
    /**
     * 
     * @param {*} file 文件流
     * @returns 
     */
    getObjectURL(file) {
        let url = null;
        if (window.createObjectURL !== undefined) {
            // basic
            url = window.createObjectURL(file);
        } else if (window.webkitURL !== undefined) {
            // webkit or chrome
            try {
                url = window.URL.createObjectURL(file);
            } catch (error) {
                console.log(error);
            }
        } else if (window.URL !== undefined) {
            // mozilla(firefox)
            try {
                url = window.URL.createObjectURL(file);
            } catch (error) {
                console.log(error);
            }
        }
        return url;
    }
    /**
     * 文件點(diǎn)擊下載
     * @param {*} blob 文件流
     * @param {*} fileName 文件名
     */
    downloadFile(blob, fileName) {
        let eleLink = document.createElement("a");
        eleLink.download = fileName;
        eleLink.style.display = "none";
        // 字符內(nèi)容轉(zhuǎn)變成blob地址
        eleLink.href = this.getObjectURL(blob);
        // 自動(dòng)觸發(fā)點(diǎn)擊
        document.body.appendChild(eleLink);
        eleLink.click();
        // 然后移除
        document.body.removeChild(eleLink);
    }
 
    /**
   * 獲取文件名后綴
   * @param {*} filename 文件名
   * @returns 
   */
    getFileFix(filename) {
        let fix = filename.substring(filename.lastIndexOf("\.") + 1).toLocaleLowerCase();
        return fix;
    }
 
    /**
     * 是否可預(yù)覽
     * @param {*} filename 文件名
     * @returns true可，false不可
     */
    isPreview(filename) {
        let fix = this.getFileFix(filename)
        switch (fix) {
            case "jpg":
            case "jpge":
            case "png":
            case "pdf":
            case "mp4":
            case "txt": {
                return true
            }
            default: {
                return false
            }
        }
    }
 
    /**
     * 預(yù)覽文件
     * @param {*} blob 文件流
     */
    preview(blob) {
        return this.getObjectURL(blob);
    }
 
    /**
     * 是服務(wù)器流 false 本地流true
     * @param {*} blob 文件流
     */
    static isLocalFile(blob) {
        return blob.raw ? true : false
    }
 
}
 
export default DownloadFile

下載

import DownloadFile from "@/utils/DownloadFile";
let d = new DownloadFile();
// content 文件流【blob】
d.downloadFile(content, "優(yōu)惠碼.zip");

到此這篇關(guān)于JavaScript實(shí)現(xiàn)文件下載的超簡(jiǎn)單兩種方式分享的文章就介紹到這了,更多相關(guān)JavaScript文件下載內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: