js下载文件

下载文件时一般后端会告知你服务器静态目录的文件路径，直接window.location.href下载即可； 如果后台服务器没有可供下载的静态资源，返回的是一个文件流，则使用下面的方式； 通过URL.createObjectUrl（）生成url，创建a标签，href指向这个url，download指向文件名，触发点击事件，进行下载；

URL.createObjectUrl()

URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL对象表示指定的 File 对象或 Blob 对象。

• 语法：objectURL = URL.createObjectURL(object);

• 参数： object： 用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象。

• 返回值： 一个DOMString包含了一个对象URL，该URL可用于指定源 object的内容。

URL.createObjectUrl()这个api需要传递一个类型为「File ｜ Blob ｜ MediaSource」参数，返回一个url；

//首先先把这个download方法封装一下：
//@params fileStream 需要下载的文件，一般是后端传递回来的；
//@params fileName 文件的名称；
const download = (fileStream: any, fileName？: string) => {
    // 通过fileStream生成url；
    const url = window.URL.createObjectURL(new Blob([fileStream])); 
    // 创建一个a标签；
    const link = document.createElement('a');
    // 编辑a标签的href属性；
    link.href = url;
    // 编辑a标签的download属性(下载文件时生成的默认文件名);
    link.setAttribute('download', fileName ? fileName : 'file');
    // 将a标签添加到body中；
    document.body.appendChild(link);
    // 点击事件；
    link.click();
    // 移除a标签；
    document.body.removeChild(link);
 };
  

下面就可以调用了：

const App = () => {
    const string = 'abc';
    const handleDownload = () => {
        download(string, '文本');
    };

    return <button onClick={handleDownload}>下载</button>
 }