vue实现Excel文件的上传与下载功能的两种方式

下面是详细讲解Vue实现Excel文件的上传与下载功能的两种方式的完整攻略。

方式一：使用js-xlsx插件

安装和引入js-xlsx插件

首先，在Vue项目中安装js-xlsx插件。

npm i xlsx

然后，我们需要将js-xlsx插件引入到Vue项目中。

import XLSX from 'xlsx';

实现Excel文件上传功能

在Vue项目中，我们可以使用<input type='file'/>标签来实现文件上传功能。当用户选择文件后，触发事件，调用parseExcelFile方法来读取Excel文件内容。

<template>
  <div>
    <input type="file" @change="parseExcelFile" />
  </div>
</template>

export default {
  methods: {
    parseExcelFile(event) {
      const file = event.target.files[0];
      const reader = new FileReader();
      reader.onload = (e) => {
        const data = e.target.result;
        const workbook = XLSX.read(data, { type: 'binary' });
        const firstSheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[firstSheetName];
        const result = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
        console.log(result); // 打印文件内容
      };
      reader.readAsBinaryString(file);
    },
  },
};

以上代码实现了Excel文件的上传和读取，当用户选择Excel文件后，调用parseExcelFile方法，将Excel文件转为二进制流，再使用js-xlsx插件解析为json格式并打印出来。

实现Excel文件下载功能

在Vue项目中，可以使用js-xlsx插件，将json格式的数据一步步保存为Excel文件，并提供下载链接。

export default {
  methods: {
    downloadExcelFile() {
      const data = [[1, 2], [3, 4]];
      const ws_name = 'SheetJS';

      const wb = XLSX.utils.book_new();
      const ws = XLSX.utils.aoa_to_sheet(data);
      XLSX.utils.book_append_sheet(wb, ws, ws_name);

      const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });

      const url = window.URL.createObjectURL(new Blob([s2ab(wbout)], { type: 'application/octet-stream' }));
      const link = document.createElement('a');
      link.style.display = 'none';
      link.href = url;
      link.setAttribute('download', 'example.xlsx');
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
  },
};

function s2ab(s) {
  const buf = new ArrayBuffer(s.length);
  const view = new Uint8Array(buf);
  for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
  return buf;
}

以上代码实现了将数组保存为Excel文件，并提供下载链接的功能。其中，s2ab函数用于将字符串转为二进制数组。

方式二：使用papaparse插件

安装和引入papaparse插件

首先，在Vue项目中安装papaparse插件。

npm i papaparse

然后，我们需要将papaparse插件引入到Vue项目中。

import Papa from 'papaparse';

实现Excel文件上传功能

在Vue项目中，我们可以使用<input type='file'/>标签来实现文件上传功能。当用户选择文件后，触发事件，调用parseExcelFile方法来读取Excel文件内容。

<template>
  <div>
    <input type="file" @change="parseExcelFile" />
  </div>
</template>

export default {
  methods: {
    parseExcelFile(event) {
      const file = event.target.files[0];
      Papa.parse(file, {
        complete: (results) => {
          console.log(results.data); // 打印文件内容
        },
      });
    },
  },
};

以上代码实现了Excel文件的上传和读取，当用户选择Excel文件后，调用Papa.parse方法，将Excel文件转为json格式并打印出来。

实现Excel文件下载功能

在Vue项目中，可以使用papaparse插件，将json格式的数据一步步保存为Excel文件，并提供下载链接。

export default {
  methods: {
    downloadExcelFile() {
      const data = [[1, 'a'], [2, 'b']];
      const csv = Papa.unparse(data);
      const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.style.display = 'none';
      link.href = url;
      link.setAttribute('download', 'example.csv');
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
  },
};

以上代码实现了将数组保存为Excel文件，并提供下载链接的功能。其中，Papa.unparse用于将json格式的数据转化为csv格式的字符串。