• Stars
    star
    275
  • Rank 149,796 (Top 3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 7 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Read *.xlsx files in a browser or Node.js. Parse to JSON with a strict schema.

read-excel-file

Read small to medium *.xlsx files in a browser or Node.js. Parse to JSON with a strict schema.

Demo

Also check out write-excel-file for writing simple *.xlsx files.

Install

npm install read-excel-file --save

If you're not using a bundler then use a standalone version from a CDN.

Use

Browser

<input type="file" id="input" />
import readXlsxFile from 'read-excel-file'

// File.
const input = document.getElementById('input')
input.addEventListener('change', () => {
  readXlsxFile(input.files[0]).then((rows) => {
    // `rows` is an array of rows
    // each row being an array of cells.
  })
})

// Blob.
fetch('https://example.com/spreadsheet.xlsx')
  .then(response => response.blob())
  .then(blob => readXlsxFile(blob))
  .then((rows) => {
    // `rows` is an array of rows
    // each row being an array of cells.
  })

// ArrayBuffer.
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer
//
// Could be obtained from:
// * File
// * Blob
// * Base64 string
//
readXlsxFile(arrayBuffer).then((rows) => {
  // `rows` is an array of rows
  // each row being an array of cells.
})

Note: Internet Explorer 11 requires a Promise polyfill. Example.

Node.js

const readXlsxFile = require('read-excel-file/node')

// File path.
readXlsxFile('/path/to/file').then((rows) => {
  // `rows` is an array of rows
  // each row being an array of cells.
})

// Readable Stream.
readXlsxFile(fs.createReadStream('/path/to/file')).then((rows) => {
  // `rows` is an array of rows
  // each row being an array of cells.
})

// Buffer.
readXlsxFile(Buffer.from(fs.readFileSync('/path/to/file'))).then((rows) => {
  // `rows` is an array of rows
  // each row being an array of cells.
})

Web Worker

const worker = new Worker('web-worker.js')

worker.onmessage = function(event) {
  // `event.data` is an array of rows
  // each row being an array of cells.
  console.log(event.data)
}

worker.onerror = function(event) {
  console.error(event.message)
}

const input = document.getElementById('input')

input.addEventListener('change', () => {
  worker.postMessage(input.files[0])
})
web-worker.js
import readXlsxFile from 'read-excel-file/web-worker'

onmessage = function(event) {
  readXlsxFile(event.data).then((rows) => {
    // `rows` is an array of rows
    // each row being an array of cells.
    postMessage(rows)
  })
}

JSON

To read spreadsheet data and then convert it to an array of JSON objects, pass a schema option when calling readXlsxFile(). In that case, instead of returning an array of rows of cells, it will return an object of shape { rows, errors } where rows is gonna be an array of JSON objects created from the spreadsheet data according to the schema, and errors is gonna be an array of errors encountered while converting spreadsheet data to JSON objects.

Each property of a JSON object should be described by an "entry" in the schema. The key of the entry should be the column's title in the spreadsheet. The value of the entry should be an object with properties:

  • property — The name of the object's property.
  • required — (optional) Required properties can be marked as required: true.
  • validate(value) — (optional) Cell value validation function. Is only called on non-empty cells. If the cell value is invalid, it should throw an error with the error message set to the error code.
  • type — (optional) The type of the value. Defines how the cell value will be parsed. If no type is specified then the cell value is returned "as is": as a string, number, date or boolean. A type could be a:
    • Built-in type:
      • String
      • Number
      • Boolean
      • Date
    • "Utility" type exported from the library:
      • Integer
      • Email
      • URL
    • Custom type:
      • A function that receives a cell value and returns a parsed value. If the value is invalid, it should throw an error with the error message set to the error code.

Sidenote: When converting cell values to object properties, by default, it skips all null values (skips all empty cells). That's for simplicity. In some edge cases though, it may be required to keep all null values for all the empty cells. For example, that's the case when updating data in an SQL database from an XLSX spreadsheet using Sequelize ORM library that requires a property to explicitly be null in order to clear it during an UPDATE operation. To keep all null values, pass includeNullValues: true option when calling readXlsxFile().

errors

If there were any errors while converting spreadsheet data to JSON objects, the errors property returned from the function will be a non-empty array. An element of the errors property contains properties:

  • error: string — The error code. Examples: "required", "invalid".
    • If a custom validate() function is defined and it throws a new Error(message) then the error property will be the same as the message value.
    • If a custom type() function is defined and it throws a new Error(message) then the error property will be the same as the message value.
  • reason?: string — An optional secondary error code providing more details about the error. Currently, it's only returned for "built-in" types. Example: { error: "invalid", reason: "not_a_number" } for type: Number means that "the cell value is invalid because it's not a number".
  • row: number — The row number in the original file. 1 means the first row, etc.
  • column: string — The column title.
  • value?: any — The cell value.
  • type?: any — The schema type for this column.

An example of using a schema

// An example *.xlsx document:
// -----------------------------------------------------------------------------------------
// | START DATE | NUMBER OF STUDENTS | IS FREE | COURSE TITLE |    CONTACT     |  STATUS   |
// -----------------------------------------------------------------------------------------
// | 03/24/2018 |         10         |   true  |  Chemistry   | (123) 456-7890 | SCHEDULED |
// -----------------------------------------------------------------------------------------

const schema = {
  'START DATE': {
    // JSON object property name.
    prop: 'date',
    type: Date
  },
  'NUMBER OF STUDENTS': {
    prop: 'numberOfStudents',
    type: Number,
    required: true
  },
  // Nested object example.
  // 'COURSE' here is not a real Excel file column name,
  // it can be any string — it's just for code readability.
  'COURSE': {
    // Nested object path: `row.course`
    prop: 'course',
    // Nested object schema:
    type: {
      'IS FREE': {
        prop: 'isFree',
        type: Boolean
      },
      'COURSE TITLE': {
        prop: 'title',
        type: String
      }
    }
  },
  'CONTACT': {
    prop: 'contact',
    required: true,
    // A custom `type` can be defined.
    // A `type` function only gets called for non-empty cells.
    type: (value) => {
      const number = parsePhoneNumber(value)
      if (!number) {
        throw new Error('invalid')
      }
      return number
    }
  },
  'STATUS': {
    prop: 'status',
    type: String,
    oneOf: [
      'SCHEDULED',
      'STARTED',
      'FINISHED'
    ]
  }
}

readXlsxFile(file, { schema }).then(({ rows, errors }) => {
  // `errors` list items have shape: `{ row, column, error, reason?, value?, type? }`.
  errors.length === 0

  rows === [{
    date: new Date(2018, 2, 24),
    numberOfStudents: 10,
    course: {
      isFree: true,
      title: 'Chemistry'
    },
    contact: '+11234567890',
    status: 'SCHEDULED'
  }]
})

Tips and Features

Custom type example.
{
  'COLUMN_TITLE': {
    // This function will only be called for a non-empty cell.
    type: (value) => {
      try {
        return parseValue(value)
      } catch (error) {
        console.error(error)
        throw new Error('invalid')
      }
    }
  }
}
Ignoring empty rows.

By default, it ignores any empty rows. To disable that behavior, pass ignoreEmptyRows: false option.

readXlsxFile(file, {
  schema,
  ignoreEmptyRows: false
})
How to fix spreadsheet data before schema parsing. For example, how to ignore irrelevant rows.

Sometimes, a spreadsheet doesn't exactly have the structure required by this library's schema parsing feature: for example, it may be missing a header row, or contain some purely presentational / irrelevant / "garbage" rows that should be removed. To fix that, one could pass an optional transformData(data) function that would modify the spreadsheet contents as required.

readXlsxFile(file, {
  schema,
  transformData(data) {
    // Add a missing header row.
    return [['ID', 'NAME', ...]].concat(data)
    // Remove irrelevant rows.
    return data.filter(row => row.filter(column => column !== null).length > 0)
  }
})
The function for converting data to JSON objects using a schema is exported from this library too, if anyone wants it.
import convertToJson from "read-excel-file/schema"

// `data` is an array of rows, each row being an array of cells.
// `schema` is a "to JSON" convertion schema (see above).
const { rows, errors } = convertToJson(data, schema)
A React component for displaying errors that occured during schema parsing/validation.
import { parseExcelDate } from 'read-excel-file'

function ParseExcelError({ children }) {
  const { type, value, error, reason, row, column } = children

  // Error summary.
  return (
    <div>
      <code>"{error}"</code>
      {reason && ' '}
      {reason && <code>("{reason}")</code>}
      {' for value '}
      <code>{stringifyValue(value)}</code>
      {' in column '}
      <code>"{column}"</code>
      {' in row '}
      <code>{row}</code>
      {' of spreadsheet'}
    </div>
  )
}

function stringifyValue(value) {
  // Wrap strings in quotes.
  if (typeof value === 'string') {
    return '"' + value + '"'
  }
  return String(value)
}

JSON (mapping)

Same as above, but simpler: without any parsing or validation.

Sometimes, a developer might want to use some other (more advanced) solution for schema parsing and validation (like yup). If a developer passes a map option instead of a schema option to readXlsxFile(), then it would just map each data row to a JSON object without doing any parsing or validation. Cell values will remain "as is": as a string, number, date or boolean.

// An example *.xlsx document:
// ------------------------------------------------------------
// | START DATE | NUMBER OF STUDENTS | IS FREE | COURSE TITLE |
// ------------------------------------------------------------
// | 03/24/2018 |         10         |   true  |  Chemistry   |
// ------------------------------------------------------------

const map = {
  'START DATE': 'date',
  'NUMBER OF STUDENTS': 'numberOfStudents',
  'COURSE': {
    'course': {
      'IS FREE': 'isFree',
      'COURSE TITLE': 'title'
    }
  }
}

readXlsxFile(file, { map }).then(({ rows }) => {
  rows === [{
    date: new Date(2018, 2, 24),
    numberOfStudents: 10,
    course: {
      isFree: true,
      title: 'Chemistry'
    }
  }]
})

Multiple Sheets

By default, it reads the first sheet in the document. If you have multiple sheets in your spreadsheet then pass either a sheet number (starting from 1) or a sheet name in the options argument.

readXlsxFile(file, { sheet: 2 }).then((data) => {
  ...
})
readXlsxFile(file, { sheet: 'Sheet1' }).then((data) => {
  ...
})

By default, options.sheet is 1.

To get the names of all sheets, use readSheetNames() function:

readSheetNames(file).then((sheetNames) => {
  // sheetNames === ['Sheet1', 'Sheet2']
})

Dates

XLSX format originally had no dedicated "date" type, so dates are in almost all cases stored simply as numbers (the count of days since 01/01/1900) along with a "format" description (like "d mmm yyyy") that instructs the spreadsheet viewer software to format the date in the cell using that certain format.

When using readXlsx() with a schema parameter, all schema columns having type Date are automatically parsed as dates. When using readXlsx() without a schema parameter, this library attempts to guess whether a cell contains a date or just a number by examining the cell's "format" — if the "format" is one of the built-in date formats then such cells' values are automatically parsed as dates. In other cases, when date cells use a non-built-in format (like "mm/dd/yyyy"), one can pass an explicit dateFormat parameter to instruct the library to parse numeric cells having such "format" as dates:

readXlsxFile(file, { dateFormat: 'mm/dd/yyyy' })

Trim

By default, it automatically trims all string values. To disable this feature, pass trim: false option.

readXlsxFile(file, { trim: false })

Transform

Sometimes, a spreadsheet doesn't exactly have the structure required by this library's schema parsing feature: for example, it may be missing a header row, or contain some purely presentational / empty / "garbage" rows that should be removed. To fix that, one could pass an optional transformData(data) function that would modify the spreadsheet contents as required.

readXlsxFile(file, {
  schema,
  transformData(data) {
    // Add a missing header row.
    return [['ID', 'NAME', ...]].concat(data)
    // Remove empty rows.
    return data.filter(row => row.filter(column => column !== null).length > 0)
  }
})

Limitations

Performance

There have been some reports about performance issues when reading very large *.xlsx spreadsheets using this library. It's true that this library's main point have been usability and convenience, and not performance when handling huge datasets. For example, the time of parsing a file with 2000 rows / 20 columns is about 3 seconds. So, for reading huge datasets, perhaps use something like xlsx package instead. There're no comparative benchmarks between the two, so if you'll be making one, share it in the Issues.

Formulas

Dynamically calculated cells using formulas (SUM, etc) are not supported.

TypeScript

I'm not a TypeScript expert, so the community has to write the typings (and test those). See example index.d.ts.

CDN

One can use any npm CDN service, e.g. unpkg.com or jsdelivr.net

<script src="https://unpkg.com/[email protected]/bundle/read-excel-file.min.js"></script>

<script>
  var input = document.getElementById('input')
  input.addEventListener('change', function() {
    readXlsxFile(input.files[0]).then(function(rows) {
      // `rows` is an array of rows
      // each row being an array of cells.
    })
  })
</script>

TypeScript

This library comes with TypeScript "typings". If you happen to find any bugs in those, create an issue.

References

Uses xmldom for parsing XML.

GitHub

On March 9th, 2020, GitHub, Inc. silently banned my account (erasing all my repos, issues and comments, even in my employer's private repos) without any notice or explanation. Because of that, all source codes had to be promptly moved to GitLab. The GitHub repo is now only used as a backup (you can star the repo there too), and the primary repo is now the GitLab one. Issues can be reported in any repo.

License

MIT

More Repositories

1

libphonenumber-js

A simpler (and smaller) rewrite of Google Android's libphonenumber library in javascript
JavaScript
2,520
star
2

webpack-isomorphic-tools

Server-side rendering for your Webpack-built applications (e.g. React)
JavaScript
1,260
star
3

react-phone-number-input

React component for international phone number input
JavaScript
882
star
4

universal-webpack

Isomorphic Webpack: both on client and server
JavaScript
687
star
5

javascript-time-ago

International highly customizable relative date/time formatting
JavaScript
362
star
6

webpack-react-redux-server-side-render-example

A sample React/Redux/Webpack project with Server-Side Rendering
JavaScript
250
star
7

react-pages

A complete solution for building a React/Redux application: routing, page preloading, (optional) server-side rendering, asynchronous HTTP requests, document metadata, etc.
JavaScript
179
star
8

webapp

web application boilerplate (React, Redux, React-router, i18n, isomorphic, etc)
JavaScript
124
star
9

react-styling

Transforms CSS-alike text into a React style JSON object
JavaScript
122
star
10

virtual-scroller

A component for efficiently rendering large lists of variable height items
JavaScript
122
star
11

react-time-ago

Localized relative date/time formatting in React
JavaScript
96
star
12

react-responsive-ui

Responsive React UI components
JavaScript
69
star
13

relative-time-format

A convenient `Intl.RelativeTimeFormat` polyfill
JavaScript
62
star
14

require-hacker

Provides a hooking mechanism for Node.js require() calls
JavaScript
62
star
15

country-flag-icons

Vector (*.svg) country flag icons in 3x2 aspect ratio
HTML
62
star
16

anychan

A universal web client for online discussion services like "forums" or "imageboards".
JavaScript
50
star
17

input-format

Formatting user's text input on-the-fly
JavaScript
27
star
18

jquery-full-house

(obsolete, deprecated) fills an html block with predefined text, so that font size automatically adjusts itself to the maximum
HTML
15
star
19

es6-tree-shaking-test

Tests whether your ES6-aware module bundler actually performs "tree shaking" (unused code elimination)
JavaScript
14
star
20

imageboard

An easy uniform wrapper over the popular imageboards' API
JavaScript
13
star
21

easy-react-form

Simple, fast and easy-to-use React Form.
JavaScript
13
star
22

write-excel-file

Write simple *.xlsx files in a browser or Node.js
JavaScript
12
star
23

react-website-basic-example

`react-website` basic example
JavaScript
12
star
24

wheely-ios-test

A test for iOS developer position at Wheely
Objective-C
9
star
25

web-service

Instantiates web services: REST Api, file upload, etc
JavaScript
6
star
26

sociopathy

an unusual social network
JavaScript
5
star
27

serverless-functions

Serverless functions toolkit (e.g. AWS Lambda)
JavaScript
2
star
28

social-components-parser

Parses post content
JavaScript
2
star
29

on-scroll-to

A DOM Element that triggers an action whenever it's scrolled into viewport
JavaScript
2
star
30

react-website-webpack-example

An example of using `react-website` with Webpack
JavaScript
1
star
31

chartogram

Charts in JS with no dependencies
JavaScript
1
star
32

simple-http-file-server

A simple HTTP static file server
JavaScript
1
star
33

webapp-db

JavaScript
1
star
34

webapp-backend

JavaScript
1
star
35

print-error

Javascript print error stack trace (pretty, terminal, html, markdown, etc)
JavaScript
1
star
36

deviantart_photo_stream

DeviantArt powered digital signage for your second display
JavaScript
1
star
37

react-sortable-dnd-list

A sortable Drag&Drop list React component
JavaScript
1
star
38

react-pages-basic-example

`react-pages` basic example
JavaScript
1
star
39

halt-hammerzeit.github.io

HTML
1
star