file-saver用法
时间: 2023-10-20 08:09:36 浏览: 65
File-saver是一个JavaScript库,用于在浏览器中保存文件。它可以将Blob、File对象保存为本地文件。以下是使用File-saver的步骤:
1. 下载和引入File-saver库:
```html
<script src="https://cdn.jsdelivr.net/npm/file-saver"></script>
```
2. 创建要保存的Blob对象或File对象:
```javascript
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方法保存文件:
```javascript
saveAs(file, 'hello.txt');
```
或者
```javascript
saveAs(blob, 'hello.txt');
```
其中第一个参数是要保存的Blob或File对象,第二个参数是保存的文件名。
注意:File-saver库仅支持在现代浏览器中使用,不支持在IE浏览器中使用。
相关问题
vue 引入 file-saver
Vue.js 是一个流行的前端框架,它提供了很多方便的功能和插件来帮助开发者更加高效地开发应用程序。其中,file-saver 是一个非常实用的插件,它可以让我们在前端将数据保存为文件并下载到本地。
在 Vue.js 中引入 file-saver 插件的步骤如下:
1. 安装 file-saver 插件:可以使用 npm 或 yarn 安装,命令如下:
```
npm install file-saver --save
```
2. 在需要使用 file-saver 的组件中引入插件:
```
import { saveAs } from 'file-saver';
```
3. 在需要保存文件的方法中调用 saveAs 方法:
```
const blob = new Blob([data], { type: 'text/plain;charset=utf-8' });
saveAs(blob, 'filename.txt');
```
其中,data 是需要保存的数据,可以是字符串或者二进制数据;filename.txt 是保存的文件名,可以根据实际情况修改。
使用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, '下载文件名称') // 使用
```