Vue+ElementUI+xlsx實(shí)現(xiàn)讀取xlsx文件并展示在頁面中

• 1检激、創(chuàng)建vue 項(xiàng)目安裝所需要的依賴

    vue create node-xlsx    # 創(chuàng)建項(xiàng)目
  
    cd node-xlsx
  
    npm install  element-ui -S
  
    npm install xlsx -S
  

• 2、在main.js 中引入element-ui

  import ElementUI from 'element-ui';
  
  import 'element-ui/lib/theme-chalk/index.css';
  
  Vue.use(ElementUI);
  

• 3墙懂、在vue組件中使用xlsx

 <template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
    <hr />
    <el-upload
      class="upload"
      action
      :multiple="false"
      :show-file-list="false"
      accept="csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
      :http-request="httpRequest"
    >
      <el-button size="small" type="primary">上傳</el-button>
    </el-upload>
  </div>
</template>

<script>
import XLSX from "xlsx";  //引入xlsx
export default {
  data() {
    return {
      tableData: []
    };
  },
  methods: {
    httpRequest(e) {
      let file = e.file; // 文件信息
      if (!file) {
        // 沒有文件
        return false;
      } else if (!/\.(xls|xlsx)$/.test(file.name.toLowerCase())) {
        // 格式根據(jù)自己需求定義
        this.$message.error("上傳格式不正確滩字，請上傳xls或者xlsx格式");
        return false;
      }

      const fileReader = new FileReader();
      let this_ = this;
      fileReader.onload = ev => {
        try {
          const data = ev.target.result;
          const workbook = XLSX.read(data, {
            type: "binary" // 以字符編碼的方式解析
          });
          console.log(workbook)
          const exlname = workbook.SheetNames[0]; // 取第一張表
          console.log(XLSX)
          let exl = XLSX.utils.sheet_to_json(workbook.Sheets[exlname]); // 生成json表格內(nèi)容
          exl.map(item => {
            let time = this_.getNextDate("1900-01-01", item.date - 2);
            return (item.date = time);
          });
          this.tableData = exl;
        } catch (e) {
          console.log("出錯了：：");
          return false;
        }
      };
      fileReader.readAsBinaryString(file);
    },
    getNextDate(date, day) {
      var dd = new Date(date);
      dd.setDate(dd.getDate() + day);
      var y = dd.getFullYear();
      var m =
        dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
      var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
      return y + "-" + m + "-" + d;
    }
  }
};
</script>

• 4继找、注意
  .xlsx中的日期獲取到的數(shù)據(jù)是輸入的日期到1900-01-01的天數(shù)差
  使用時(shí)期轉(zhuǎn)換的時(shí)候，我這邊多了兩天（目前還沒有找到原因）

• 5户辱、下面是運(yùn)行的項(xiàng)目的展示

  
  
  test.gif