npm install xlsx
<div class="box">
<van-overlay :show="fullUpload">
<div class="loadingBox">
<van-loading size="24px" color="#1989fa">加载中...</van-loading>
</div>
</van-overlay>
<!-- 切换 -->
<div class="tab" v-if="menuList.length > 1">
<van-tabs
:ellipsis="false"
v-model="active"
color="#3C71FF"
title-active-color="#3C71FF"
title-inactive-color="#999"
@change="onChange"
>
<van-tab :title="menuItem" v-for="(menuItem, index) in menuList" :key="index"> </van-tab>
</van-tabs>
</div>
<div class="table" v-html="tableau"></div>
</div>
</template>
<script>
import axios from 'axios'
import * as XLSX from 'xlsx/xlsx.mjs'
export default {
data() {
return {
active: 0,
menuList: [], // 菜单
tableau: null,
fullUpload: false, //是否显示loading
fileUrl: this.$route.query.fileurl,
}
},
mounted() {
this.privewFile()
},
methods: {
privewFile() {
this.fullUpload = true
this.menuList = []
let url = this.fileUrl
axios
.get(url, {
responseType: 'arraybuffer', // 设置响应体类型为arraybuffer
})
.then(({ data }) => {
let workbook = XLSX.read(new Uint8Array(data), { type: 'array' }) // 解析数据
var worksheet = workbook.Sheets[workbook.SheetNames[this.active]] // workbook.SheetNames 下存的是该文件每个工作表名字,这里取出第一个工作表
workbook.SheetNames.forEach(item => {
let works = workbook.Sheets[item]
if (works['!ref']) {
this.menuList.push(item)
}
})
this.tableau = XLSX.utils.sheet_to_html(worksheet) // 渲染
this.fullUpload = false
})
},
// 菜单切换
onChange(index) {
this.active = index
this.privewFile()
},
},
}
</script>
<style scoped lang="scss">
.box {
width: 500px;
}
/deep/.table {
max-width: 2000px;
min-width: 100%;
table {
border-collapse: collapse !important;
}
td {
border: 1px solid #000;
margin: 0;
padding: 16px;
color: #000;
min-width: 120px;
}
#sjs-A1 {
font-size: 16px;
font-weight: bold;
}
}
</style>
