js 网页打开excel

JavaScript 本身无法直接打开 Excel 文件，但可以通过以下几种方法实现类似的功能：

基础概念

Blob URL: 可以将文件转换为 Blob 对象，然后使用 URL.createObjectURL() 方法生成一个 URL，通过该 URL 可以在浏览器中打开文件。
Data URI: 将文件内容编码为 Base64 字符串，然后将其嵌入到 URL 中。
第三方库: 使用如 SheetJS (xlsx) 这样的库来处理 Excel 文件。

类型与应用场景

Blob URL: 适用于需要快速预览文件内容的场景。
Data URI: 适用于小文件，因为 Base64 编码会增加文件大小约 33%。
第三方库: 适用于需要对 Excel 文件进行复杂操作的场景，如读取、编辑和保存。

示例代码

以下是使用 Blob URL 和 SheetJS 库的示例代码：

使用 Blob URL 打开 Excel 文件

function openExcelFile(file) {
    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 htmlStr = XLSX.write(workbook, {sheet:sheetName, type:'binary', bookType:'html'});
        document.getElementById('excelContent').innerHTML = htmlStr;
    };
    reader.readAsArrayBuffer(file);
}

document.getElementById('fileInput').addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (file) {
        openExcelFile(file);
    }
});

使用 SheetJS 库读取和显示 Excel 文件内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Open Excel</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.5/xlsx.full.min.js"></script>
</head>
<body>
    <input type="file" id="fileInput">
    <div id="excelContent"></div>

    <script>
        document.getElementById('fileInput').addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (file) {
                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 htmlStr = XLSX.write(workbook, {sheet:firstSheetName, type:'binary', bookType:'html'});
                    document.getElementById('excelContent').innerHTML = htmlStr;
                };
                reader.readAsArrayBuffer(file);
            }
        });
    </script>
</body>
</html>