no message

Former-commit-id: c29719b8663f2954e60b241be7930cc91f27075d
Former-commit-id: 1e2565e926aaf5f9c2075ebc7367cb71c613d20b
Former-commit-id: c20c9715fcca5eafda3742b6807317b28479c516

src/pages/demo/plugins/import/xlsx.vue

@@ -0,0 +1,106 @@
+<template>
+  <Container>
+    <PageHeader
+      slot="header"
+      title="导入 xlsx"
+      url="https://github.com/mholt/PapaParse">
+    </PageHeader>
+    <!-- <div class="dd-mb">
+      <el-button @click="download">
+        <Icon name="download"></Icon>
+        下载演示CSV
+      </el-button>
+    </div> -->
+    <div class="dd-mb">
+      <el-upload :before-upload="handleUpload" action="default">
+        <el-button type="success">
+          <Icon name="file-o"></Icon>
+          选择要导入的 CSV 文件
+        </el-button>
+      </el-upload>
+    </div>
+    <el-table v-bind="table" class="dd-mb">
+      <el-table-column
+        v-for="(item, index) in table.columns"
+        :key="index"
+        :prop="item.prop"
+        :label="item.label">
+      </el-table-column>
+    </el-table>
+    <Markdown url="/static/markdownFiles/article/插件 - 导入 - csv.md"></Markdown>
+  </Container>
+</template>
+
+<script>
+/* eslint-disable */
+import XLSX from 'xlsx'
+export default {
+  data() {
+    return {
+      table: {
+        columns: [],
+        data: [],
+        size: 'mini',
+        stripe: true,
+        border: true
+      }
+    }
+  },
+  methods: {
+    generateDate({ header, results }) {
+      this.table.columns = header.map(e => {
+        return {
+          label: e,
+          prop: e
+        }
+      })
+      this.table.data = results
+    },
+    handleUpload(file) {
+      // document.getElementById('excel-upload-input').click()
+      this.handkeFileChange(file)
+      return false
+    },
+    handkeFileChange(file) {
+      const itemFile = file
+      this.readerData(itemFile)
+    },
+    readerData(itemFile) {
+      const reader = new FileReader()
+      reader.onload = e => {
+        const data = e.target.result
+        const fixedData = this.fixdata(data)
+        const workbook = XLSX.read(btoa(fixedData), { type: 'base64' })
+        const firstSheetName = workbook.SheetNames[0]
+        const worksheet = workbook.Sheets[firstSheetName]
+        const header = this.get_header_row(worksheet)
+        const results = XLSX.utils.sheet_to_json(worksheet)
+        this.generateDate({ header, results })
+      }
+      reader.readAsArrayBuffer(itemFile)
+    },
+    fixdata(data) {
+      let o = ''
+      let l = 0
+      const w = 10240
+      for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)))
+      o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)))
+      return o
+    },
+    get_header_row(sheet) {
+      const headers = []
+      const range = XLSX.utils.decode_range(sheet['!ref'])
+      let C
+      const R = range.s.r /* start in the first row */
+      for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */
+        var cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })] /* find the cell in the first row */
+        var hdr = 'UNKNOWN ' + C // <-- replace with your desired default
+        if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
+        headers.push(hdr)
+      }
+      return headers
+    }
+  }
+}
+</script>
+

src/router/menu/_plugin.js

@@ -91,7 +91,7 @@ export const menu = {
       icon: 'upload',
       children: [
         {
-          title: 'CSV',
+          title: 'csv',
           icon: 'file-o',
           path: 'import/csv',
           name: 'demo-plugins-import-csv',
@@ -99,6 +99,16 @@ export const menu = {
             requiresAuth: true
           },
           component: resolve => { require(['@/pages/demo/plugins/import/csv.vue'], resolve) }
+        },
+        {
+          title: 'xlsx',
+          icon: 'file-o',
+          path: 'import/xlsx',
+          name: 'demo-plugins-import-xlsx',
+          meta: {
+            requiresAuth: true
+          },
+          component: resolve => { require(['@/pages/demo/plugins/import/xlsx.vue'], resolve) }
         }
       ]
     },