|
关于在网页上直接显示Excel的内容
- <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Display Excel with SheetJS</title>
-
- <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.4/xlsx.full.min.js"></script>
- </head>
- <body>
- <h1>Upload and Display Excel File using SheetJS</h1>
- <h1>读取文件并生成 Uint8Array</h1>
- <button id="readFileButton">读取文件</button>
- <pre id="log"></pre>
- <input type="file" id="upload" />
- <br /><br />
- <div id="excelData"></div>
- <script>
- document.getElementById('upload').addEventListener('change', handleFile, false);
-
- function handleFile(e) {
- const files = e.target.files;
- console.log(files[0]);
- if (files.length === 0) return;
-
- const reader = new FileReader();
- reader.onload = function(event) {
-
- const data = new Uint8Array(event.target.result);
- console.log(data);
- 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);
- document.getElementById('excelData').innerHTML = html;
- };
- reader.readAsArrayBuffer(files[0]);
- }
- </script>
- <script>
- document.getElementById('readFileButton').addEventListener('click', () => {
- fetch('e3.php')
- .then(response => {
- if (!response.ok) {
- throw new Error(`HTTP 错误! 状态码: ${response.status}`);
- }
- return response.arrayBuffer();
- })
- .then(buffer => {
- const uint8Array = new Uint8Array(buffer);
- //console.log(uint8Array);
- // 在页面上显示结果
- document.getElementById('log').textContent = `Uint8Array: [${uint8Array.join(', ')}]`;
- //---
- const reader = new FileReader();
- reader.onload = function(event) {
- //console.log(uint8Array);
- //const data = new Uint8Array(event.target.result);
- const data = uint8Array;
- 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);
- document.getElementById('excelData').innerHTML = html;
- };
- //reader.readAsArrayBuffer(files[0]);
- //reader.readAsArrayBuffer(new Blob({name:'aa22.xlsx', size:9770, type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }));
-
- //reader.readAsArrayBuffer(new Blob(buffer, { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }));
- //const blob = new Blob(buffer, { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
- console.log(buffer);
- const blob = new Blob([], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
- const file = new File([blob], 'aa22.xlsx', { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
- reader.readAsArrayBuffer(file);
- //---
- })
- .catch(error => {
- console.error('读取失败:', error);
- document.getElementById('log').textContent = `错误: ${error.message}`;
- });
- });
- </script>
- </body>
- </html>
复制代码
|
|