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"><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>

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文件

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/146439.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java项目实战《苍穹外卖》 一、项目概述

人道洛阳花似锦&#xff0c;偏我来时不逢春。 系列文章目录 苍穹外卖是黑马程序员2023年的Java实战项目&#xff0c;作为业余练手用&#xff0c;需要源码或者课程的可以找我&#xff0c;无偿分享 Java项目实战《苍穹外卖》 一、项目概述Java项目实战《苍穹外卖》 二、项目搭建 …

计算机硬件组成部分

目录 中央处理器 控制器 运算器 存储器 输入输出设备 总线 硬件通常是指构成计算机的设备实体。一台计算机的硬件系统应由五个基本部分组成&#xff1a;运算器、控制器、存储器、输入和输出设备。现代计算机还包括中央处理器和总线设备。这五大部分通过系统总线完成指令所…

电子学会2023年06月青少年软件编程(图形化)等级考试试卷(一级)真题,含答案解析

青少年软件编程(图形化)等级考试试卷(一级) 一、单选题(共25题,共50分) 1. 看图找规律,请问下图红框中是?( ) A.

install YAPI MongoDB 备份mongo 安装yapi插件cross-request 笔记

登录容器 docker exec -it mongodb bash 登录mongo mongo -u root -p 123456 查看db show dbs 查看collection show collections 进入db use yapi 查看数据 db.<collection_name>.find() 带条件查看 db.<collection_name>.find({ <field>: <value>…

git使用patch进行补丁操作

文章目录 前言一、format-patch/am生成和应用补丁1、生成2、应用 二、patch文件解读 前言 在软件开发中&#xff0c;代码协作和版本管理是至关重要的。Git 是一个流行的分布式版本控制系统&#xff0c;它提供了各种功能来简化团队合作和代码管理。但是如何给已有项目打补丁&am…

Kafka学习笔记(三)

目录 第5章 Kafka监控&#xff08;Kafka Eagle&#xff09;5.2 修改kafka启动命令5.2 上传压缩包5.3 解压到本地5.4 进入刚才解压的目录5.5 将kafka-eagle-web-1.3.7-bin.tar.gz解压至/opt/module5.6 修改名称5.7 给启动文件执行权限5.8 修改配置文件5.9 添加环境变量5.10 启动…

【uniapp】Google Maps

话不多说 直接上干货 提前申请谷歌地图账号一、新建地图 使用h5获取当前定位或者使用三方uniapp插件 var coords ""navigator.geolocation.getCurrentPosition(function(position) {coords {lat: position.coords.latitude,lng: position.coords.longitude};lats …

【带宽、主频、位宽、数据传输速率】DDR带宽怎么计算?

文章目录 1. 如何计算DDR带宽2. DDR data rate和DDR主频3. Mbps和Mhz4. 出题 1. 如何计算DDR带宽 计算DDR理论带宽的公式为&#xff1a; DDR主频 * 位宽 理论带宽其中&#xff0c;位宽(bit width)指的是内存总线的位宽&#xff0c;例如64位、128位、16bit、32bit等&#xff…

Objectarx 使用libcurl请求WebApi

因为开发cad需要请求服务器的数据&#xff0c;再次之前我在服务器搭设了webapi用户传递数据&#xff0c;所以安装了libcurl在objectarx中使用数据。 Open VS2012 x64 Native Tools Command Prompt补充地址&#xff1a; 我在此将相关的引用配置图片&#xff0c;cad里面的应用和…

EtherCAT 伺服控制功能块实现

EtherCAT 是运动控制领域主要的通信协议&#xff0c;开源EtherCAT 主站协议栈 IgH 和SOEM 两个项目&#xff0c;IgH 相对更普及一些&#xff0c;但是它是基于Linux 内核的方式&#xff0c;比SOEM更复杂一些。使用IgH 协议栈编写一个应用程序&#xff0c;控制EtherCAT 伺服电机驱…

酷柚易汛ERP - 权限设置操作指南

1、产品介绍 对系统的同事管理、角色管理、数据授权进行设置 1.1 同事管理 对当前系统添加同事账号&#xff0c;超级管理员不允许删除 1.2 角色管理 对当前系统添加角色&#xff0c;系统中可以设置多种角色&#xff0c;不同角色设置不同权限&#xff0c;方便添加同事时进行…

Notepad+正则表达式使用方法

常用的元字符和语法规则来构建你的表达式&#xff1a; 正则表达式知识准备 字符匹配&#xff1a; \d&#xff1a;匹配任意数字。\w&#xff1a;匹配任意字母、数字或下划线。\s&#xff1a;匹配任意空白字符&#xff08;空格、制表符等&#xff09;。.&#xff1a;匹配除换行…

代码随想录算法训练营第五十八天丨 动态规划part18

739. 每日温度 思路 首先想到的当然是暴力解法&#xff0c;两层for循环&#xff0c;把至少需要等待的天数就搜出来了。时间复杂度是O(n^2) 那么接下来在来看看使用单调栈的解法。 什么时候用单调栈呢&#xff1f; 通常是一维数组&#xff0c;要寻找任一个元素的右边或者左边…

机器视觉选型-什么时候用远心镜头

物体厚 当被检测物体厚度较大&#xff0c;需要检测不止一个平面时&#xff0c;典型应用如食品盒&#xff0c;饮料瓶等。 物体位置变化 当被测物体的摆放位置不确定&#xff0c;可能跟镜头成一定角度时。 物体上下跳动 当被测物体在被检测过程中上下跳动&#xff0c;如生产线上下…

人工智能基础_机器学习040_Sigmoid函数详解_单位阶跃函数与对数几率函数_伯努利分布---人工智能工作笔记0080

然后我们再来详细说一下Sigmoid函数,上面的函数的公式 我们要知道这里的,Sigmoid函数的意义,这逻辑斯蒂回归的意义就是,在多元线性回归的基础上,把 多元线性回归的结果,缩放到0到1之间对吧,根据中间的0.5为分类,小于0.5的一类,大于的一类, 这里的h theta(x) 就是概率函数 然…

婴儿沐浴座椅上架亚马逊美国站安全标准要求ASTM F1967-19测试,CPC认证

亚马逊婴儿沐浴座椅产品认证 在亚马逊上架的婴儿沐浴座椅产品&#xff0c;亚马逊会要求店家上传相关的产品测试报告&#xff0c;若被抽查到没有相关认证的产品将面临产品被下架或罚款等处罚&#xff01; 婴儿沐浴座椅产品示例&#xff1a; 婴儿沐浴座椅是一种用于浴缸、盥洗盆…

milvus数据管理-压缩数据

Milvus 默认支持自动数据压缩。您可以 配置 Milvus 以启用或禁用 压缩 和自动压缩。 如果自动压缩被禁用&#xff0c;您仍然可以手动压缩数据。 1.手动压缩数据 压缩请求是异步处理的&#xff0c;因为它们通常需要花费很长时间。 from pymilvus import Collection collection…

微软宣布计划在 Windows 10 版本 22H2 中引入 AI 助手 Copilot

根据之前的传言&#xff0c;微软宣布计划在 Windows 10 版本 22H2 中引入 AI 助手 Copilot。Copilot 将包含在 Windows 10 家庭版和专业版中。该更新的发布日期尚未公布&#xff0c;但预计将在不久的将来发布。 在一份新闻稿中&#xff0c;微软表示在向 Windows 11 用户提供 Co…

什么是模糊测试?

背景&#xff1a;近年来&#xff0c;随着信息技术的发展&#xff0c;各种新型自动化测试技术如雨后春笋般出现。其中&#xff0c;模糊测试&#xff08;fuzz testing&#xff09;技术开始受到行业关注&#xff0c;它尤其适用于发现未知的、隐蔽性较强的底层缺陷。这里&#xff0…

C语言--给定一行字符串,获取其中最长单词【图文详解】

一.问题描述 给定一行字符串,获取其中最长单词。 比如&#xff1a;给定一行字符串&#xff1a; hello wo shi xiao xiao su 输出&#xff1a;hello 二.题目分析 “打擂台算法”&#xff0c;具体内容小伙伴们可以参考前面的内容。 三.代码实现 char* MaxWord(const char* str)…