在vue中上传和处理excel文件

bmp9r5qi 于 2022-11-17 发布在 Vue.js

关注(0)|答案(4)|浏览(331)

我尝试上传一个xlsxexcel文件，并在我的Vue应用程序中处理它。但它失败了，抛出了一个错误。这让我认为我没有正确使用或导入库，因为在节点项目中工作正常。
正在使用xlsx库。

代码

模板 *

<template>
  <div id="app">
    <input type="file" @change="onChange" />
  </div>
</template>

脚本 *

import XLSX from "xlsx"

export default {
  name: "App",
  methods: {
    onChange(event) {
      this.file = event.target.files ? event.target.files[0] : null;
      let workbook = XLSX.readFile(this.file);
      console.log('workbook1');
      console.log(workbook);
      console.log('SheetNames');
      console.log(workbook.SheetNames);
    },
  }
};

在这一点上，即使被指到一个正确的图书馆，如果有一个将是非常感激。提前感谢。
这是我的codesandbox的问题：
https://codesandbox.io/s/nervous-montalcini-w3qhy?file=/src/App.vue

vue.js

来源：https://stackoverflow.com/questions/61400440/upload-and-process-excel-file-in-vue

4条答案

按热度按时间

mzsu5hc01#

首先需要设置一个FileReader，并将文件作为二进制字符串读取，以便将其传递给XLSX。

export default {
  methods: {
    onChange(event) {
      this.file = event.target.files ? event.target.files[0] : null;
      if (this.file) {
        const reader = new FileReader();

        reader.onload = (e) => {
          /* Parse data */
          const bstr = e.target.result;
          const wb = XLSX.read(bstr, { type: 'binary' });
          /* Get first worksheet */
          const wsname = wb.SheetNames[0];
          const ws = wb.Sheets[wsname];
          /* Convert array of arrays */
          const data = XLSX.utils.sheet_to_json(ws, { header: 1 });
        }

        reader.readAsBinaryString(this.file);
      }
    },
  }
};

赞(0）回复(0）举报 2022-11-17

xxb16uws2#

我是通过read-excel-file npm包完成的。下面是我的代码。

<template>
...
<input type="file" @change="onFileChange" />
...
</template>
import readXlsxFile from 'read-excel-file'
export default {
...
methods: {
  onFileChange(event) {
    let xlsxfile = event.target.files ? event.target.files[0] : null;
    readXlsxFile(xlsxfile).then((rows) => {
      console.log("rows:", rows)
    })
  }
}

赞(0）回复(0）举报 2022-11-17

dgsult0t3#

仅节点！尝试读取文件名并进行解析！您可以使用其他vuej库

赞(0）回复(0）举报 2022-11-17

gc0ot86w4#

导入-〉
从“xlsx”导入 * 作为XLSX;

赞(0）回复(0）举报 2022-11-17