封装导出功能（export）-CFANZ编程社区

业务描述: 通过一个button按钮, 实现导出功能, 导出后文件保存到电脑上

一. file-saver 介绍

file-saver是一个用于在前端导出文件的JavaScript库，‌它允许开发者在浏览器环境中方便地保存文件。‌通过使用file-saver，‌开发者可以创建Blob对象，‌并利用FileSaver.saveAs方法将文件保存到用户的设备上。‌这种方法特别适用于Web应用中需要导出文件到客户端的情况，‌如Excel、‌CSV等。‌

在Vue.js中使用file-saver导出文件的基本步骤包括：‌

创建Blob对象：‌使用Blob构造函数创建一个新的Blob对象，‌该对象可以包含任何类型的数据，‌如文件流。‌
使用FileSaver.saveAs方法：‌调用FileSaver库的saveAs方法，‌将创建的Blob对象保存为文件。‌这个方法接受两个参数：‌一个是Blob对象，‌另一个是保存文件的名称。‌

二. 项目中应用

1. 安装 file-saver库

2.创建 util / exportExcel.js

import { saveAs } from 'file-saver'; 
import { Message, Loading } from 'element-ui'; // element-ui
import axios from 'axiost'; // axios

let downloadLoadingInstance;
// 通用下载方法
export async function download(url, params, filename, config) {
	downloadLoadingInstance = Loading.service({ text: '正在下载数据，请稍候', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' });
	return axios
		.post(url, params, {
			// transformRequest: [
			// 	(params) => {
			// 		return tansParams(params);
			// 	},
			// ],
			data: params,
			headers: {
				// 'Content-Type': 'application/x-www-form-urlencoded',
				'Content-Type': 'application/json',
			},
			responseType: 'blob',
			...config,
		})
		.then(async (data) => {
			const isLogin = await blobValidate(data);
			if (isLogin) {
				const blob = new Blob([data]);
				saveAs(blob, filename);
			} else {
				const resText = await data.text();
				const rspObj = JSON.parse(resText);
				const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default'];
				Message.error(errMsg);
			}
			downloadLoadingInstance.close();
		})
		.catch((r) => {
			console.error(r);
			Message.error('下载文件出现错误，请联系管理员！');
			downloadLoadingInstance.close();
		});
}

/**
 * 参数处理
 * @param {*} params  参数
 */
function tansParams(params) {
	let result = '';
	for (const propName of Object.keys(params)) {
		const value = params[propName];
		var part = encodeURIComponent(propName) + '=';
		if (value !== null && value !== '' && typeof value !== 'undefined') {
			if (typeof value === 'object') {
				for (const key of Object.keys(value)) {
					if (value[key] !== null && value[key] !== '' && typeof value[key] !== 'undefined') {
						let params = propName + '[' + key + ']';
						var subPart = encodeURIComponent(params) + '=';
						result += subPart + encodeURIComponent(value[key]) + '&';
					}
				}
			} else {
				result += part + encodeURIComponent(value) + '&';
			}
		}
	}
	return result;
}

// 验证是否为blob格式
async function blobValidate(data) {
	try {
		const text = await data.text();
		JSON.parse(text);
		return false;
	} catch (error) {
		return true;
	}
}