导出Excel表格+搜索条件本文已参与「新人创作礼」活动，一起开启掘金创作之路。今天带来的是带有筛选条件的导出表格功能哟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

1、场景

相信大家在web端开发，尤其是后台开发时，或多或少会遇到导出表格的功能；

今天带来的是带有筛选条件的导出表格代码哟。

这里用到的框架是：vue + element-UI

2、具体实现

js-file-download 插件

导出功能在大部分情况下是可以借助 js-file-download 插件的，省时省力。

安装：

npm install js-file-download --save

使用：

let fileDownload = require("js-file-download")

或 import fileDownload from 'js-file-download'

考虑到请求到的数据流和普通的不一样，所以在对请求进行封装的时候，要单独处理一下；

Content-disposition 是 MIME 协议的扩展，MIME 协议指示 MIME 用户代理如何显示附加的文件。

Content-disposition其实可以控制用户请求所得的内容存为一个文件的时候提供一个默认的文件名。

excle下载导出时：

fileName就是文件名。

为了获取到动态的下载后的excel文件名，且保证多次下载的文件名不重复，文件名一般由后端直接返回，前端做
一下处理即可。

decodeURIComponent（）的作用

encodeURIComponent() 是 JavaScript 中的一个全局函数。

encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。

该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ) 。

其他字符（比如 ：;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号），都是由一个或多个十六进制的转义序列替换的。

decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。