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

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

article 2024/9/24 21:05:19

最近开发了一个需求，要求实现预览图片、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">
                <span
                    v-for="(item, index) in sheetList"
                    :key="index"
                    v-html="item.sheetName"
                    :class="item.isSelected ? 'active' : ''"
                    @click="switchSheet(index)"
                ></span>
            </div>
            <div
                class="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>