JavaScript实现Excel文件在Web页面的渲染与交互

// 从后端接口获取 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();

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);
    }
}

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