深圳全飞鸿

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 50|回复: 1
打印 上一主题 下一主题

关于在网页上直接显示Excel的内容

[复制链接]

228

主题

466

帖子

2184

积分

版主

Rank: 7Rank: 7Rank: 7

积分
2184
跳转到指定楼层
楼主
发表于 2025-2-27 12:38:26 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

关于在网页上直接显示Excel的内容
  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8" />
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  5.     <title>Display Excel with SheetJS</title>
  6.    
  7.     <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.4/xlsx.full.min.js"></script>
  8. </head>
  9. <body>
  10.     <h1>Upload and Display Excel File using SheetJS</h1>
  11.          <h1>读取文件并生成 Uint8Array</h1>
  12.     <button id="readFileButton">读取文件</button>
  13.     <pre id="log"></pre>
  14.     <input type="file" id="upload" />
  15.     <br /><br />
  16.     <div id="excelData"></div>

  17.     <script>
  18.         document.getElementById('upload').addEventListener('change', handleFile, false);
  19.         
  20.         function handleFile(e) {
  21.             const files = e.target.files;
  22.                         console.log(files[0]);
  23.             if (files.length === 0) return;
  24.             
  25.             const reader = new FileReader();
  26.             reader.onload = function(event) {
  27.                                
  28.                 const data = new Uint8Array(event.target.result);
  29.                                 console.log(data);
  30.                 const workbook = XLSX.read(data, { type: 'array' });
  31.                 const firstSheetName = workbook.SheetNames[0];
  32.                 const worksheet = workbook.Sheets[firstSheetName];
  33.                 const html = XLSX.utils.sheet_to_html(worksheet);
  34.                 document.getElementById('excelData').innerHTML = html;
  35.             };
  36.             reader.readAsArrayBuffer(files[0]);
  37.         }
  38.     </script>
  39.         <script>
  40.         document.getElementById('readFileButton').addEventListener('click', () => {
  41.             fetch('e3.php')
  42.                 .then(response => {
  43.                     if (!response.ok) {
  44.                         throw new Error(`HTTP 错误! 状态码: ${response.status}`);
  45.                     }
  46.                     return response.arrayBuffer();
  47.                 })
  48.                 .then(buffer => {
  49.                     const uint8Array = new Uint8Array(buffer);
  50.                     //console.log(uint8Array);
  51.                     // 在页面上显示结果
  52.                     document.getElementById('log').textContent = `Uint8Array: [${uint8Array.join(', ')}]`;
  53.                                         //---
  54.                                         const reader = new FileReader();
  55.                                         reader.onload = function(event) {
  56.                                            //console.log(uint8Array);
  57.                                                 //const data = new Uint8Array(event.target.result);
  58.                                                 const data = uint8Array;
  59.                                                 const workbook = XLSX.read(data, { type: 'array' });
  60.                                                 const firstSheetName = workbook.SheetNames[0];
  61.                                                 const worksheet = workbook.Sheets[firstSheetName];
  62.                                                 const html = XLSX.utils.sheet_to_html(worksheet);
  63.                                                 document.getElementById('excelData').innerHTML = html;
  64.                                         };
  65.                                         //reader.readAsArrayBuffer(files[0]);
  66.                                         //reader.readAsArrayBuffer(new Blob({name:'aa22.xlsx', size:9770, type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }));       
  67.                                        
  68.                                         //reader.readAsArrayBuffer(new Blob(buffer, { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }));
  69.                                         //const blob = new Blob(buffer, { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
  70.                                         console.log(buffer);
  71.                                         const blob = new Blob([], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
  72.                                         const file = new File([blob], 'aa22.xlsx', { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
  73.                                         reader.readAsArrayBuffer(file);
  74.                                         //---
  75.                 })
  76.                 .catch(error => {
  77.                     console.error('读取失败:', error);
  78.                     document.getElementById('log').textContent = `错误: ${error.message}`;
  79.                 });
  80.         });
  81.     </script>       
  82. </body>
  83. </html>
复制代码


回复

使用道具 举报

228

主题

466

帖子

2184

积分

版主

Rank: 7Rank: 7Rank: 7

积分
2184
沙发
 楼主| 发表于 2025-2-27 17:44:34 | 只看该作者
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|nagomes  

GMT+8, 2025-5-5 03:20 , Processed in 0.026567 second(s), 20 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表