file-saver用法

File-saver是一个JavaScript库，用于在浏览器中保存文件。它可以将Blob、File对象保存为本地文件。以下是使用File-saver的步骤：

1. 下载和引入File-saver库：

<script src="https://cdn.jsdelivr.net/npm/file-saver"></script>

2. 创建要保存的Blob对象或File对象：

const blob = new Blob(['Hello, world!'], { type: 'text/plain;charset=utf-8' });
const file = new File([blob], 'hello.txt', { type: 'text/plain;charset=utf-8' });

3. 调用File-saver的saveAs方法保存文件：

saveAs(file, 'hello.txt');

或者

saveAs(blob, 'hello.txt');

其中第一个参数是要保存的Blob或File对象，第二个参数是保存的文件名。

注意：File-saver库仅支持在现代浏览器中使用，不支持在IE浏览器中使用。

相关问题

file-saver库

file-saver库是一个轻量级的JavaScript库，主要用于在浏览器环境中创建、下载和管理Blob（二进制大对象）或File对象，常用于在客户端处理文件流数据，比如HTML2Canvas生成的图片或者其他数据格式的内容。它的核心功能是提供了一个`saveAs()`方法，可以方便地让用户选择保存文件，避免了因为直接从浏览器下载文件而可能出现的同源策略限制。

当你需要将生成的数据（如canvas转换后的data URL）作为文件保存时，可以借助file-saver来实现。例如上面提到的将canvas转成data URL后，再利用file-saver的`saveAs()`方法将其下载到用户的设备上。

使用file-saver的基本步骤包括：

1. 引入file-saver库（通常是通过CDN）：

<script src="https://cdn.jsdelivr.net/npm/file-saver@latest/FileSaver.min.js"></script>

2. 调用`saveAs()`方法，传递blob对象和文件名：

saveAs(blob, 'filename.ext', {type: 'application/octet-stream'}); // 对于非文本类型的文件

3. 当处理的是text/plain类型，可以直接用`new Blob([text])`构造一个text Blob，然后调用`saveAs()`：

let text = 'Your Text Data';
saveAs(new Blob([text], {type: 'text/plain;charset=utf-8'}), 'output.txt');

file-saver库非常实用，特别是在处理异步加载的大量数据或需要用户下载的情况。

使用file-saver导出excel

使用file-saver导出excel的步骤如下：
1. 首先，在项目中引入file-saver组件，并创建一个名为exportFile的类，将导出excel的方法封装在其中。
2. 在getExcel方法中，使用Blob对象将文件流转换为Blob类型，并设置文件类型为"application/vnd.ms-excel"。
3. 使用FileSaver的saveAs方法将Blob对象保存为excel文件，并指定文件名。
4. 在需要导出excel的地方，通过导入exportFile模块，并调用getExcel方法，传递文件流和文件名作为参数。

示例代码如下：

import FileSaver from "file-saver";

export default class exportFile {
  /**
   * 导出Excel文件
   * @param {*} res 文件流
   * @param {*} name 文件名
   */
  static getExcel(res, name) {
    let blob = new Blob([res], { type: "application/vnd.ms-excel" });
    FileSaver.saveAs(blob, name + ".xlsx");
  }
}

使用示例:

import exportFile from '@/utils/exportFile' // 导入
exportFile.getExcel(res.data, '下载文件名称') // 使用