vue 中使用 exceljs 生成省市区关联表格

本文档介绍在Vue项目中利用exceljs库生成省市区关联的Excel表格,结合element-china-area-data数据,详细阐述了从数据处理、建表到设置数据验证和保护的过程,提供了一个实用的前端生成表格的解决方案。
摘要由CSDN通过智能技术生成

由于项目业务需要生成,后端需要前端生成表格进行批量导入进行处理上传的要求,所以在是 xlsx-js 与 excelj 两个库进行了选择,xlsx-js 官方有文档,英文类型的,个人嫌看起来麻烦,所以 exceljs 库有中文文档对我来讲还是挺友好的哈哈哈哈,个人选择哈,exceljs 的使用例子比较少所以写了这篇。

前提说明

项目基于 vue 框架,使用了 elementui,省市区数据使用 element-china-area-data 库里的数据,个人最稳妥的方法其实是后台有省市的数据结构传递过来进行数据绑定,而非传递数据字符串的值,不通过页面接口进行传一些不合理值也是不太好的,或者数据后台进行校验。

省市区结构

![](https://img-blog.csdnimg.cn/20210707152137732.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_a![数据结构说明]HR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDQxNDU0MA==,size_16,color_FFFFFF,t_70)

引入库

 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&&regionData[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
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值