常见文件的在线预览
本文转载于B站大佬：王清江哊，感谢大佬的分享 ^_^：
第一步：引入依赖，如下：
npm i xlsx
第二步：写入XLSX的API
第三步： Vue文件：写一个
<template> <div class="home"> <div v-html="myTable"></div> </div> </template> <script> import {getExcel} from "@/api/gzh/online"; import * as xlsx from "xlsx"; export default { name: "testExcel", data() { return { myTable: undefined } }, mounted() { getExcel('http://wangqingjiang.top/prod-api/profile/upload/2022/09/26/%E5%A7%8B%E5%85%B4%E4%B8%9A%E5%8A%A18%E6%9C%88%E6%8E%A5%E5%8D%95_20220926204400A003.xlsx') .then((data) => { const workbook = xlsx.read(new Uint8Array(data), {type: "array"}); const worksheet = workbook.Sheets[workbook.SheetNames[0]]; this.myTable = xlsx.utils.sheet_to_html(worksheet); }) } } </script> <style scoped> .home { } </style>
3.1 get请求,arraybuffer
3.2 写.vue文件
第四步： Vue文件的名字叫testExcel，就是调用API接口
<template> <div class="home"> <div v-html="myTable"></div> </div> </template> <script> import {getExcel} from "@/api/gzh/online"; import * as xlsx from "xlsx"; export default { name: "testExcel", data() { return { myTable: undefined } }, mounted() { getExcel('http://wangqingjiang.top/prod-api/profile/upload/2022/09/26/%E5%A7%8B%E5%85%B4%E4%B8%9A%E5%8A%A18%E6%9C%88%E6%8E%A5%E5%8D%95_20220926204400A003.xlsx') .then((data) => { const workbook = xlsx.read(new Uint8Array(data), {type: "array"}); const worksheet = workbook.Sheets[workbook.SheetNames[0]]; this.myTable = xlsx.utils.sheet_to_html(worksheet); }) } } </script> <style scoped> .home { } </style>
第五步：先把Excel放到data里面
第六步：工作系统，获得第0个
第七步:
第八步 添加路由
{ path: '/testExcel', component: () => import('@/views/testExcel'), hidden: true },
第九步访问HTML很丑
第十步好看的写法：
<template> <div class="home"> <div class="wait" v-if="excelData.length===0"> 渲染中，请等待！ </div> <el-table v-else :data="excelData" style="width:100%"> <el-table-column v-for="(value, key, index) in excelData[2]" :key="index" :prop="key" :label="key" > </el-table-column> </el-table> </div> </template> <script> import {getExcel} from "@/api/gzh/online"; import * as xlsx from "xlsx"; export default { name: "testExcel", data() { return { excelData: [] } }, mounted() { getExcel('http://wangqingjiang.top/prod-api/profile/upload/2022/09/26/%E5%A7%8B%E5%85%B4%E4%B8%9A%E5%8A%A18%E6%9C%88%E6%8E%A5%E5%8D%95_20220926204400A003.xlsx') .then((data) => { const workbook = xlsx.read(new Uint8Array(data), {type: "array"}); const worksheet = workbook.Sheets[workbook.SheetNames[0]]; this.excelData = xlsx.utils.sheet_to_json(worksheet); }) } } </script> <style scoped> .home { } .wait { width: 100%; font-size: 120px; color: red; height: 100%; text-align: center; } </style>
第十一步： 把他转成JSON数据
第十一步 等他到0的时候，渲染的时候提醒一下等待一下，进行一个验证迭代
现在就好看多了
