vue项目实现表格预览

装依赖：npm install XLSX

页面：

<template>
  <div class="el-container" id="xlsxView"></div>
</template>
<script>
import * as XLSX from 'xlsx';
export default {
  data() {
    return {
      tableUrl: "",
    };
  },
  created() {
    this.tableUrl = "/docs/cc.xlsx";
  },
  components: {},
  mounted(){
    this.initTable(this.tableUrl);
  },
  methods: {
    initTable(tableUrl) {
        let  _self = this;
        const xhr = new XMLHttpRequest();
        xhr.open("get", tableUrl, true);
        xhr.responseType = "arraybuffer";
        xhr.onload = function () {
            if (xhr.status == 200) {
                let data = new Uint8Array(xhr.response);
                let workbook = XLSX.read(data, { type: "array" });
                let sheetName = workbook.SheetNames;
                let innerHTML = "";
                // 遍历多个表
                for (let i in sheetName) {
                    let sheet = workbook.Sheets[sheetName[i]];
                    innerHTML += sheetName[i]+ XLSX.utils.sheet_to_html(sheet);
                }
                _self.$nextTick(() => {
                    document.querySelector("#xlsxView").innerHTML = innerHTML;
                });
            }
        };
        xhr.send();
    },
  },
};
</script>
<style >
table {
    border-collapse:collapse;
    border:none;
    font-size:0.23rem;
}

td,th {
    width:1px;
    white-space:nowrap; /* 自适应宽度*/
    word-break:keep-all; /* 避免长单词截断，保持全部 */
    border:solid #d5d5d5 1px;
    text-align:center;
    white-space:pre-line;
    display:table-cell;
    vertical-align:middle !important;
    height:auto;
    padding:2px 2px 0 2px;
    display: table-cell;
}    
</style>

　　

<template>

  <div class="el-container" id="xlsxView"></div>

</template>

<script>

import * as XLSX from 'xlsx';

export default {

  data() {

    return {

      tableUrl: "",

    };

  },

  created() {

    this.tableUrl = "/docs/cc.xlsx";

  },

  components: {},

  mounted(){

    this.initTable(this.tableUrl);

  },

  methods: {

    initTable(tableUrl) {

        let  _self = this;

        const xhr = new XMLHttpRequest();

        xhr.open("get", tableUrl, true);

        xhr.responseType = "arraybuffer";

        xhr.onload = function () {

            if (xhr.status == 200) {

                let data = new Uint8Array(xhr.response);

                let workbook = XLSX.read(data, { type: "array" });

                let sheetName = workbook.SheetNames;

                let innerHTML = "";

                // 遍历多个表

                for (let i in sheetName) {

                    let sheet = workbook.Sheets[sheetName[i]];

                    innerHTML += sheetName[i]+ XLSX.utils.sheet_to_html(sheet);

                }

                _self.$nextTick(() => {

                    document.querySelector("#xlsxView").innerHTML = innerHTML;

                });

            }

        };

        xhr.send();

    },

  },

};

</script>

<style >

table {

    border-collapse:collapse;

    border:none;

    font-size:0.23rem;

}

td,th {

    width:1px;

    white-space:nowrap; /* 自适应宽度*/

    word-break:keep-all; /* 避免长单词截断，保持全部 */

    border:solid #d5d5d5 1px;

    text-align:center;

    white-space:pre-line;

    display:table-cell;

    vertical-align:middle !important;

    height:auto;

    padding:2px 2px 0 2px;

    display: table-cell;

}    

</style>