js和html中,将Excel文件渲染在页面上

1.如果从后端拿到的数据是文档流

javascript 复制代码
// 从后端接口获取 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.如果从后端拿到的是文件的地址

javascript 复制代码
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.附加功能

放大缩小和拖拽功能

相关推荐
噢,我明白了1 小时前
同源策略:为什么XMLHttpRequest不能跨域请求资源?
javascript·跨域
Hello_WOAIAI1 小时前
批量将 Word 文件转换为 HTML:Python 实现指南
python·html·word
sanguine__1 小时前
APIs-day2
javascript·css·css3
关你西红柿子2 小时前
小程序app封装公用顶部筛选区uv-drop-down
前端·javascript·vue.js·小程序·uv
济南小草根2 小时前
把一个Vue项目的页面打包后再另一个项目中使用
前端·javascript·vue.js
小木_.2 小时前
【python 逆向分析某有道翻译】分析有道翻译公开的密文内容,webpack类型,全程扣代码,最后实现接口调用翻译,仅供学习参考
javascript·python·学习·webpack·分享·逆向分析
Aphasia3113 小时前
一次搞懂 JS 对象转换,从此告别类型错误!
javascript·面试
m0_748256563 小时前
Vue - axios的使用
前端·javascript·vue.js
m0_748256343 小时前
QWebChannel实现与JS的交互
java·javascript·交互
胡西风_foxww3 小时前
【es6复习笔记】函数参数的默认值(6)
javascript·笔记·es6·参数·函数·默认值