JavaScript实现将Excel文件渲染在页面上
作者：℘团子এ
这篇文章主要为大家详细介绍了如何使用Html和JavaScript实现将Excel文件渲染在页面上,文中的示例代码讲解详细,有需要的小伙伴可以参考下
1.如果从后端拿到的数据是文档流
// 从后端接口获取 Excel 文档流
async function fetchExcelFromBackend() {
try {
// 假设后端接口 URL
const backendApiUrl = `http://local.hct10039.com:18080/recognition/downloadExcel?orderSn=${orderSn}`;
const response = await fetch(backendApiUrl);
if (!response.ok) {
throw new Error('Failed to fetch Excel from backend: ' + response.status);
}
const blob = await response.blob();
const file = new File([blob], 'filename.xlsx', { type: blob.type });
loadExcelAndRender(file);
} catch (error) {
alert('出错了：' + error.message);
}
}
// 加载并渲染 Excel
async function loadExcelAndRender(file) {
try {
const reader = new FileReader();
reader.onload = function (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];
const html = XLSX.utils.sheet_to_html(worksheet, { id: firstSheetName });
document.getElementById('excelDom').innerHTML = html;
};
reader.readAsArrayBuffer(file);
} catch (error) {
alert('出错了：' + error.message);
}
}
// 调用函数从后端接口获取并渲染 Excel
fetchExcelFromBackend();2.如果从后端拿到的是文件的地址
function getFileObjectFromUrl(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob'; // 重要：设置响应类型为blob
xhr.onload = function() {
if (this.status === 200) {
// 请求成功，this.response包含Blob对象
var blob = this.response;
// 创建File对象
var file = new File([blob], 'filename.xlsx', {type: blob.type});
// 调用回调函数，传入File对象
callback(file);
} else {
console.error('Failed to download file:', this.status);
}
};
xhr.onerror = function() {
console.error('Request error');
};
xhr.send();
}
async function loadExcelAndRender(file) {
try {
const reader = new FileReader();
reader.onload = function (e) {
const data = new Uint8Array(e.target.result);
const workbook = XLSX.read(data, { type: 'array' });
const firstSheetName = workbook.SheetNames[0]; // 获取第一个sheet的名称
const worksheet = workbook.Sheets[firstSheetName];
const html = XLSX.utils.sheet_to_html(worksheet, {id: firstSheetName}); // 只渲染第一个sheet
document.getElementById('excelDom').innerHTML = html; // 将HTML渲染到指定的div中
};
reader.readAsArrayBuffer(file);
} catch (error) {
console.error('Error loading or rendering Excel:', error);
}
}3.效果
4.附加功能
放大缩小和拖拽功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动拖拽示例</title>
</head>
<body>
<div class="excelContent borderLineBlack" style="width: 100%;height: 100%;" style="overflow: auto;">
<div id="excelDom" style="width: 30%;height: 30vh;background-color: aquamarine;">子盒子</div>
</div>
<!-- 引入JavaScript脚本 -->
<script >
// 获取父元素excelContent
const excelContent = document.querySelector('.excelContent.borderLineBlack');
// 监听父元素的wheel事件,防止滚动父盒子
excelContent.addEventListener('wheel', function(event) {
// 判断事件的目标元素是否为excelDom或其子元素
if (!excelDom.contains(event.target)) {
// 如果不是，则阻止默认的滚动行为
event.preventDefault();
}
});
let scale = 1; // 设置初始缩放比例
var excelDom = document.getElementById("excelDom");
let isDragging = false;
let offsetX = 0, offsetY = 0; // 用于记录拖动时的偏移量
// 监听鼠标滚轮事件
excelDom.addEventListener('wheel', function(event) {
if (event.ctrlKey) {
event.preventDefault();
if (event.deltaY < 0) {
scale += 0.1;
} else {
scale -= 0.1;
}
scale = Math.max(0.1, scale);
// 更新变换，应用缩放和平移
excelDom.style.transform = `scale(${scale}) translate(${offsetX}px, ${offsetY}px)`;
}
});
// 监听鼠标按下事件
excelDom.addEventListener('mousedown', function(event) {
isDragging = true;
let startX = event.clientX;
let startY = event.clientY;
// 监听鼠标移动事件，只在拖动时添加
const mouseMoveHandler = function(event) {
const dx = event.clientX - startX;
const dy = event.clientY - startY;
offsetX += dx;
offsetY += dy;
// 更新变换，应用平移
excelDom.style.transform = `scale(${scale}) translate(${offsetX}px, ${offsetY}px)`;
// 重置起始坐标
startX = event.clientX;
startY = event.clientY;
};
// 添加鼠标移动事件监听器
document.addEventListener('mousemove', mouseMoveHandler);
// 监听鼠标释放事件，只在拖动时添加
const mouseUpHandler = function() {
isDragging = false;
excelDom.style.cursor = 'auto';
// 移除鼠标移动和释放事件监听器
document.removeEventListener('mousemove', mouseMoveHandler);
document.removeEventListener('mouseup', mouseUpHandler);
};
// 添加鼠标释放事件监听器
document.addEventListener('mouseup', mouseUpHandler);
event.preventDefault();
});
</script>
</body>
</html>到此这篇关于JavaScript实现将Excel文件渲染在页面上的文章就介绍到这了,更多相关JavaScript Excel文件渲染内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！