基础组件新增导出多 sheet 单文件表格的方法

src/tools/basicTool.js

@@ -13,7 +13,7 @@ export default {
    * @param {String} msg 消息提示的内容
    * @param {String} type 消息提示的类型，可选值为 ['success(成功)','warning(警告)','error(错误)',或者直接传入空字符串]，默认 error
    */
-  showMsg (options) {
+  showMsg(options) {
     ElMessage({
       showClose: (options.showClose == true || options.showClose == false) ? options.showClose : false,
       center: (options.center == true || options.center == false) ? options.center : true,
@@ -32,7 +32,7 @@ export default {
    * @param {String} text 蒙版上显示的提示文本
    * @param {String} background 蒙版的背景颜色，写死 50% 透明度的纯黑色
    */
-  showLoading (opt) {
+  showLoading(opt) {
     let options = opt || {};
     loadingStatus = ElLoading.service({
       target: options.target || 'body',
@@ -48,7 +48,7 @@ export default {
    * 获取标签上的自定义属性
    * @param {any} node 传入 字符串 或 标准DOM对象 或 jQuery DOM对象 ，函数自动判断传入的类型并返回其 dataset 属性。
    */
-  getCurrentData (node) {
+  getCurrentData(node) {
     // 如果传入的是 jQuery 对象
     if (window.jQuery && node instanceof jQuery) {
       return node[0].dataset;
@@ -76,7 +76,7 @@ export default {
   /**
    * 关闭loading
    */
-  closeLoading () {
+  closeLoading() {
     loadingStatus.close();
   },
 
@@ -84,7 +84,7 @@ export default {
    * 深拷贝 json 数组
    * @param {Array} jsonArray 传入 Json 数组，返回一个指向新指针拷贝份数据
    */
-  deepCopy (jsonArray) {
+  deepCopy(jsonArray) {
     return JSON.parse(JSON.stringify(jsonArray));
   },
 
@@ -93,14 +93,14 @@ export default {
    * @param {String} key 需要找到的 ID
    * @param {Array} treeData 树形 Array
    */
-  getTreeDeepArr (key, treeData) {
+  getTreeDeepArr(key, treeData) {
 
     let arr = []; // 在递归时操作的数组
     let returnArr = []; // 存放结果的数组
     let depth = 0; // 定义全局层级
 
     // 定义递归函数
-    function childrenEach (childrenData, depthN) {
+    function childrenEach(childrenData, depthN) {
 
       for (var j = 0; j < childrenData.length; j++) {
 
@@ -138,7 +138,7 @@ export default {
    * 获取数据的类型
    * @param {any} options 传入一个数据，返回其类型 (object, array, string, number等)
    */
-  getType (options) {
+  getType(options) {
     return Object.prototype.toString.call(options).slice(8, Object.prototype.toString.call(options).length - 1).toLowerCase();
   },
 
@@ -151,7 +151,7 @@ export default {
    * @param {Number} speed 滚动到指定位置需要的时间 (动画时间)，默认 200
    * @param {Function} success 滚动执行完毕后的回调函数
    */
-  scrollTo (options) {
+  scrollTo(options) {
     if (!options || !options.el) {
       this.showMsg({
         msg: 'scrollTo() 方法需要传入 el 属性'
@@ -175,7 +175,7 @@ export default {
    * @param {Object} tableData 用于规定表格表头和内容的 Object
    * @param {String} excelName 导出的文件名
    */
-  exportExcel (tableData, excelName) {
+  exportExcel(tableData, excelName) {
     const { export_json_to_excel } = require('@tools/excel/Export2Excel.js'); // 注意这个Export2Excel路径      
     let tHeader = []; // 上面设置Excel的表格第一行的标题       
     let filterVal = []; // 上面的index、nickName、name是tableData里对象的属性key值   
@@ -194,10 +194,22 @@ export default {
     export_json_to_excel(tHeader, data, (excelName || "导出的Excel")); // 最后一个是表名字
   },
 
+  /**
+   * 导出多个 sheet 的单独表格
+   * @param {Array} thArray sheet 的表头，需传入二维数组
+   * @param {Array} dataArray 表格数据，需传入二维数组
+   * @param {Array} sheetNameArray sheet 的名称
+   * @param {String} fileName 导出的文件名称
+   */
+  exportMultiple(thArray, dataArray, sheetNameArray, fileName) {
+    const { exportMultiple } = require('@tools/excel/Export2Excel.js'); // 注意这个Export2Excel路径
+    exportMultiple(thArray, dataArray, sheetNameArray, fileName);
+  },
+
 
 
   // JS 触发全屏功能
-  requestFullscreen () {
+  requestFullscreen() {
     //全屏
     const docElm = document.documentElement;
     //W3C
@@ -225,7 +237,7 @@ export default {
    * 颜色进制转换  16 <--> 10 互转
    * @param {String} colorStr 传入一个颜色字符串， 16进制 或者 10进制 ，返回转换后的结果，例：传入 #1890ff ，返回 rgb(24, 144, 255)，反之亦然
    */
-  replaceColor (colorStr) {
+  replaceColor(colorStr) {
     if (!colorStr) return '';
 
     let colorString = colorStr.replace(/#|rgb|\(|\)|\|;|\s+/g, "");
@@ -261,7 +273,7 @@ export default {
   },
 
   elCkeck: {
-    isNumber (rule, value, callback) {
+    isNumber(rule, value, callback) {
       if (value === '') {
         callback(new Error('该值不可为空'));
       } else if (!/^(-?\d+)(\.\d+)?$/.test(value)) {

src/tools/excel/Export2Excel.js

@@ -4,7 +4,7 @@ require('script-loader!file-saver');
 require('./Blob.js');//转二进制用  这边要写你的blob的实际地址
 require('script-loader!xlsx/dist/xlsx.core.min');
 
-function generateArray (table) {
+function generateArray(table) {
   var out = [];
   var rows = table.querySelectorAll('tr');
   var ranges = [];
@@ -54,13 +54,13 @@ function generateArray (table) {
   return [out, ranges];
 };
 
-function datenum (v, date1904) {
+function datenum(v, date1904) {
   if (date1904) v += 1462;
   var epoch = Date.parse(v);
   return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
 }
 
-function sheet_from_array_of_arrays (data, opts) {
+function sheet_from_array_of_arrays(data, opts) {
   var ws = {};
   var range = {
     s: {
@@ -102,29 +102,27 @@ function sheet_from_array_of_arrays (data, opts) {
   return ws;
 }
 
-function Workbook () {
+function Workbook() {
   if (!(this instanceof Workbook)) return new Workbook();
   this.SheetNames = [];
   this.Sheets = {};
 }
 
-function s2ab (s) {
+function s2ab(s) {
   var buf = new ArrayBuffer(s.length);
   var view = new Uint8Array(buf);
   for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
   return buf;
 }
 
-export function export_table_to_excel (id) {
+export function export_table_to_excel(id) {
   var theTable = document.getElementById(id);
-  console.log('a')
   var oo = generateArray(theTable);
   var ranges = oo[1];
 
   /* original data */
   var data = oo[0];
   var ws_name = "风机数据";
-  console.log(data);
 
   var wb = new Workbook(),
     ws = sheet_from_array_of_arrays(data);
@@ -148,10 +146,9 @@ export function export_table_to_excel (id) {
   }), "test.xlsx")
 }
 
-function formatJson (jsonData) {
-  console.log(jsonData)
+function formatJson(jsonData) {
 }
-export function export_json_to_excel (th, jsonData, defaultTitle) {
+export function export_json_to_excel(th, jsonData, defaultTitle) {
 
   /* original data */
 
@@ -178,51 +175,100 @@ export function export_json_to_excel (th, jsonData, defaultTitle) {
   }), title + ".xlsx")
 };
 
-export function export_blob (th, jsonData,defaultTitle) {
+export function export_blob(th, jsonData, defaultTitle) {
   var data = jsonData;
   data.unshift(th);
   var ws_name = "风机数据";
   var wb = new Workbook(),
-  ws = sheet_from_array_of_arrays(data);
+    ws = sheet_from_array_of_arrays(data);
   /* add worksheet to workbook */
   wb.SheetNames.push(ws_name);
   wb.Sheets[ws_name] = ws;
-  var wbout = XLSX.write(wb, {bookType: 'xlsx',bookSST: false,type: 'binary'});
-  
-  if(defaultTitle){//只渲染一个excel
-  	saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}),defaultTitle+".xlsx")
-  }else{//返回多个blob
-  	var aaa = new Blob([s2ab(wbout)], {type: 'text/plain'});
-  	return aaa;
+  var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: false, type: 'binary' });
+
+  if (defaultTitle) {//只渲染一个excel
+    saveAs(new Blob([s2ab(wbout)], { type: "application/octet-stream" }), defaultTitle + ".xlsx")
+  } else {//返回多个blob
+    var aaa = new Blob([s2ab(wbout)], { type: 'text/plain' });
+    return aaa;
   }
 };
 
 export function export_more_blob(th, jsonData, defaultTitle) {
-    var data = jsonData;
-    //添加标题
-    for (var i = 0; i < th.length; i++) {
-      data[i].unshift(th[i])
-    }
-    //这里是定义sheet的名称 有几个sheet就加几个
-    var ws_name = ["日上网电量","上网功率","测风塔数据"];
-    var wb = new Workbook(),ws=[];
-    //数据转换
-    for (var j = 0; j < th.length; j++) {
-      ws.push(sheet_from_array_of_arrays(data[j]))
-    }
-    /* add worksheet to workbook */
-    //生成多个sheet
-    for (var k = 0; k < th.length; k++) {
-      wb.SheetNames.push(ws_name[k])
-      wb.Sheets[ws_name[k]] = ws[k]
-    }
-	
-    var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});
-    
-	if(defaultTitle){//只渲染一个excel
-		saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}),defaultTitle+".xlsx")
-	}else{//返回多个blob
-		var aaa = new Blob([s2ab(wbout)], {type: 'text/plain'});
-		return aaa;
-	}
-} 
+  var data = jsonData;
+  //添加标题
+  for (var i = 0; i < th.length; i++) {
+    data[i].unshift(th[i])
+  }
+  //这里是定义sheet的名称 有几个sheet就加几个
+  var ws_name = ["日上网电量", "上网功率", "测风塔数据"];
+  var wb = new Workbook(), ws = [];
+  //数据转换
+  for (var j = 0; j < th.length; j++) {
+    ws.push(sheet_from_array_of_arrays(data[j]))
+  }
+  /* add worksheet to workbook */
+  //生成多个sheet
+  for (var k = 0; k < th.length; k++) {
+    wb.SheetNames.push(ws_name[k])
+    wb.Sheets[ws_name[k]] = ws[k]
+  }
+
+  var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: false, type: 'binary' });
+
+  if (defaultTitle) {//只渲染一个excel
+    saveAs(new Blob([s2ab(wbout)], { type: "application/octet-stream" }), defaultTitle + ".xlsx")
+  } else {//返回多个blob
+    var aaa = new Blob([s2ab(wbout)], { type: 'text/plain' });
+    return aaa;
+  }
+}
+
+export function exportMultiple(thArray, dataArray, sheetNameArray, fileName = "导出的Excel") {
+
+  let ws_name = sheetNameArray;
+  let wb = new Workbook();
+  let ws = [];
+  let filterArray = [];
+
+  const formatJson = function (filterVal, jsonData) {
+    return jsonData.map(v => filterVal.map(j => v[j]));
+  };
+
+  thArray.forEach((pEle, pIndex) => {
+    ws.push([]);
+    dataArray[pIndex].unshift(pEle);
+    filterArray.push([]);
+    pEle.forEach(cEle => {
+      filterArray[pIndex].push(cEle.field);
+    });
+  });
+
+  thArray.forEach((pEle, pIndex) => {
+    const data = formatJson(filterArray[pIndex], dataArray[pIndex]);
+    ws[pIndex].push(sheet_from_array_of_arrays(data));
+    wb.SheetNames.push(ws_name[pIndex]);
+    wb.Sheets[ws_name[pIndex]] = ws[pIndex][0];
+  });
+
+
+  let cellKes = []
+  for (var i = 0; i < 26; i++) {
+    cellKes.push(String.fromCharCode(65 + i));
+  }
+
+  let idx = 0;
+  ws.forEach((pEle, pIndex) => {
+    idx = 0
+    thArray[pIndex].forEach(thEle => {
+      pEle.forEach(cEle => {
+        cEle[cellKes[idx] + 1] = { v: thEle.name, t: "s" }
+        idx++;
+      });
+    });
+  });
+
+  let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: false, type: 'binary' });
+  saveAs(new Blob([s2ab(wbout)], { type: "application/octet-stream" }), fileName + ".xlsx");
+
+}

src/views/About.vue

@@ -55,12 +55,12 @@
       </el-table>
       <!-- <list-bar-chart /> -->
     </template>
-    <cesium />
+    <!-- <cesium /> -->
   </div>
 </template>
 
 <script>
-// import ListBarChart from "../components/chart/bar/list-bar-chart.vue";
+import ListBarChart from "../components/chart/bar/list-bar-chart.vue";
 import HealthReport from "@com/other/healthReport/index.vue";
 import FJ from "@com/other/fj/index.vue";
 import clock from "@com/other/clock/index.vue";
@@ -79,7 +79,7 @@ export default {
     HealthReport,
     FJ,
     clock,
-    cesium
+    cesium,
   },
 
   created() {
@@ -97,6 +97,46 @@ export default {
     this.tableData = tableData;
   },
 
+  mounted() {
+    let thArray = [
+      [
+        { field: "name", name: "表1姓名" },
+        { field: "age", name: "表1年龄" },
+        { field: "sex", name: "表1性别" },
+      ],
+      [
+        { field: "name", name: "表2姓名" },
+        { field: "age", name: "表2年龄" },
+        { field: "sex", name: "表2性别" },
+      ],
+      [
+        { field: "name", name: "表3姓名" },
+        { field: "age", name: "表3年龄" },
+        { field: "sex", name: "表3性别" },
+      ],
+    ];
+
+    let dataArray = [
+      [
+        { name: "张三", age: 12, sex: "男" },
+        { name: "李四", age: 19, sex: "男" },
+      ],
+      [
+        { name: "王五", age: 9, sex: "女" },
+        { name: "赵六", age: 21, sex: "男" },
+      ],
+      [
+        { name: "吴七", age: 26, sex: "男" },
+        { name: "沈八", age: 17, sex: "女" },
+        { name: "刘九", age: 18, sex: "女" },
+      ],
+    ];
+
+    let sheetNameArray=["这是sheet-1","这是sheet-2","这是sheet-3"]
+
+    this.BASE.exportMultiple(thArray, dataArray, sheetNameArray, "单表格多sheet示例");
+  },
+
   methods: {
     showDialog() {
       this.show = true;