excel在线编辑样式

package.json

@@ -44,6 +44,7 @@
     "echarts-liquidfill": "^2.0.6",
     "echarts-wordcloud": "^1.1.3",
     "element-ui": "2.15.8",
+    "exceljs": "^4.3.0",
     "ezuikit-js": "0.0.7",
     "file-saver": "1.3.8",
     "fuse.js": "3.4.4",
@@ -52,12 +53,14 @@
     "jquery": "^3.6.0",
     "js-beautify": "^1.10.2",
     "js-cookie": "2.2.0",
+    "js-guid": "^1.0.2",
     "jsencrypt": "^3.0.0-rc.1",
     "jssip": "^3.10.0",
     "jswebrtc": "^1.0.0",
     "jszip": "3.1.5",
     "less": "^4.2.0",
     "less-loader": "^7.3.0",
+    "lodash": "^4.17.21",
     "mars3d": "^3.1.3",
     "mavon-editor": "^2.9.0",
     "moment": "^2.29.4",
@@ -68,6 +71,7 @@
     "recorder-core": "*",
     "screenfull": "4.2.0",
     "sortablejs": "1.8.4",
+    "tinycolor2": "^1.6.0",
     "video.js": "^8.0.4",
     "videojs": "^1.0.0",
     "videojs-contrib-hls": "^5.15.0",

src/views/productionPlanManagement/mineFile/index.vue

@@ -62,7 +62,8 @@
     <!-- 表单渲染 -->
     <el-dialog append-to-body :close-on-click-modal="false" :before-close="cancelForm" :visible.sync="visible" :title="openFile.fileName" width="1600px" top="1vh">
       <div v-if="openFile.isLoading" style="width: 100%;text-align: center">正在读取文件...</div>
-      <div id="x-spreadsheet-excel"></div>
+<!--      <div id="x-spreadsheet-excel"></div>-->
+      <excel-spread-sheet ref="ExcelSpreadSheet" SheetName="sheet1" :ColumnWidth="300" style="width:100%;height:80vh"></excel-spread-sheet>
       <div slot="footer" class="dialog-footer" style="text-align: center">
         <el-button @click="cancelForm">关闭</el-button>
         <el-button type="primary" @click="updataEcxel">保存</el-button>
@@ -118,11 +119,14 @@ import Spreadsheet from "x-data-spreadsheet";
 import 'x-data-spreadsheet/dist/locale/zh-cn';
 import {Tools, HttpReq, Dates} from '@/assets/js/common.js';
 
+import ExcelSpreadSheet from "./excelSpreadSheet.vue";
+
+
 export default {
-  name: 'visitPeople',
+  components: { ExcelSpreadSheet },
+  name: 'mineFile',
   data() {
     return {
-      colors: [{color: '#f56c6c', percentage: 20}, {color: '#e6a23c', percentage: 40}, {color: '#5cb87a', percentage: 60}, {color: '#1989fa', percentage: 80}, {color: '#6f7ad3', percentage: 100}],
       title: '',
       fileUploadApi: '',
       headers: {'Authorization': getToken()},
@@ -138,7 +142,7 @@ export default {
       total: 0,
       tableData: [],
       openFile: {
-        fileName: '',
+        fileName: 'excel',
         isLoading: false,
         percentage: 0
       },
@@ -157,6 +161,9 @@ export default {
     })
   },
   methods: {
+    loadExcelFile(e) {
+      this.file = e.target.files[0]
+    },
     openLog(item) {
       this.logVisible = true
       HttpReq.truckDispatching.scQueryByUrl({url:item.url}).then((res) => {
@@ -272,20 +279,34 @@ export default {
         reader.readAsArrayBuffer(blob);
       });
     },
+    arrayBufferToBase64(buffer) {
+      let binary = '';
+      let bytes = new Uint8Array( buffer );
+      let len = bytes.byteLength;
+      for (let i = 0; i < len; i++) {
+        binary += String.fromCharCode( bytes[ i ] );
+      }
+      return window.btoa( binary );
+    },
     updataEcxel() {
-      HttpReq.truckDispatching.scUploadExcelByBase64({
-        base64: XLSX.write(this.xtos(this.xs.getData()), {bookType: 'xlsx', type: 'base64'}),
-        url: this.openFile.url
-      }).then((res) => {
-        this.$notify({
-          title: res.msg,
-          type: res.code === 200 ? 'success' : 'error',
-          duration: 2500
+      const exceljsWorkbook = this.$refs.ExcelSpreadSheet.dataXstoEjs()
+      exceljsWorkbook.xlsx.writeBuffer().then((buffer) => {
+        // 将ArrayBuffer转换为Base64字符串
+        const base64 = this.arrayBufferToBase64(buffer);
+        HttpReq.truckDispatching.scUploadExcelByBase64({
+          base64: base64,
+          url: this.openFile.url
+        }).then((res) => {
+          this.$notify({
+            title: res.msg,
+            type: res.code === 200 ? 'success' : 'error',
+            duration: 2500
+          })
+          if (res.code === 200) {
+            this.cancelForm()
+          }
         })
-        if (res.code === 200) {
-          this.cancelForm()
-        }
-      })
+      });
     },
     viewTable(item) {
       this.openFile = item
@@ -304,23 +325,8 @@ export default {
             this.reconnect();
           }, 15000);
           HttpReq.truckDispatching.downloadExcelOrFbx({url: item.url, type: this.query.type}).then((res) => {
-            if(!this.xs){
-              Spreadsheet.locale('zh-cn');
-              this.xs = new Spreadsheet("#x-spreadsheet-excel", {
-                view:{
-                  width: () =>{return 1600},
-                  height: () =>{return 800}
-                },
-                style: {
-                  align: 'center',
-                  valign: 'middle',
-                }
-              })
-            }
             this.blobToArrayBuffer(res).then(arrayBuffer => {
-              // 外部引用sheetjs提供全局变量XLSX
-              let wb = XLSX.read(arrayBuffer)
-              this.xs.loadData(this.stox(wb))
+              this.$refs.ExcelSpreadSheet.loadExcelFileStream(arrayBuffer)
             })
           })
         }