关于在网页上直接显示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>

复制代码