vue 預覽 Excel 表格

個人網站
https://kuangyx.cn
1、安裝插件
npm i xlsx

2、示例

<template>
  <div class="home">
    <div v-html="tableau"></div>
  </div>
</template>

<script>
import axios from 'axios'
import XLSX from "xlsx";
export default {
  data(){
    return {
      tableau: null,
    }
  },
  mounted(){
     axios.get('/xlsx',{
       responseType: "arraybuffer", // 設置響應體類型為arraybuffer
     }).then(({data})=> {
       let workbook = XLSX.read(new Uint8Array(data), {type:"array"}); // 解析數據
       var worksheet = workbook.Sheets[workbook.SheetNames[0]]; // workbook.SheetNames 下存的是該文件每個工作表名字,這里取出第一個工作表
       this.tableau = XLSX.utils.sheet_to_html(worksheet); // 渲染
     })
  }
}
</script>

• 以上方法簡單的渲染成表格,需要自己修改樣式,需要編輯功能可以去看xlsx的api文檔