添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

实现基本功能

Google 关键字 exceljs parse xlsx browser ,第一个链接 how to read xlsx file in browser with exceljs? · Issue #832 中就有具体的代码。

handleChange(e) {
  this.file = e.target.files[0]
handleImport() {
  const wb = new Excel.Workbook();
  const reader = new FileReader()
  reader.readAsArrayBuffer(this.file)
  reader.onload = () => {
    const buffer = reader.result;
    wb.xlsx.load(buffer).then(workbook => {
      console.log(workbook, 'workbook instance')
      workbook.eachSheet((sheet, id) => {
        sheet.eachRow((row, rowIndex) => {
          console.log(row.values, rowIndex)

注意:在官方文档中,有下面这么一段代码:

// read from a file
const workbook = new Excel.Workbook();
await workbook.xlsx.readFile(filename);
// ... use workbook

上面这段代码会用到 Node.js 的专属 API,前端无法使用,如果要在前端加载 Excel 文件的内容,就得像再之前那段代码那样,用 workbook.xlsx.load() 方法而不是 readFile() 方法。

相关讨论见官方 issue:[BUG] readFile error #1168

异步回调同步化

上面的代码不够优雅,于是 Google promisify filereader onload,Stack Overflow 果然再次没有让我失望,Javascript Promises with FileReader() 这个链接中给出了下面的代码:

function readFile(file){
  return new Promise((resolve, reject) => {
    var fr = new FileReader();  
    fr.onload = () => {
      resolve(fr.result);
    fr.onerror = reject;
    fr.readAsText(file.blob);
  });

但是上面的代码似乎有误,修改之后用如下代码:

readFile (file) {
  return new Promise((resolve, reject) => {
    var fr = new FileReader()
    fr.onload = () => {
      resolve(fr.result)
    fr.onerror = reject
    fr.readAsArrayBuffer(file)

将其引入 Vue 中之后,只需要下面三行代码,就可以用同步的形式来异步读取 Excel 文件内容了:

const buffer = await this.readFile(this.fileList[0])
const workbook = new ExcelJS.Workbook()
await workbook.xlsx.load(buffer)
readFile (file) {
  return new Promise((resolve, reject) => {
    var fr = new FileReader()
    fr.onload = () => {
      resolve(fr.result)
    fr.onerror = reject
    fr.readAsArrayBuffer(file)