uniapp开发H5前端打开本地的excel，获取表格内的数据

最新推荐文章于 2025-10-13 16:42:35 发布

原创最新推荐文章于 2025-10-13 16:42:35 发布 · 1.6k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #前端 #excel #javascript

该文章已生成可运行项目，

遇到的问题

在开发的过程中，想要打开本地的excel，并在项目中获取表格数据。在网上看到一个源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Upload and Display XLSX Data</title>
</head>
<body>
    <h1>Upload and Display XLSX Data</h1>
    <input type="file" id="fileInput" accept=".xlsx" />
    <button onclick="handleFileUpload()">Upload</button>
    <div id="output"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>
    <script>
        function handleFileUpload() {
            const fileInput = document.getElementById('fileInput');
            const file = fileInput.files[0];
            alert(JSON.stringify(file));
            if (file) {
                const reader = new FileReader();

                reader.onload = function(e) {
                    const data = new Uint8Array(e.target.result);
                    const workbook = XLSX.read(data, {
                        type: 'array'
                    });

                    // Assuming we want to read the first sheet
                    const firstSheetName = workbook.SheetNames[0];
                    const worksheet = workbook.Sheets[firstSheetName];

                    // Convert sheet to JSON
                    const jsonData = XLSX.utils.sheet_to_json(worksheet, {
                        header: 1
                    });

                    // Display the data
                    displayData(jsonData);
                };

                reader.readAsArrayBuffer(file);
            } else {
                alert('Please select a file first');
            }
        }

        function displayData(data) {
            const outputDiv = document.getElementById('output');
            outputDiv.innerHTML = ''; // Clear previous content

            data.forEach(row => {
                const rowDiv = document.createElement('div');
                row.forEach(cell => {
                    const cellDiv = document.createElement('span');
                    cellDiv.textContent = cell + ' ';
                    rowDiv.appendChild(cellDiv);
                });
                outputDiv.appendChild(rowDiv);
            });
        }
    </script>
</body>

</html>

这个代码，在uniapp项目中无法实现。但是如果把上面代码保存在index.html中，直接运行是完全没有问题的。
uniapp中，无法使用<input type='file'>。所以无法在Uniapp中正常使用。

解决方案

template添加一个按钮，内容可以自定

<button size="mini" type="primary" @click="upload()">上传数据表分析</button>

在methods添加处理的函数

		methods: {
			upload() {
				var that = this;
				uni.chooseFile({
					count: 1,
					extension: ['.xlsx'],//文件格式
					success: (res) => {
						const file = res.tempFiles[0]; // 获取选择的文件
						that.convertFileToBuffer(file);
					},
				})
			},
			convertFileToBuffer(file) {
				const reader = new FileReader();
				var that = this;
				// 当文件读取完成时触发
				reader.onloadend = function() {
					const base64String = reader.result;//将刚才那个文件读成buffe
					var workbook = xlsx.read(base64String, {
						type: 'buffer'
					});
					const firstSheetName = workbook.SheetNames[0];
					const worksheet = workbook.Sheets[firstSheetName];
					// Convert sheet to JSON
					const jsonData = xlsx.utils.sheet_to_json(worksheet, {
						header: 2
					});
					that.loadData(jsonData);

					//console.log(JSON.stringify(jsonData));
					// 这里可以将base64String发送到服务器或者进行其他处理
				};

				// 以DataURL的形式读取文件内容（即Base64编码）
				reader.readAsArrayBuffer(file);//读成buffer,读取之后由上面那个函数接着
			},
		}

FileReader()可以将文件读取出来，可以输出base64,二进制,buffer。在开始的时候我输出了base64。sheet的名字正常，但是表格的内容有问题，具体原因不知道。修改了读取方式让他读出来是BUFFER，就正常了。

header哪里有值的区别，可以参照别人的博客，如果是1,则返回的是二维矩阵。2将第1行作为key,后续作为数据。生成一个object。根据自己的需求选择这里的参数吧。

这里需要一个库

npm install xlsx
yarn add xlsx

在export default之前导入

import xlsx from 'xlsx'
export default {

本文章已经生成可运行项目