JavaScript实现将Excel文件渲染在页面上

更新时间：2024年12月26日 11:13:50 作者：℘团子এ

这篇文章主要为大家详细介绍了如何使用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文件渲染内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JavaScript模拟可展开、拖动与关闭的聊天窗口实例
这篇文章主要介绍了JavaScript模拟可展开、拖动与关闭的聊天窗口,实例分析了javascript实现可拖动的div层相关技巧,非常具有实用价值,需要的朋友可以参考下
2015-05-05
微信小程序实现弹框效果
这篇文章主要为大家详细介绍了微信小程序实现弹框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-05-05
javascript:void(0)使用探讨
如果想做一个链接点击后不做任何事情，或者响应点击而完成其他事情一般都是设置属性href = "#"其实还有比这更好的方法，下面为大家整理了几种比较常见的解决方法，感兴趣的朋友可以参考下
2013-08-08
javascript之bind使用介绍
首先apply和call是老生常谈的东西，但是对于bind，我愣了下，因为这个词是jquery中使用频率很高的一个方法，用来给DOM元素绑定事件用的
2011-10-10
JavaScript实现与使用发布/订阅模式详解
这篇文章主要介绍了JavaScript实现与使用发布/订阅模式,较为详细的分析了发布/订阅模式的概念、原理并结合实例形式分析了javascript实现与使用发布/订阅模式的相关操作技巧,需要的朋友可以参考下
2019-01-01
Document:getElementsByName()使用方法及示例
Document:getElementsByName()想必大家对它并不陌生吧，主要是根据名称获取元素，下面是其具体的使用方法及范例，感兴趣的朋友不要错过
2013-10-10
Javascript农历与公历相互转换的简单实例
下面小编就为大家带来一篇Javascript农历与公历相互转换的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-10-10
js 判断控件获得焦点的示例代码
本篇文章主要是对js 判断控件获得焦点的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-03-03
JS实现转动随机数抽奖特效代码
这篇文章主要为大家详细介绍了一款转动随机数抽奖的JS特效代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2015-08-08
javascript中DOM复选框选择用法实例
这篇文章主要介绍了javascript中DOM复选框选择用法,实例分析了javascript操作复选框实现全选与反选的相关技巧,需要的朋友可以参考下
2015-05-05

JavaScript实现将Excel文件渲染在页面上

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具