业务描述: 通过一个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. 页面反馈 展示