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文档