在线演示
- 不是一个插件、也不是一个包、只是个代码分享（使用的是Vue3、TypeScript），下面有代码地址
- 只是提供excel文件的简单预览，但是它很快
需要安装什么？
- 需要安装npm一个包（xlsx），但是不需要使用重型第三方依托
- 如果你想直接Copy组件，需要安装 Element-Plus（还有图标）、Axios、Sass、具体请参考根目录package.json文件
我使用的是Vue2、React其他JS框架？
- 其实主要代码逻辑都是一样的...你可以代码拉下来参考一下
其它预览方案？
- 使用微软浏览器链接拼接URL
- 使用依赖依托，如 onlyoffice开源版、Luckysheet等等
- 使用SheetJS完整版，github 30k stars，它更猛
地址
功能及原理
| 支持的功能 | |
|---|---|
| 文件类型 | .xlsx文件链接、可用文件流 |
| 读取完整度 | 使用了Utils的sheet_to_csv方法，仅支持提取文本 ，如果你想要颜色、批注等、请参看下图 |
| 是否支持编辑 | 仅预览 |
- 使用axios请求（arraybuffer）文件流
- 通过 XLSX 过文件流形成可识别的数据
- 通过获取到的参数进行二次处理，生成html、增加sheet操作等相关
怎么使用？
- 你可以直接把 components 目录下的 previrewFile 文件夹 Copy，然后你就可以当做公共组件用
- 请确保上面说的几个npm包你装了，如果出现异常请确定版本号
- 请注意盒子的样式，完整请看源码
- 还有清除的默认样式，详情请看 assets 下的
base.css
<script setup lang="ts">
import { ref } from "vue";
import PrevirewExcel from "@/components/previrewFile/excel/index.vue";
const link = ref<string>("./test.xlsx");
/** get sheet name */
const handleTap = (e: string) => {
console.log("sheet-name：", e);
};
</script>
<template>
<div class="xlsx_body">
<PrevirewExcel :link="link" @handleTap="handleTap"></PrevirewExcel>
</div>
</template>
最后，如果帮助到了你，请在 GitHub 给我点个 star，也可以参观我的个人网站（正在写内容），使用 VitePress 搭建。
