用vue和js实现excel文件上传

首先，你需要在Vue项目中安装`xlsx`和`file-saver`库。你可以在终端中使用以下命令进行安装： ``` npm install xlsx file-saver --save ``` 然后，在你的Vue组件中，你需要引入`xlsx`和`file-saver`库： ```javascript import XLSX from 'xlsx'; import fileSaver from 'file-saver'; ``` 接下来，你可以使用`<input>`标签来创建一个文件上传的DOM元素，如下所示： ```html <input type="file" ref="fileInput" @change="onFileChange"/> ``` 在Vue组件的方法中，你需要定义一个`onFileChange`方法来处理文件上传的逻辑，如下所示： ```javascript onFileChange(e) { const files = e.target.files; if (files.length > 0) { const fileReader = new FileReader(); fileReader.onload = (e) => { const arrayBuffer = e.target.result; const workbook = XLSX.read(arrayBuffer, {type: 'array'}); const firstSheetName = workbook.SheetNames[0]; const worksheet = workbook.Sheets[firstSheetName]; const json = XLSX.utils.sheet_to_json(worksheet); // 在这里可以处理获取到的json数据 }; fileReader.readAsArrayBuffer(files[0]); } } ``` 在上述代码中，我们定义了一个`onFileChange`方法，当用户上传一个文件时，该方法将被调用。我们使用`FileReader`对象来读取上传的文件，然后使用`XLSX`库将Excel文件转换为JSON数据。 最后，如果你想将上传的Excel文件下载下来，你可以使用`file-saver`库，如下所示： ```javascript const blob = new Blob([arrayBuffer], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}); fileSaver.saveAs(blob, 'filename.xlsx'); ``` 在上述代码中，我们使用`Blob`对象创建一个二进制文件，并使用`file-saver`库将其保存为Excel文件。