当前位置：首页 > news >正文

vue 中 file-saver 功能介绍，使用场景，使用示例

news 2025/10/22 10:53:32

以下是关于 Vue 中 file-saver 的功能介绍、使用场景及使用示例的详细说明：

功能介绍

核心作用：“file-saver”是一个轻量级的 JavaScript 库，专门用于在浏览器中保存文件。它提供了简单易用的 API，能帮助开发者轻松实现将数据以文件的形式下载到用户的计算机上的操作，无需后端服务器的参与。
支持的文件类型多样：可以使用该库将数据保存为常见的多种文件格式，如文本文件（.txt）、CSV 文件（.csv）、JSON 文件（.json）、Excel 文件（.xlsx）、图片等。
基于 Blob 对象工作：通常需要先创建一个包含数据的 Blob 对象，然后使用其提供的 saveAs 方法来触发文件下载。

使用场景

导出数据报表：当用户需要在前端把从后台获取的数据导出成 Excel 或 CSV 格式的文件时，可利用 “file-saver”来实现。例如，在一个管理系统中，管理员查看完员工信息列表后，想要将这些数据下载下来做进一步分析处理，就可以借助此库完成。
保存用户输入内容：如果应用中有用户自定义的一些文本信息，比如笔记、配置参数等，允许用户将其保存为本地文件，方便下次继续编辑或备份，这时也能用到该库。
下载网络资源：对于一些在线的图片、文档等资源，若希望提供给用户直接下载的功能，也可以通过 “file-saver”达成。比如网页上有展示的产品手册 PDF，用户点击按钮即可下载到本地。
生成并下载动态文件：根据用户的操作和选择动态地生成文件并立即提供下载链接。例如，用户在页面上进行了某些设置后，系统根据这些设置生成对应的配置文件供用户下载。

使用示例

Vue 2 中的使用示例

安装：使用 npm 或 yarn 安装 file-saver。

npm install file-saver --save
# 或者
yarn add file-saver

组件内引入与基本文本保存：

import { saveAs } from 'file-saver';
export default {methods: {saveFile() {const content = '这是要保存的文本内容';const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });saveAs(blob, 'example.txt');}}
}

在上述代码中，定义了 saveFile 方法，创建了一个包含文本内容的 Blob 对象，然后调用 saveAs 方法将其保存为名为 example.txt 的文件。

保存动态数据（如从后端获取的数据）：

import { saveAs } from 'file-saver';
import axios from 'axios';
export default {methods: {async fetchAndSaveData() {try {const response = await axios.get('https://api.example.com/data');const data = JSON.stringify(response.data, null, 2);const blob = new Blob([data], { type: 'application/json;charset=utf-8' });saveAs(blob, 'data.json');} catch (error) {console.error('获取数据失败:', error);}}}
}

Vue 3 中的使用示例（Composition API）

安装方式同 Vue 2。

基础文本保存示例：

<script setup>
import { saveAs } from 'file-saver';
const saveFile = () => {const content = '这是要保存的文本内容';const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });saveAs(blob, 'example.txt');
};
</script>

结合响应式数据保存文件：

<script setup>
import { ref } from 'vue';
import { saveAs } from 'file-saver';
const inputText = ref('');
const saveInputAsFile = () => {const content = inputText.value;const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });saveAs(blob, 'input.txt');
};
</script>

封装导出不同类型文件的方法（以导出 Excel 为例）：

import FileSaver from "file-saver";
export default class fileSave {// 导出Excel文件static getExcel(res, name) {let blob = new Blob([res], { type: "application/vnd.ms-excel" });FileSaver.saveAs(blob, name + ".xlsx");}// 其他类型的导出方法类似，如导出CSV、图片等
}

使用时先导入再调用相应方法即可：import exportFile from '@/utils/exportFile'; exportFile.getExcel(res.data, '下载文件名称');。

下载本地文件示例：

import axios from 'axios';
import { saveAs } from 'file-saver';
/*** @params {string} localFileName 本地文件名称* @params {string} saveFileName 下载的文件名称* @retuen {promise}*/
export const downloadLocalFile = (localFileName, saveFileName) => {return new Promise((resolve, reject) => {axios({url: `/file/${localFileName}`, // 本地文件夹路径+本地文件名称method: 'get',responseType: 'blob' // arraybuffer 也可}).then(res => {const blob = new Blob([res.data]);if (navigator.msSaveBlob) { // 兼容IEnavigator.msSaveBlob(blob, saveFileName);} else {const url = window.URL.createObjectURL(blob);saveAs(url, saveFileName);}resolve();}).catch(err => {// 错误处理逻辑，例如提示未找到相关文件或下载失败等reject(err);});});
};
// 使用（注意文件格式的后缀名）
downloadLocalFile('excelFile.xlsx', 'newExcelFile.xlsx').then(res => {console.log('下载成功！');
});

下载服务器返回的文件流示例：

import { saveAs } from 'file-saver';
import axios from 'axios';
import { Message } from 'element-ui';
/*** @params {stream} fileStream 服务器返回的文件流* @params {string} saveFileName 下载的文件名称* @retuen {promise}*/
export const downloadFile = (fileStream, saveFileName) => {return new Promise((resolve, reject) => {const blob = new Blob([fileStream], { type: fileStream.type });const URL = window.URL || window.webkitURL;if (navigator.msSaveBlob) { // 兼容IEnavigator.msSaveBlob(blob, saveFileName);} else {const url = URL.createObjectURL(blob);saveAs(url, saveFileName);}resolve();});
};