用vue和js实现excel文件上传

首先，你需要在Vue项目中安装`xlsx`和`file-saver`库。你可以在终端中使用以下命令进行安装：

npm install xlsx file-saver --save

然后，在你的Vue组件中，你需要引入`xlsx`和`file-saver`库：

import XLSX from 'xlsx';
import fileSaver from 'file-saver';

接下来，你可以使用`<input>`标签来创建一个文件上传的DOM元素，如下所示：

<input type="file" ref="fileInput" @change="onFileChange"/>

在Vue组件的方法中，你需要定义一个`onFileChange`方法来处理文件上传的逻辑，如下所示：

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`库，如下所示：

const blob = new Blob([arrayBuffer], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
fileSaver.saveAs(blob, 'filename.xlsx');

在上述代码中，我们使用`Blob`对象创建一个二进制文件，并使用`file-saver`库将其保存为Excel文件。