Browse Source

引入解析xlsx文件第三方库,可以在页面显示上传的表格或上传后端生成word表格文件。

wucl 9 months ago
parent
commit
a6c7b06734
4 changed files with 941 additions and 2657 deletions
  1. 858 2645
      package-lock.json
  2. 2 1
      package.json
  3. 62 0
      src/components/SheetView/index.vue
  4. 19 11
      src/views/house/workbench/consignor.vue

File diff suppressed because it is too large
+ 858 - 2645
package-lock.json


+ 2 - 1
package.json

@@ -19,7 +19,8 @@
     "unplugin-auto-import": "^0.18.3",
     "unplugin-auto-import": "^0.18.3",
     "unplugin-vue-components": "^0.27.4",
     "unplugin-vue-components": "^0.27.4",
     "vue": "^3.5.11",
     "vue": "^3.5.11",
-    "vue-router": "^4.4.5"
+    "vue-router": "^4.4.5",
+    "xlsx": "^0.18.5"
   },
   },
   "devDependencies": {
   "devDependencies": {
     "@eslint/js": "^9.12.0",
     "@eslint/js": "^9.12.0",

+ 62 - 0
src/components/SheetView/index.vue

@@ -0,0 +1,62 @@
+<template>
+    <div>
+      <input type="file" @change="readExcel" />
+      <div v-if="excelData">
+        <div v-html="excelData"></div>
+         <div>{{ excelData }}</div>
+      </div>
+    </div>
+  </template>
+   
+  <script>
+  import * as XLSX from 'xlsx';
+   
+  export default {
+    data() {
+      return {
+        excelData: null,
+      };
+    },
+    methods: {
+      readExcel(event) {
+        const files = event.target.files;
+        if (files && files[0]) {
+          const fileReader = new FileReader();
+          fileReader.onload = (e) => {
+            const bufferArray = e.target.result;
+            const wb = XLSX.read(bufferArray, { type: 'buffer' });
+            const wsname = wb.SheetNames[2];
+            const ws = wb.Sheets[wsname];
+            this.excelData = XLSX.utils.sheet_to_html(ws);
+          };
+          fileReader.readAsArrayBuffer(files[0]);
+        }
+      },
+    },
+  };
+  </script>
+
+  <style >
+    table {
+            border-collapse: collapse;
+            font-size: 15px;
+            width: 100%;
+        }
+ 
+        table,table tr th,table tr td {
+            border: 1px solid #ddd;
+            text-align: center;
+            padding: 5px;
+        }
+ 
+        /* 奇数行的颜色 */
+        table tbody tr:nth-child(odd) {
+            background-color: #EFF3F5;
+        }
+ 
+        /* 偶数行的颜色 */
+        table tbody tr:nth-child(even) {
+            background-color: #FFFFFF;
+        }
+
+  </style>

+ 19 - 11
src/views/house/workbench/consignor.vue

@@ -19,27 +19,35 @@
             </el-form-item>
             </el-form-item>
         </el-form>
         </el-form>
         <SwitchButton :nextPath="nextPath"></SwitchButton>
         <SwitchButton :nextPath="nextPath"></SwitchButton>
+        <SheetView></SheetView>
+        
     </div>
     </div>
 </template>
 </template>
 
 
 <script>
 <script>
 import  SwitchButton from '../../../components/SwichButton/index.vue'
 import  SwitchButton from '../../../components/SwichButton/index.vue'
+import  SheetView from '../../../components/SheetView/index.vue'
  export default {
  export default {
     components:{
     components:{
-        SwitchButton
+        SwitchButton,
+        SheetView
     },
     },
     data() {
     data() {
-    return {
-        consignor: {
-            name: null,
-            type: null,
-            address: null,
-            legalPerson: null,
-            legalCode: null
-        },
-        nextPath:'/home/houseWorkbench/certificate'
+        return {
+            consignor: {
+                name: null,
+                type: null,
+                address: null,
+                legalPerson: null,
+                legalCode: null
+            },
+            nextPath:'/home/houseWorkbench/certificate'
+        }
+    },
+
+    methods:{
+       
     }
     }
-}
  }
  }