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

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

答案：xlsx.full.min.js

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

那到底是怎么使用的呢？

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

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

<!--
 * 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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148

Uint8Array 数组类型表示一个 8 位无符号整型数组，创建时内容被初始化为 0。创建完后，可以以对象的方式或使用数组下标索引的方式引用数组中的元素。

String.fromCharCode() 静态方法返回由指定的 UTF-16 码元序列创建的字符串。

官方github：https://github.com/SheetJS/js-xlsx

本文配套demo在线演示地址：http://demo.haoji.me/2017/02/08-js-xlsx/

这篇文章对我帮助本大，如何使用JavaScript实现纯前端读取和导出excel文件