element/element |
您所在的位置：网站首页 › 简单的excel表格村务表格模板 › element/element |
element/element
|
时隔几个月，又遇到了导出表格。做了一下汇总，重新编辑一下这篇文章，供以后的自己查找。也给各位码友提供一丢丢的参考。 前端导出表格，简单来讲，分三种情况 一、纯前端导出Excel（页面静态数据）这种情况下，是不需要请求后台接口，拿取全量数据的。取的全是前端静态页面的数据，也不考虑分页，所见即所得。 首先得npm 安装 FileSaver和XLSX， npm install -S file-saver xlsx或者 npm install xlsx npm install file-saver --save //导出表格引入FileSaver和XLSX import FileSaver from "file-saver"; import XLSX from "xlsx"; exportExcel(title) { /* generate workbook object from table */ var wb = XLSX.utils.table_to_book( document.querySelector("#exportTableContainer") ); /* get binary string as output */ var wbout = XLSX.write(wb, { bookType: "xlsx", bookSST: true, type: "array", }); try { FileSaver.saveAs( new Blob([wbout], { type: "application/octet-stream" }), title + ".xlsx" ); } catch (e) { if (typeof console !== "undefined") console.log(e, wbout); } return wbout; },wb是个什么东东呢？打印出来看一看 这种情况下，是后台组装好了所有数据，给前端返回的是一个二进制流，前端只需要下载就行了。 封装的exportExcel.js // 导出Excel公用方法 import axios from 'axios' export function exportMethod(data) { axios({ method: data.method, url: `${data.url}${data.params ? '?' + data.params : ''}`, responseType: 'blob' }).then((res) => { const link = document.createElement('a') let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'}) link.style.display = 'none' link.href = URL.createObjectURL(blob) // link.download = res.headers['content-disposition'] //下载后文件名 link.download = data.fileName //下载的文件名 document.body.appendChild(link) link.click() document.body.removeChild(link) }).catch(error => { this.$Notice.error({ title: '错误', desc: '网络连接错误' }) console.log(error) }) }引用的组件.vue import exportMethod from '@/utils/exportExcel.js' exportExcel1(){ const obj={ method: 'get', url: 'url', fileName: '机构信息列表', params: `startDate=${a}&endDate=${b)}` } exportMethod(obj) } 三、前端直接下载后端返回的Excel文件这种情况后台返回的本身就是一个文件，前端不需要太多处理，直接下载即可 //导出文本聊天记录接口 export function exportPerson(data){ return request({ url:'/record/export', method: 'post', data: data, responseType: 'blob', }) } const param={ //一系列请求参数 } //请求接口 exportPerson(param).then(res=>{ console.log(res) this.downloadFile(res,'聊天记录导出.xlsx') }) //下载文件 downloadFile(file,fileName){ const link = document.createElement("a"); link.style.display = "none"; link.href = URL.createObjectURL(file); link.setAttribute("download", fileName); document.body.appendChild(link); link.click(); document.body.removeChild(link); }, 四、前端将后台返回的数组对象或者JSON对象导出Excel这种情况下，前端发送请求，后台把你需要导出的数据发送给你，前端再处理下载。如果项目是基于elementUI，且只是一般表格，并没有多级表头的情况下，可以参考这篇文章（以后有时间再完善更新普通表格的导出情况），实现element表格导出为excel表格，或者这篇也可以，我的项目是基于Vue-element-admin，Vue-element-admin中导出表格，有自身的api,点击查看如何导出普通Excel，但是多级表头的表格，就需要合并单元格了。下面重点来讲的就是多级表头。 需求导出表格如图 html 导出数据js import { exportGzbs } from "@/api/county"; import { getCookie,setCookie,removeCookie } from '@/utils/Cookie' export default { data() { return { submit_time: "", downloadLoading: false, filename: "", //导出文件名 autoWidth: true, //单元格自动宽度 bookType: "xlsx", //导出表格格式 exportDataList: [] }, }, methods: { //导出数据 exportData() { const params = { user_id: this.$store.getters.token, inter_version: "1", dispatch_level: this.form.dispatch_level, type: 1, search_str:this.form.search_str, submit_time: getCookie('submit_time') }; //请求接口，查询表格内容数据 exportGzbs(params).then(res => { if (res.data) { this.exportDataList = res.data; this.service_country = res.service_country this.downloadLoading = true; import("@/vendor/Export2Excel").then(excel => { const multiHeader = [ [ "第一书记工作开展情况表", "","","","","", "","","","","", "","","","","", "","","","","", "","","","","", "","","","","", "","","","","", "","","","","", "","","","","", "","","","","", "","","","","", "","","","", ], //第一行 [ "区县：",this.service_country, "开始日期：",getCookie('startTime'),"截止日期：",getCookie('endTime'),"","","","","","","","", "","","","","","","","","","", "","","","","","","","","","", "","","","","","","","","","", "","","","","","","","","","", "","","","" ], //第二行 [ "村庄名称", "帮包村数量（个）", "联系党员群众情况", "", "","","", "帮包规划", "","", "基层组织建设情况", "","","","", "","","","","","","", "派出单位支持情况", "","", "","", "", "巩固提升脱贫情况", "", "","", "产业发展实施情况", "","","", "", "","","", "乡村文明建设情况", "", "","", "村级治理情况", "","", "办实事解难题情况", "", "", "","","", "","","", "","","" ] //第三行 ]; // 前三行的表头数据，二维数组，不够的用空白补全 const header = [ "", "", "走访党员（名）", "走访群众（户）", "发放调查问卷（份）", "召开座谈会（次）", "慰问党员、贫困户（户）", "已制定的（个）", "经派出单位党组（党委）集体研究的（个）", "经村民代表会议或村民会议通过的（个）", "新建党组织（个）", "帮助调整选配党组织书记（名）", "帮助调整选配“两委”成员（名）", "发展党员（名）", "发展入党积极分子（名）", "培养后备干部（名）", "吸引、培养产业发展人才（人）", "健全完善管用制度（个）", "新建或改建村级办公场所（个）", "召开党员大会（次）", "召开村民代表会议或村民会议（次）", "组织开展主题党日等党员活动（次）", "领导班子成员到村调研次数", "领导班子成员到村调研人次", "党委（党组）研究第一书记工作（次）", "主要领导听取第一书记工作汇报（次）", "单位到村组织开展活动（次）", "单位投入帮扶资金（万元）", "享受政策建档立卡贫困总户数（户）", "享受政策贫困总人口数（人）", "落实帮扶措施户数（户）", "落实帮扶措施脱贫人口数（人）", "外出学习考察次数（次）", "外出学习考察参加人次（人）", "发展培育产业项目（个）", "组织群众参加技能培训（次）", "成立合作社（个）", "带动参与产业发展群众（人）", "投入产业项目资金（万元）", "帮助新增村集体经营性收入(万元)", "组织开展文化活动次数（次）", "新建农民书屋（个）", "新建文化广场（个）", "帮助兴建体育设施（处）", " “四议两公开”制度实施（次）", "村务党务财务公开（次）", "指导完善村规民约（部）", "帮助通路村（个）", "修路里程(公里)", "帮助改电、通电村（个）", "安装路灯（盏）", "帮助通自来水的村（个）", "打井（眼）", "解决水浇地（亩）", "新建和改建卫生室（个）", "新建和改建幼儿园（个）", "帮助危房改造（处）", "帮助残疾、特困等符合条件人员落实扶贫涉农政策，解决实际问题（个）", "争取社会资金(万元)" ]; // 最后一行也就是第四行的表头数据 const filterVal = [ "bs_name", "bcsl_num", "zfdy_num", "zfqz_num", "fydcwj_num", "zkzth_num", "wwdypkh_num", "yzd_num", "dzjtyj_num", "cmhytg_num", "xjdzz_num", "xpdzzsj_num", "xplwcy_num", "fzdy_num", "rdjjfz_num", "pyhbgb_num", "pycyfzrc_num", "jqwsglzd_num", "xgcjbgcs_num", "zkdydh_num", "zkcmhy_num", "zzkzdyhd_num", "ldbzdy_num", "ldbzdyr_num", "dwyjgz_num", "tqhbgz_num", "dwzzhd_num", "dwtrzj_num", "xszklkpk_num", "xszcpkzws_num", "lsbfcs_num", "lsbfcstp_num", "wcxxkc_num", "wcxxkcr_num", "fzpycy_num", "zzqwpx_num", "clhzs_num", "ddcycyfzqz_num", "trcyxm_dec", "bzxzcjtyysr_dec", "zzkzwhhd_num", "xjnmsw_num", "xjwhgc_num", "bzxjtyss_num", "sylgkzkss_num", "cwdwcwgk_num", "zdwscgmy_num", "bztlc_num", "xllc_num", "bzgdtdc_num", "azld_num", "bztzls_num", "dj_num", "jjsjd_num", "xjhgjwss_num", "xjhgjyey_num", "bzwfgz_num", "bzcjtk_num", "zqshzj_dec" ]; const list = this.exportDataList; const data = this.formatJson(filterVal, list); console.log(data); const merges = [ "A1:V1", "A3:A4", "B3:B4", "C3:G3", "H3:J3", "K3:V3", "W3:AB3", "AC3:AF3", "AG3:AN3", "AO3:AR3", "AS3:AU3", "AV3:BG3" ]; // 合并单元格的数据， excel.export_json_to_excel({ multiHeader, header, merges, data, filename: "第一书记工作开展情况表", //非必填 autoWidth: true, //非必填 bookType: "xlsx" //非必填 }); this.downloadLoading = false; }); } }); }, formatJson(filterVal, jsonData) { return jsonData.map((v, index) => filterVal.map(j => { // if (j === "gender") { // console.log(j); // return (v[j] = v[j] == "0" ? "未知" : v[j] == "1" ? "男" : "女"); // } else { // return v[j]; // } return v[j]; }) ); } } };multiHeader是个二维数组，里面依次定义了前几行的表头，内里的每个数组长度应当保持一致，否则可能会报错哦。开始日期和截止日期是上个页面存储的月份。header定义了最后一行紧挨着表格数据的表头内容，filterVal定义了字段名称，查询回来的数据列表list，根据filterVal数组进行映射、处理，比如性别字典的翻译等，处理成最终Excel表格需要的数据。字段名有些多，可以看下这个简版的使用js-xlsx插件导出多级表头excel |
针对次方法，有兴趣想深入了解的同学，可以看看这个文章➡️ js-xlsx使用
【本文地址】
今日新闻 |
推荐新闻 |