当前位置：首页 > news >正文

vue3.0中实现excel文件的预览

news 2025/8/16 15:26:00

最近开发了一个需求，要求实现预览图片、pdf、excel、word、txt等格式的文件；
每种格式的文件想要实现预览的效果需要使用对应的插件，如果要实现excel格式文件的预览，要用到哪种插件呢？

答案：xlsx.full.min.js

xlsx.full.min.js是由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库，功能强大，支持格式众多，支持xls、xlsx、ods(一种OpenOffice专有表格文件格式)等十几种格式。

那到底是怎么使用的呢？

获取excel内容；
加载到html中；
设置表格的样式；

整个代码如下，然后我们逐步进行分析。

<!--* excel文件预览组件封装
-->
<template><div class="pageExcel"><div class="excelRegion"><div class="excelSheet"><spanv-for="(item, index) in sheetList":key="index"v-html="item.sheetName":class="item.isSelected ? 'active' : ''"@click="switchSheet(index)"></span></div><divclass="excelTable"v-for="(item, index) in sheetList":key="index"v-html="item.content"v-show="item.isSelected"></div></div></div>
</template><script setup>
import LoadScript from "./utils/loadScript";
import allRequestAPI from "./api/request.js";
import { onMounted, ref } from "vue";
import { getString } from './utils/util.js'
let id = getString('id')
let excelToken = getString('token')
let sheetList = ref([]);onMounted(() => {getExcel();
});// 获取excel
function getExcel() {sheetList.value = [];LoadScrpt.load([`public/xlsx.full.min.js`]).then(() => {getExcelFileContent();});
}// 获取excel的内容
function getExcelFileContent() {allRequestAPI.getExcelFileStream(id{excelToken: excelToken},"arraybuffer").then((res) => {// 处理编码let ary = "";// 记住一点，res.data是文件流，所以这样写，如果返回的res是文件流，那么就写new Uint8Array(res)let bytes = new Uint8Array(res.data);let length = bytes.byteLength;for (let i = 0; i < length; i++) {ary += String.fromCharCode(bytes[i]);}// 读取excel内容   binary二进制let wb = XLSX.read(ary, { type: "binary" });// sheet列表let sheetFileList = wb.SheetNames;sheetFileList.forEach((item, index) => {let ws = wb.Sheets[item];let fileContent = "";try {// 把excel文件流转化为html字符串，以便于v-html使用fileContent = XLSX.utils.sheet_to_html(ws);} catch (error) {}sheetList.value.push({name: item,isSelected: index == 0,content: fileContent,});});console.log(sheetFileList);console.log("表格内容");console.log(sheetList);}).catch((error) => {console.log(error);});
}// 切换excel的sheet
function switchSheet(i) {sheetList.value.forEach((item, index) => {item.isSelected = index == i;});
}
</script><style scoped lang="less">
.excelRegion {flex: 1;overflow-x: scroll;align-items: center;padding: 12px;background-color: #f8f8f8;.excelSheet {display: flex;white-space: nowrap;padding-bottom: 15px;span {display: block;height: 36px;line-height: 36px;padding: 0 12px;background-color: #fff;font-size: 14px;box-shadow: 0px 2px 4px 3px rgba(204, 204, 204, 0.34);&.active {background-color: #ff6d00;color: #fff;}}}:deep(.excelTable) {table {border-collapse: collapse !important;background-color: #fff;td {word-break: keep-all;white-space: nowrap;border: 1px solid #000;padding: 0px 8px;font-size: 12px;color: #666;}}}
}
</style>