|
@@ -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>
|