vue 预览excel

可以使用第三方库 `xlsx` 和 `file-saver` 来实现在 Vue 中预览 Excel 文件。以下是一个简单的示例：

1. 安装依赖：

npm install xlsx file-saver --save

2. 在 Vue 组件中引入 `xlsx` 和 `file-saver`：

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

3. 在 Vue 组件中定义一个方法来预览 Excel 文件：

methods: {
  previewExcel() {
    // 创建一个空的工作簿
    const workbook = XLSX.utils.book_new();

    // 创建一个工作表
    const worksheet = XLSX.utils.json_to_sheet([
      { Name: 'John Doe', Age: 30 },
      { Name: 'Jane Doe', Age: 25 },
    ]);

    // 将工作表添加到工作簿
    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

    // 将工作簿转换为二进制数据
    const excelData = XLSX.write(workbook, { type: 'binary' });

    // 将二进制数据转换为 Blob 对象
    const blob = new Blob([s2ab(excelData)], { type: 'application/octet-stream' });

    // 使用 file-saver 将 Blob 对象保存为 Excel 文件并下载
    FileSaver.saveAs(blob, 'example.xlsx');
  },
},

在这个示例中，我们首先创建一个空的工作簿，然后创建一个包含两个对象的工作表。我们将这个工作表添加到工作簿中，然后将工作簿转换为二进制数据。接下来，我们将二进制数据转换为 Blob 对象，并使用 `file-saver` 将 Blob 对象保存为 Excel 文件并下载。

注意：在上面的示例中，我们使用了一个名为 `s2ab` 的函数来将字符串转换为 ArrayBuffer。这个函数的实现如下：

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;
}

这个函数会将字符串转换为 ArrayBuffer，以便将二进制数据转换为 Blob 对象。