vue 中使用 exceljs 生成省市区关联表格
由于项目业务需要生成,后端需要前端生成表格进行批量导入进行处理上传的要求,所以在是 xlsx-js 与 excelj 两个库进行了选择,xlsx-js 官方有文档,英文类型的,个人嫌看起来麻烦,所以 exceljs 库有中文文档对我来讲还是挺友好的哈哈哈哈,个人选择哈,exceljs 的使用例子比较少所以写了这篇。
前提说明
项目基于 vue 框架,使用了 elementui,省市区数据使用 element-china-area-data 库里的数据,个人最稳妥的方法其实是后台有省市的数据结构传递过来进行数据绑定,而非传递数据字符串的值,不通过页面接口进行传一些不合理值也是不太好的,或者数据后台进行校验。
省市区结构
引入库
import {
regionData,CodeToText, TextToCode} from 'element-china-area-data'; // 数据来源
import ExcelJS from "exceljs";
import FileSaver from "file-saver"; // 用于生成文件
数据分级切割
//输出模板方法内
let province = {
}; // 省市对象
let city = {
}; // 市区对象
let provinceData = []; // 省数据表
let cityData = []; // 城市数据 用于添加单独表内建立省名称管理器
let areaData = []; // 区级数据 用于添加单独表内建立市名称管理器
let areaTotalSize = 0; // 用来表示区级数据的起点
let cityTotalSize = 0; // 用来标志市级数据的起点
// 名称管理器名字不能含括号特殊符号
for (let i = 0; i < regionData.length; i++) {
provinceData.push([regionData[i].label]);
province[regionData[i].label] = {
totalSize: 0, start: 0} ;
if (regionData[i].children&®ionData[i].children.length) {
for (let j = 0; j < regionData[i].children.length; j ++) {
// 基本都在第一位 位置索引为0
if (j == 0 ) {
// 对市辖区处理 因为 json 数据结构里有多个"市辖区"名称,同名管理器会覆盖
if (regionData[i].children[0].label == "市辖区") {
city[regionData[i].children[0].label + regionData[i].label] = {
totalSize: 0, start: 0};
cityData.push([regionData[i].children[j].label +regionData