npm i xlsx
<template>
<div class="f-c h-f custom" style="overflow-y:scroll;">
<div v-html="excelData"></div>
</div>
</template>
<script>
import axios from 'axios'
import XLSX from "xlsx";
window.JSZip = require('jszip')
export default {
data(){
return {
excelData:'',
}
},
methods: {
preview(url) {
console.log('preview ---', url)
axios.get(url,{
responseType: "arraybuffer", // 设置响应体类型为arraybuffer
}).then(({data})=> {
let workbook = XLSX.read(new Uint8Array(data), {type:"array"}); // 解析数据
var worksheet = workbook.Sheets[workbook.SheetNames[0]]; // workbook.SheetNames 下存的是该文件每个工作表名字,这里取出第一个工作表
this.excelData = XLSX.utils.sheet_to_html(worksheet); // 渲染
})
},
},
}
</script>
<style scoped>
.custom /deep/table td{
text-align: center;
white-space: nowrap;
padding: 5px 10px;
border-top:1px solid #eee;
border-left:1px solid #eee;
}
.custom /deep/table{
border-bottom:1px solid #eee;
border-right:1px solid #eee;
}
</style>
