ant design vue做导入导出excel

1.不调用后端接口做导出excel：

在页面上写触发的按钮：@click="outTab(方法名)"

<a-button

type="primary"

@click="outTab"

>导出</a-button>

在script-method中写：

// 点击导出

outTab () {

require.ensure([], () => {

const { export_json_to_excel } = require('@/Excel/Export2Excel') //注意这个Export2Excel路径

const tHeader = ['姓名', '性别', '年龄', '手机号', '邮箱', '岗位', '级别', '工作年限', '所属公司', '在职状态', '是否在项目'] // 上面设置Excel的表格第一行的标题

const filterVal = ['name', 'sex', 'age', 'phone', 'email', 'postName', 'level', 'workingYears', 'company', 'state', 'isProject'] // 上面的index、nickName、name是tableData里对象的属性key值

const list = this.staffList //把要导出的数据tableData存到list

const data = this.formatJson(filterVal, list)

export_json_to_excel(tHeader, data, '员工管理的Excel') //最后一个是表名字

})

//格式转换,不需要改动

formatJson (filterVal, jsonData) {

return jsonData.map(v => filterVal.map(j => v[j]))

把表格跟你自己的数据表格Excel的表格第一行的标题对应上就行，其他的直接复制不需要改！

2.调用后端的接口进行导出excel

在页面上写触发的按钮：按钮上加一个a标签，a标签的地址就是调用后端的接口地址(如果接口需要参数则像我一样把每个参数加上，我这里判断他是否等于undefined的原因是我这里是下拉框，如果没有参数直接:href="uploadUrl+'/v1/employee/getExecl'"即可，uploadUrl是我的全局地址，如：http://172.18.101.57:8001/，换成自己的地址就行)

:href="uploadUrl+'/v1/employee/getExecl?companyId='+(this.form.selectCompany==undefined?'':this.form.selectCompany)+

'&postId='+(this.form.selectPost==undefined?'':this.form.selectPost)+'&name='+this.form.inputName">

<a-button

type="primary"

>导出</a-button>

</a>

这样就直接导出自动下载了，不需要再加任何东西！

ant design vue做导入导出excel相关推荐

ant vue 设置中文_vue+Ant design vue做项目-Go语言中文社区
哈喽哈喽,这期带来蚂蚁金服的一个 Ant Design 的 Vue 实现. 样式还是很现代化的,嗯...现在是2019年9月17,对现在来说还很fashion过几年就不知道了. 话不多说直接上手,喜欢 ...
vue中导入导出Excel
以下仅个人做笔记使用: 简单版导出Excel 1.安装依赖: cnpm install --save xlsx file-saver cnpm i script-loader -S 2.下载两个js文 ...
Vue+Element导入导出Excel
一,安装 npm install -S file-saver xlsx npm install -D script-loader 二,导入Excel 1,Element 上传控件 <el-upl ...
ANT DESIGN VUE upload 上传excel （使用upliad组件，上传excel到页面表格）
<a-uploadname="file" //发到后台的文件参数名:multiple="false" //禁用多选:file-list="fil ...
Ant Design Vue 如何获form表单里数据并给 v-decorator绑定的数据重新赋值
最近在用ant design vue 做项目遇到了一下坑比如 v-decorator 可以做数据绑定与v-model 不同的是给 form 表单赋值 v-model 的值是双向绑定的如 ...
vue 导入excel插件_Vue框架下实现导入导出Excel、导出PDF
项目需求:开发一套基于Vue框架的工程档案管理系统,用于工程项目资料的填写.编辑和归档,经调研需支持如下功能: Excel报表的导入.导出 PDF文件的导出打印表格经过技术选型,项目组一致决定通过 ...
vue导入导出excel组件封装
vue导入导出excel组件可直接使用参考以下博客,侵删参考的博客 ##一: 项目安装依赖 npm install --save xlsx 在项目中创建文件夹及文件如下图: excel-impo ...
VUE3 使用 Ant Design Vue 图标库的图标
emmm 就是 Ant Design Vue 这玩意用来做蛮好的支持VUE3 所以这里用了这个了. 首先他支持你一个个导入那岂不是.....傻里傻气的 ,所以我们一次性导入! 1. 先安装: ...
vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用（2）
回顾上篇文章地址:vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用(1)_konsei的博客-CSDN博客上篇文章搭建了vue3项目,引入了ant ...

ant design vue做导入导出excel

ant design vue做导入导出excel相关推荐

最新文章

热门文章