封装导出功能（export）

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

目录

一. file-saver 介绍

二. 项目中应用

1. 安装 file-saver库

2.创建 util / exportExcel.js

3. 页面内引入, 使用

4. 页面反馈 展示 

一. file-saver 介绍

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

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

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

二. 项目中应用

1. 安装 file-saver库

npm i file-saver

2.创建 util / exportExcel.js

• Content-type 类型需要和后端协商, 是application/x-www-form-urlencoded 还是 application/json

• transformResquest 钩子来转换请求的数据。transformResquest 是 axios 的一个配置选项，允许用户在请求发送前对请求数据进行处理。这里 tansParams 函数会遍历 params对象，将其转换为一个 URL 编码的字符串，适合发送表单数据

• 适用场景：如果你需要发送表单数据，可能会使用第一种方式( application/x-www-form-urlencoded + 使用 transformResquest  钩子)；如果你的后端 API 期望接收 JSON 格式的数据，那么第二种方式更为合适 (application/json + data: params)

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; 	} } 

3. 页面内引入, 使用

import { download } from '@/utils/exportExcel.js'; //引入

参数1, 是请求地址, 参数2, 是请求参数, 参数3, 是表单名称接后缀(xlsx) 

// 使用 

<el-button @click="handleExport">导出订单信息</el-button>

// 根据条件筛选查询订单列表导出 

        handleExport() {

                download(

                    '/api/settleOrder/export',

                    {                       

                        // 其他筛选条件参数

                    },

                    `订单信息${new Date().getTime()}.xlsx`

                );   

         

        },

4. 页面反馈 展示