Js文件下载的两种方式【超简单】_js 文件怎么下下来

• 文件下载一般有几种情况
  • 1.url
  • 2.文件流

file-saver库实现文件下载

// 流方式
import { saveAs } from "file-saver";
//content 文件流，xxx.pdf 文件名称
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`);
  })

手写方式

• url方式
  • 原理：创建一个a标签，传入url点一下a标签就可以下载了
• ​​​​​​​流方式
  • ​​​​​​​原理：将流转换成缓存的url，再创建一个a标签传入url，点一下就实现了

【工具类】文件下载类

 
//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;
    }
    /**
     * 文件点击下载
     * @param {*} blob 文件流
     * @param {*} fileName 文件名
     */
    downloadFile(blob, fileName) {
        let eleLink = document.createElement("a");
        eleLink.download = fileName;
        eleLink.style.display = "none";
        // 字符内容转变成blob地址
        eleLink.href = this.getObjectURL(blob);
        // 自动触发点击
        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;
    }
 
    /**
     * 是否可预览
     * @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
            }
        }
    }
 
    /**
     * 预览文件
     * @param {*} blob 文件流
     */
    preview(blob) {
        return this.getObjectURL(blob);
    }
 
    /**
     * 是服务器流 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, "优惠码.zip");