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

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

1. // 从后端接口获取 Excel 文档流
2. async function fetchExcelFromBackend() {
3.     try {
4.         // 假设后端接口 URL
5.         const backendApiUrl = `http://local.hct10039.com:18080/recognition/downloadExcel?orderSn=${orderSn}`;
6.         const response = await fetch(backendApiUrl);
8.         if (!response.ok) {
9.             throw new Error('Failed to fetch Excel from backend: ' + response.status);
10.         }
12.         const blob = await response.blob();
13.         const file = new File([blob], 'filename.xlsx', { type: blob.type });
14.         loadExcelAndRender(file);
15.     } catch (error) {
16.         alert('出错了：' + error.message);
17.     }
18. }
20. // 加载并渲染 Excel
21. async function loadExcelAndRender(file) {
22.     try {
23.         const reader = new FileReader();
24.         reader.onload = function (e) {
25.             const data = new Uint8Array(e.target.result);
26.             const workbook = XLSX.read(data, { type: 'array' });
27.             const firstSheetName = workbook.SheetNames[0];
28.             const worksheet = workbook.Sheets[firstSheetName];
29.             const html = XLSX.utils.sheet_to_html(worksheet, { id: firstSheetName });
30.             document.getElementById('excelDom').innerHTML = html;
31.         };
32.         reader.readAsArrayBuffer(file);
33.     } catch (error) {
34.         alert('出错了：' + error.message);
35.     }
36. }
38. // 调用函数从后端接口获取并渲染 Excel
39. fetchExcelFromBackend();

复制代码

2.假如从后端拿到的是文件的地点

1. function getFileObjectFromUrl(url, callback) {
2.     var xhr = new XMLHttpRequest();
3.     xhr.open('GET', url, true);
4.     xhr.responseType = 'blob'; // 重要：设置响应类型为blob
6.     xhr.onload = function() {
7.         if (this.status === 200) {
8.             // 请求成功，this.response包含Blob对象
9.             var blob = this.response;
10.             // 创建File对象
11.             var file = new File([blob], 'filename.xlsx', {type: blob.type});
12.             // 调用回调函数，传入File对象
13.             callback(file);
14.         } else {
15.             console.error('Failed to download file:', this.status);
16.         }
17.     };
19.     xhr.onerror = function() {
20.         console.error('Request error');
21.     };
23.     xhr.send();
24. }
25. async function loadExcelAndRender(file) {
26.     try {
27.         const reader = new FileReader();
28.         reader.onload = function (e) {
29.             const data = new Uint8Array(e.target.result);
30.             const workbook = XLSX.read(data, { type: 'array' });
31.             const firstSheetName = workbook.SheetNames[0]; // 获取第一个sheet的名称
32.             const worksheet = workbook.Sheets[firstSheetName];
33.             const html = XLSX.utils.sheet_to_html(worksheet, {id: firstSheetName}); // 只渲染第一个sheet
34.             document.getElementById('excelDom').innerHTML = html; // 将HTML渲染到指定的div中
35.         };
36.         reader.readAsArrayBuffer(file);
37.     } catch (error) {
38.         console.error('Error loading or rendering Excel:', error);
39.     }
40. }

复制代码

3.效果

4.附加功能

放大缩小和拖拽功能

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。