Vue 保存Excel

文件出现了问题，该怎么办？

可以使用第三方库如FileSaver.js将数据转化为Blob对象，再使用URL.createObjectURL()方法生成下载链接，最后使用a标签实现下载。以下是一段示例代码：

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

export const saveExcelFile = (data, fileName) => {
  const workbook = XLSX.utils.book_new();
  const sheet = XLSX.utils.aoa_to_sheet(data);
  XLSX.utils.book_append_sheet(workbook, sheet, 'Sheet1');
  const file = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
  const blob = new Blob([file], { type: 'application/octet-stream' });
  FileSaver.saveAs(blob, fileName);
}

可以在Vue方法中调用saveExcelFile函数实现Excel文件保存。

相关问题

vue导出excel表格弹出保存路径

您可以使用FileSaver.js库将数据导出为excel文件，并使用HTML5的download属性将文件下载到本地。以下是一个简单的示例代码：

// 导出数据为excel文件
var exportData = function () {
  // 数据
  var data = [
    ['姓名', '性别', '年龄'],
    ['张三', '男', '18'],
    ['李四', '女', '20'],
    ['王五', '男', '22']
  ];
  
  // 创建excel文件对象
  var wb = XLSX.utils.book_new();
  var ws = XLSX.utils.aoa_to_sheet(data);
  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
  
  // 保存excel文件
  var wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });
  saveAs(new Blob([s2ab(wbout)], { type: 'application/octet-stream' }), 'export.xlsx');
}

// 将字符串转为ArrayBuffer
var s2ab = function (s) {
  var buf = new ArrayBuffer(s.length);
  var view = new Uint8Array(buf);
  for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
  return buf;
}

// 点击按钮导出数据
document.getElementById('btn-export').addEventListener('click', exportData);

在这个例子中，我们使用了XLSX.js库来创建excel文件对象，并使用FileSaver.js库将文件保存到本地。在导出excel文件时，我们需要将数据转换为二进制格式，并使用Blob对象创建一个文件。我们还使用download属性指定文件名，这将提示用户将文件保存在本地。

vue导入excel

要在Vue中导入Excel，可以使用js-xlsx库。首先通过npm安装js-xlsx:

npm install xlsx

然后在Vue组件中引入xlsx：

import XLSX from 'xlsx';

接下来，在Vue组件中编写处理Excel的代码。下面是一个示例代码，它将读取Excel文件并将数据存储在组件的data属性中：

<template>
  <div>
    <input type="file" @change="handleFileUpload">
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="person in people" :key="person.id">
          <td>{{ person.id }}</td>
          <td>{{ person.name }}</td>
          <td>{{ person.age }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import XLSX from 'xlsx';

export default {
  data() {
    return {
      people: []
    };
  },
  methods: {
    handleFileUpload(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 sheetName = workbook.SheetNames[0];
        const sheet = workbook.Sheets[sheetName];
        const rows = XLSX.utils.sheet_to_json(sheet);

        this.people = rows;
      };

      reader.readAsBinaryString(file);
    }
  }
};
</script>

在上面的代码中，我们首先创建一个包含一个文件输入框和一个表格的简单Vue组件。然后，我们在组件的data属性中定义一个people数组，用于保存Excel文件中读取的数据。我们还定义了一个handleFileUpload方法，它将在选择Excel文件后自动调用。

在handleFileUpload方法中，我们首先获取所选Excel文件的二进制数据。然后，我们使用js-xlsx库的XLSX.read方法将二进制数据转换为工作簿对象。接下来，我们使用工作簿对象的SheetNames和Sheets属性获取工作簿的第一个工作表，并将其转换为JSON格式的对象。最后，我们将人员数组分配给组件的data属性中的people属性，以供在表格中显示。

总之，这是一个简单的示例，演示了如何在Vue中导入Excel文件。您可以根据您的需求进行调整和修改。