前端本地文件获取excel表格内容并渲染在页面的方法
更新时间：2025年03月15日 08:41:47 作者：淇淇包.
这篇文章主要介绍了前端本地文件获取excel表格内容并渲染在页面的方法,主要利用SheetJS插件用于处理Excel文件,文中通过代码介绍的非常详细,需要的朋友可以参考下
插件：SheetJs ，如若想要了解更多，可参考官网：SheetJS 中文网
效果图：
方法1： XLSX.readFile(filename, opts) 读取指定文件并生成 SheetJS 工作簿对象
如果表格内容较少，体验较好
如果表格内容很多，几千行，则不推荐，数据量过大会导致页面卡死，体验差
代码：
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>可在线展示Excel的js插件</title>
<style>
html,body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.container {
overflow: auto;
width: 100%;
height: 100%;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
}
th {
background-color: #f2f2f2;
text-align: left;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
</head>
<body>
<div class="container" id="container">
</div>
<script>
var nContainer = document.getElementById('container');
var xlsx = new Plus.Xlsx(nContainer);
xlsx.readFile('本地文件路径');
</script>
</body>
</html>
方法2：XLSX.read(data, opts) 解析文件数据并生成 SheetJS 工作簿对象
可获取固定的数据格式，并处理懒加载方式，从而缓解数据量过大卡死现象
代码：
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>可在线展示Excel的 js插件</title>
<style>
html,body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.container {
overflow: auto;
width: 100%;
height: 100%;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
}
th {
background-color: #f2f2f2;
text-align: left;
}
</style>
<script type="text/javascript" src="/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
</head>
<body>
<div id="excel-data" class="container"></div>
<script type="text/javascript">
const excelData = $('#excel-data');
let allData = [];
let loadedRows = 0;
const pageSize = 50;
let mergeInfo = {};
let currentMergeCounts = {};
async function loadStaticFile(filePath) {
try {
const response = await fetch(filePath);
const blob = await response.blob();
const file = new File([blob], '职业类别表.xls', { type: blob.type });
const reader = new FileReader();
reader.onload = (e) => {
const data = new Uint8Array(e.target.result);
const workbook = XLSX.read(data, { type: 'array' });
// 只读取第一个工作表
const firstSheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[firstSheetName];
allData = XLSX.utils.sheet_to_json(worksheet);
// 初始化表格和合并信息
initializeTable();
calculateMergeInfo(allData);
loadMoreRows();
// 监听滚动事件，在接近底部时加载更多数据
excelData.on('scroll', handleScroll);
};
reader.readAsArrayBuffer(file);
} catch (error) {
console.error('加载文件失败:', error);
}
}
loadStaticFile('/view/zhiyefenlei01_new.xls');
function initializeTable() {
let jobHtml = "<table border='1' cellpadding='5' cellspacing='0'>";
// 构建表头
const headers = ['大分类', '中分类', '小分类', '代码', '细类', '职业类别'];
jobHtml += `<thead><tr>${headers.map(h => `<th>${h}</th>`).join('')}</tr></thead>`;
jobHtml += "<tbody>";
excelData.html(jobHtml + "</tbody></table>");
}
function calculateMergeInfo(data) {
mergeInfo = {};
currentMergeCounts = {};
data.forEach((row, rowIndex) => {
const headers = ['大分类', '中分类', '小分类', '代码', '细类', '职业类别'];
headers.forEach(header => {
if (!mergeInfo[header]) {
mergeInfo[header] = [];
currentMergeCounts[header] = 0;
}
// 如果当前行缺少该字段，则认为它是前一行的延续
if (row[header] === undefined || row[header] === '') {
currentMergeCounts[header]++;
} else {
// 如果有未处理的合并项，更新之前的 rowspan
if (currentMergeCounts[header] > 0) {
const lastIndex = rowIndex - currentMergeCounts[header] - 1;
mergeInfo[header][lastIndex] = currentMergeCounts[header] + 1;
currentMergeCounts[header] = 0;
}
mergeInfo[header].push(0);
}
});
// 处理最后一组合并项
if (rowIndex === data.length - 1) {
Object.keys(currentMergeCounts).forEach(header => {
if (currentMergeCounts[header] > 0) {
const lastIndex = rowIndex - currentMergeCounts[header];
mergeInfo[header][lastIndex] = currentMergeCounts[header] + 1;
}
});
}
});
}
function generateMergedRow(row, rowIndex) {
let rowHtml = "<tr>";
const headers = ['大分类', '中分类', '小分类', '代码', '细类', '职业类别'];
headers.forEach(header => {
if (row[header] !== undefined && row[header] !== '') {
const rowspan = mergeInfo[header][rowIndex] || 1;
rowHtml += `<td ${rowspan > 1 ? `rowspan="${rowspan}"` : ''}>${row[header]}</td>`;
} else {
// 跳过重复的单元格
rowHtml += '';
}
});
rowHtml += "</tr>";
return rowHtml;
}
function loadMoreRows() {
const dataSlice = allData.slice(loadedRows, loadedRows + pageSize);
if (dataSlice.length === 0) return;
let $tbody = $('#excel-data table tbody');
dataSlice.forEach((row, rowIndex) => {
$tbody.append(generateMergedRow(row, loadedRows + rowIndex));
});
loadedRows += dataSlice.length;
}
function handleScroll() {
const $container = $(this);
const scrollTop = $container.scrollTop();
const scrollHeight = $container[0].scrollHeight;
const clientHeight = $container.height();
// 当滚动到底部附近时加载更多数据
if (scrollTop + clientHeight >= scrollHeight - 50) {
loadMoreRows();
}
}
</script>
</body>
</html>总结
到此这篇关于前端本地文件获取excel表格内容并渲染在页面的文章就介绍到这了,更多相关前端本地获取excel表格并渲染内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
这篇文章主要为大家详细介绍了javascript实现点击小图显示大图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
Javascript中实现String.startsWith和endsWith方法
这篇文章主要介绍了Javascript中实现String.startsWith和endsWith方法,这两个很好用的方法在JS中没有,本文就自己编码实现了这两个方法,需要的朋友可以参考下2015-06-06
理解JavaScript中的适配器模式Adapter Pattern
这篇文章主要介绍了理解JavaScript中的适配器模式,适配器模式即Adapter Pattern，是作为两个不兼容的接口之间的桥梁。这种类型的设计模式属于结构型模式，下文更多相关介绍需要的小伙伴可以参考一下2022-04-04
本篇文章主要是对js输出阴历、阳历、年份、月份、周示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
这篇文章主要为大家介绍了input 获取光标位置设置光标位置方案详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
动态调用CSS文件，一般用于页面的多种颜色选择，通过调用不同的css实现不用的页面颜色效果。2010-07-07
这篇文章主要介绍了JS制作简易计算器的方法，文中实例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-07-07
这篇文章主要为大家介绍了如何在TypeScript中使用函数实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要介绍了elementui上传图片回显,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-07-07
JavaScript接收键盘指令示例，按下键盘上不同的键，程序会跳转到不同的网页，本例中按下A键程序为跳转到脚本之家的首页，实现按键跳转的功能。2009-10-10
最新评论