I'm trying to read binary file using JavaScript. The first part of the file contains JSON, which I need to get and then the rest of the file, which I do not require.
The first 4 bytes is length of json string in little endian byte order, then json string and then binary data, which is not required.
I wrote following code, which is working:
<html>
<body>
<input type="file" id="file-input" />
</body>
<script>
function readSingleFile(e) {
var file = e.target.files[0];
if (!file) {
return;
}
//console.log(file);
var reader = new FileReader();
reader.onload = function () {
var dataView = new DataView(reader.result, 0);
var jsonLen = dataView.getInt32(0, true);
//console.log(jsonLen);
var byteArray = new Uint8Array(reader.result, 4);
var jsonStr = '';
for (a = 0; a < jsonLen; a++) {
jsonStr += String.fromCharCode(byteArray[a]);
}
//console.log(jsonStr);
var jsonObj = obj = JSON.parse(jsonStr);
console.log(jsonObj);
}
reader.readAsArrayBuffer(file);
}
document.getElementById('file-input').addEventListener('change', readSingleFile, false);
</script>
</html>
I have several questions:
Is it possible to read file partly, only stated beginning? The file could be big (100mb) and I only need first part of it, which is small (up to 1mb) comparing to the binary part which goes after json string and which I do not need.
Is the bit related to getting json string is right? Can it be optimized somehow to get string from array like "from" and "to"?
Initializing DataView and Uint8Array are they consume a lot of memory corresponding to the file length or they just contain reference to ArrayBuffer?
The answer to first and main question is to use file.slice function. Updated code now looks as follow, which also resolves second and third questions:
<html>
<body>
<input type="file" id="file-input" />
</body>
<script>
var jsonStartPos = 4;
function readSingleFile(e) {
var file = e.target.files[0];
if (!file) {
return;
}
var reader = new FileReader();
reader.onload = function (e) {
var dataView = new DataView(e.target.result, 0);
var jsonLen = dataView.getInt32(0, true);
var jsonReader = new FileReader();
jsonReader.onload = function (e) {
processJson(e.target.result);
}
var jsonBlob = file.slice(jsonStartPos, jsonLen + jsonStartPos);
jsonReader.readAsText(jsonBlob);
}
var blob = file.slice(0, jsonStartPos);
reader.readAsArrayBuffer(blob);
}
function processJson(jsonStr) {
var jsonObj = obj = JSON.parse(jsonStr);
console.log(jsonStr);
console.log(jsonObj);
}
document.getElementById('file-input').addEventListener('change', readSingleFile, false);
</script>
</html>
Related
I am able to read Excel file via FileReader but it outputs text as well as weird characters with it. I need to read xls file row-wise, read data in every column and convert it to JSON.
How to read xls file row by row?
Below Function converts the Excel sheet (XLSX format) data to JSON. you can add promise to the function.
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js"></script>
<script>
var ExcelToJSON = function() {
this.parseExcel = function(file) {
var reader = new FileReader();
reader.onload = function(e) {
var data = e.target.result;
var workbook = XLSX.read(data, {
type: 'binary'
});
workbook.SheetNames.forEach(function(sheetName) {
// Here is your object
var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
var json_object = JSON.stringify(XL_row_object);
console.log(json_object);
})
};
reader.onerror = function(ex) {
console.log(ex);
};
reader.readAsBinaryString(file);
};
};
</script>
Below post has the code for XLS format Excel to JSON javascript code?
Old question, but I should note that the general task of parsing XLS files from javascript is tedious and difficult but not impossible.
I have basic parsers implemented in pure JS:
http://oss.sheetjs.com/js-xls/ (XLS files, what you wanted)
http://oss.sheetjs.com/js-xlsx/ (XLSX/XLSM/XLSB files)
Both pages are HTML5 File API-driven XLS/XLSX parsers (you can drag-drop your file and it will print out the data in the cells in a comma-separated list). You can also generate JSON objects (assuming the first row is a header row).
The test suite http://oss.sheetjs.com/ shows a version that uses XHR to get and parse files.
Upload an excel file here and you can get the data in JSON format in console:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js"></script>
<script>
var ExcelToJSON = function() {
this.parseExcel = function(file) {
var reader = new FileReader();
reader.onload = function(e) {
var data = e.target.result;
var workbook = XLSX.read(data, {
type: 'binary'
});
workbook.SheetNames.forEach(function(sheetName) {
// Here is your object
var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
var json_object = JSON.stringify(XL_row_object);
console.log(JSON.parse(json_object));
jQuery('#xlx_json').val(json_object);
})
};
reader.onerror = function(ex) {
console.log(ex);
};
reader.readAsBinaryString(file);
};
};
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
var xl2json = new ExcelToJSON();
xl2json.parseExcel(files[0]);
}
</script>
<form enctype="multipart/form-data">
<input id="upload" type=file name="files[]">
</form>
<textarea class="form-control" rows=35 cols=120 id="xlx_json"></textarea>
<script>
document.getElementById('upload').addEventListener('change', handleFileSelect, false);
</script>
This is a combination of the following Stackoverflow posts:
https://stackoverflow.com/a/37083658/4742733
https://stackoverflow.com/a/39515846/4742733
Good Luck...
This code can help youMost of the time jszip.js is not working so include xlsx.full.min.js in your js code.
Html Code
<input type="file" id="file" ng-model="csvFile"
onchange="angular.element(this).scope().ExcelExport(event)"/>
Javascript
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.10.8/xlsx.full.min.js">
</script>
$scope.ExcelExport= function (event) {
var input = event.target;
var reader = new FileReader();
reader.onload = function(){
var fileData = reader.result;
var wb = XLSX.read(fileData, {type : 'binary'});
wb.SheetNames.forEach(function(sheetName){
var rowObj =XLSX.utils.sheet_to_row_object_array(wb.Sheets[sheetName]);
var jsonObj = JSON.stringify(rowObj);
console.log(jsonObj)
})
};
reader.readAsBinaryString(input.files[0]);
};
If you want the simplest and tiniest way of reading an *.xlsx file in a browser then this library might do:
https://catamphetamine.gitlab.io/read-excel-file/
<input type="file" id="input" />
import readXlsxFile from 'read-excel-file'
const input = document.getElementById('input')
input.addEventListener('change', () => {
readXlsxFile(input.files[0]).then((data) => {
// `data` is an array of rows
// each row being an array of cells.
})
})
In the example above data is raw string data.
It can be parsed to JSON with a strict schema by passing schema argument. See API docs for an example of that.
API docs:
http://npmjs.com/package/read-excel-file
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js"></script>
<script>
var ExcelToJSON = function() {
this.parseExcel = function(file) {
var reader = new FileReader();
reader.onload = function(e) {
var data = e.target.result;
var workbook = XLSX.read(data, {
type: 'binary'
});
workbook.SheetNames.forEach(function(sheetName) {
// Here is your object
var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
var json_object = JSON.stringify(XL_row_object);
console.log(JSON.parse(json_object));
jQuery( '#xlx_json' ).val( json_object );
})
};
reader.onerror = function(ex) {
console.log(ex);
};
reader.readAsBinaryString(file);
};
};
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
var xl2json = new ExcelToJSON();
xl2json.parseExcel(files[0]);
}
</script>
<form enctype="multipart/form-data">
<input id="upload" type=file name="files[]">
</form>
<textarea class="form-control" rows=35 cols=120 id="xlx_json"></textarea>
<script>
document.getElementById('upload').addEventListener('change', handleFileSelect, false);
</script>
Thank you for the answer above, I think the scope (of answers) is completed but I would like to add a "react way" for whoever using react.
Create a file called importData.js:
import React, {Component} from 'react';
import XLSX from 'xlsx';
export default class ImportData extends Component{
constructor(props){
super(props);
this.state={
excelData:{}
}
}
excelToJson(reader){
var fileData = reader.result;
var wb = XLSX.read(fileData, {type : 'binary'});
var data = {};
wb.SheetNames.forEach(function(sheetName){
var rowObj =XLSX.utils.sheet_to_row_object_array(wb.Sheets[sheetName]);
var rowString = JSON.stringify(rowObj);
data[sheetName] = rowString;
});
this.setState({excelData: data});
}
loadFileXLSX(event){
var input = event.target;
var reader = new FileReader();
reader.onload = this.excelToJson.bind(this,reader);
reader.readAsBinaryString(input.files[0]);
}
render(){
return (
<input type="file" onChange={this.loadFileXLSX.bind(this)}/>
);
}
}
Then you can use the component in the render method like:
import ImportData from './importData.js';
import React, {Component} from 'react';
class ParentComponent extends Component{
render(){
return (<ImportData/>);
}
}
<ImportData/> would set the data to its own state, you can access Excel data in the "parent component" by following this:
readExcelFile = async ( file ) =>
{
const fileReader = new FileReader();
fileReader.readAsArrayBuffer( file );
fileReader.onload = ( e ) =>
{
const bufferArray = e.target.result;
const wb = XLSX.read( bufferArray, { type: "buffer" } );
const wsname = wb.SheetNames[ 0 ];
const ws = wb.Sheets[ wsname ];
const data = XLSX.utils.sheet_to_json( ws );
console.log(data);
};
};
<input type="file" name="excelfile" id="excelfile" readExcelFile(file)>
Simplest way to do it using CDN with plain javascript
<script src="https://unpkg.com/read-excel-file#5.x/bundle/read-excel-file.min.js"></script>
<html>
<h1>read-excel-file</h1>
</html>
<script>
var input = document.createElement("INPUT");
input.setAttribute("type", "file");
document.body.appendChild(input)
input.addEventListener('change', function() {
readXlsxFile(input.files[0]).then(function(rows) {
console.log(rows)
})
})
</script>
Simplest way to it using plain javascript.
If you are ever wondering how to read a file from server this code might be helpful.
Restrictions :
File should be in the server (Local/Remote).
You will have to setup headers or have CORS google plugin.
<Head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script lang="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.12.4/xlsx.core.min.js"></script>
</head>
<body>
<script>
/* set up XMLHttpRequest */
// replace it with your file path in local server
var url = "http://localhost/test.xlsx";
var oReq = new XMLHttpRequest();
oReq.open("GET", url, true);
oReq.responseType = "arraybuffer";
oReq.onload = function(e) {
var arraybuffer = oReq.response;
/* convert data to binary string */
var data = new Uint8Array(arraybuffer);
var arr = new Array();
for (var i = 0; i != data.length; ++i) {
arr[i] = String.fromCharCode(data[i]);
}
var bstr = arr.join("");
var cfb = XLSX.read(bstr, { type: 'binary' });
cfb.SheetNames.forEach(function(sheetName, index) {
// Obtain The Current Row As CSV
var fieldsObjs = XLS.utils.sheet_to_json(cfb.Sheets[sheetName]);
fieldsObjs.map(function(field) {
$("#my_file_output").append('<input type="checkbox" value="' + field.Fields + '">' + field.Fields + '<br>');
});
});
}
oReq.send();
</script>
</body>
<div id="my_file_output">
</div>
</html>
include the xslx.js , xlsx.full.min.js , jszip.js
add a onchange event handler to the file input
function showDataExcel(event)
{
var file = event.target.files[0];
var reader = new FileReader();
var excelData = [];
reader.onload = function (event) {
var data = event.target.result;
var workbook = XLSX.read(data, {
type: 'binary'
});
workbook.SheetNames.forEach(function (sheetName) {
// Here is your object
var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
for (var i = 0; i < XL_row_object.length; i++)
{
excelData.push(XL_row_object[i]["your column name"]);
}
var json_object = JSON.stringify(XL_row_object);
console.log(json_object);
alert(excelData);
})
};
reader.onerror = function (ex) {
console.log(ex);
};
reader.readAsBinaryString(file);
}
This is for react js
import React, { useState } from "react";
import logo from "./logo.svg";
import "./App.css";
import * as XLSX from "xlsx";
function App() {
const [items, setItems] = useState([]);
const readExcel = (file) => {
const promise = new Promise((resolve, reject) => {
const fileReader = new FileReader();
fileReader.readAsArrayBuffer(file);
fileReader.onload = (e) => {
const bufferArray = e.target.result;
const wb = XLSX.read(bufferArray, { type: "buffer" });
const wsname = wb.SheetNames[0];
const ws = wb.Sheets[wsname];
const data = XLSX.utils.sheet_to_json(ws);
resolve(data);
};
fileReader.onerror = (error) => {
reject(error);
};
});
promise.then((d) => {
setItems(d);
});
};
return (
<div>
<input
type="file"
onChange={(e) => {
const file = e.target.files[0];
readExcel(file);
}}
/>
<table class="table container">
<thead>
<tr>
<th scope="col">Item</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
{items.map((d) => (
<tr key={d.Item}>
<th>{d.Item}</th>
<td>{d.Description}</td>
</tr>
))}
</tbody>
</table>
</div>
);
}
export default App;
Below code will work in reading XLSX file using Javascript
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.7.7/xlsx.core.min.js"></script>
<script>
function handleFile(e)
{
//Get the files from Upload control
var files = e.target.files;
var i, f;
var title;
var choice;
//Loop through files
for (i = 0, f = files[i]; i != files.length; ++i)
{
var reader = new FileReader();
var name = f.name;
reader.onload = function(e)
{
debugger;
var data = e.target.result;
var result;
var workbook = XLSX.read(data,
{
type: 'binary'
});
var sheet_name_list = workbook.SheetNames;
var roa;
sheet_name_list.forEach(function(y)
{
/* iterate through sheets */
//Convert the cell value to Json
roa = XLSX.utils.sheet_to_json(workbook.Sheets[y]);
if (roa.length > 0)
{
result = roa;
}
});
};
reader.readAsArrayBuffer(f);
}
}
$(document).ready(function()
{
$('#files').change(handleFile);
});
</script>
<input type="file" id="files" name="files"/>
The weird characters you got from reading the Excel file from the FileReader API comes from the structure of the file that differs a lot from a text file.
So reading it as text with the FileReader API will give those weirds character as a result.
What you can do is to use the FileReader API to read it as a binary string.
At this point if you try to log that binary string you will also get weirds characters.
In order to get your file content you need to parse that binary string to extract the data it contains. This can be done quite easily using SheetJS.
import { read, writeFileXLSX, utils } from "https://cdn.sheetjs.com/xlsx-0.18.7/package/xlsx.mjs";
const workbook = read(data, {
type:'binary',
});
data is the binary string resulting from reading an Excel file as a binary string with the FileReader API.
workbook is an object that contains all the data of your file.
The workbook.Sheets instruction will give you access to all the sheets that are in the file.
workbook.Sheets.sheet1 will give you access to the content of the first sheet of the file.
All the related arrays are from the {key:value} type.
The content of a sheet accessed this way is a single dimension object array wich contains all the cells of the sheet starting from the first cell of the header to the last cell wich contains data. Each of those cells has a key like this 'A1', 'B250', 'J3'
This array also have two more entries with those keys '!margin' and '!ref':
'!margin' refers to cells margins so it may not represent any interest.
'!ref' is more interesting as it contains the plage of cells containing data wich is a string like this 'A1:J215' from it you could get the amount of lines or the char of the last column.
If you want more informations you could check the SheetJS documentation and there is a more detailed example here : How to read an excel file contents on client side?
Note :
If you want to use this import statement in an html page you'll need to do it inside those scripts tags : <script type="module" defer> ... </script>
Here is a codepen where you can test this method. There's only the most basic method. There are some shorter ways to do the same by using the SheetJS utils functions to convert directly the sheet content to another format.
XLS is a binary proprietary format used by Microsoft. Parsing XLS with server side languages is very difficult without using some specific library or Office Interop. Doing this with javascript is mission impossible. Thanks to the HTML5 File API you can read its binary contents but in order to parse and interpret it you will need to dive into the specifications of the XLS format. Starting from Office 2007, Microsoft embraced the Open XML file formats (xslx for Excel) which is a standard.
var excel=new ActiveXObject("Excel.Application");
var book=excel.Workbooks.Open(your_full_file_name_here.xls);
var sheet=book.Sheets.Item(1);
var value=sheet.Range("A1");
when you have the sheet. You could use VBA functions as you do in Excel.
Hello! I'am trying to make it work a function called loadDocument, who need a url of the loaded files from the user local computer to work. I'm writing an API to load document from local user computer, and show it on a web reader.
This is my upload button :
<input type="file" id="input" onchange="module.onLoadSelection();" alt="Browse" name="upload"/>
This is my function without fileReader :
var onLoadSelection = function () {
var select = document.getElementById('input');
if (select && select.value) {
var id= '';
var url = select.files.item(0).name;
module.loadDocument(url,id);
}
};
This is my function with fileReader :
var loadTest = function (input) {
var file = document.querySelector('input[type=file]').files[0];
console.log("file loaded! ->", file); // i can read the obj of my file
var reader = new FileReader();
var id = ''; // don't need rightnow
var url = reader.readAsDataURL(file);
console.log("url :", url); // show me undefined....
module.loadDocument(url,id);
}
What i am trying is to get the url of the loaded file from user computer to get my function loadDocument working. She need a url parameter to work.
loadDocument is an API function, i assume i can't get the filepath of my user due to security reason.
What do i need to change/update on my loadDocument(); function to work?
Edit : In fact, nothing to change. The correct way to read my file was :
<input type="file" id="input" onchange="module.onLoadSelection(this.files);" alt="Browse" name="upload"/>
var onLoadSelection = function (files) {
if (files && files.length == 1) {
var id = '';
var url = URL.createObjectURL(files[0]);
module.loadDocument(url,id);
}
};
Don't use a FileReader at all.
When you want to display a File (or a Blob) that is in the browser's memory or on user's disk, then all you need is to generate an URL that do point to this memory slot.
That's exactly what URL.createObjectURL(blob) does: it returns a Blob URI (blob://) that points to the data either in memory or on the disk, acting exactly as a simple pointer.
This method has various advantages over the FileReader.readAsDataURL() method. To name a few:
Store the data in memory only once, when FileReader would need it at reading, then generate a copy as an base64 encoded, and an other one at displaying...
Synchronous. Since all it does is to generate a pointer, no need to make it async.
Cleaner code.
const module = {
loadDocument: (url) => {
document.body.append(
Object.assign(
document.createElement('iframe'),
{ src: url }
)
)
}
};
document.querySelector('input[type=file]').addEventListener('input', function (evt) {
var file = this.files[0];
var url = URL.createObjectURL(file);
module.loadDocument(url);
});
<input type="file">
function PreviewFiles(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
//alert(e.target.result);
$('#pclogo').prop('src', e.target.result)
.width(200)
.height(200);
var base64result = e.target.result.split(',')[1];
$('input[name="logo"]').val(base64result);
};
reader.readAsDataURL(input.files[0]);
}
}
File objects have a readAsDataURL method.
Use that.
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.addEventListener("load", function () {
doSomethingWithAUrl(reader.result);
}, false);
if (file) {
reader.readAsDataURL(file);
}
I have a test on the functions after click the button the image will convert to base64 and return the result but it gives me blank. Why?
$("#addNewProduct").click(function(){
var uploadpImg1 = converttobase64(document.getElementById("uploadpImg1-input"));
var uploadpImg2 = converttobase64(document.getElementById("uploadpImg2-input"));
var uploadpImg3 = converttobase64(document.getElementById("uploadpImg3-input"));
alert(uploadpImg1);
});
function converttobase64(element) {
var result ="";
var file = element.files[0];
var reader = new FileReader();
reader.onloadend = function() {
result = reader.result;
}
reader.readAsDataURL(file);
return result;
}
This is due to image load ( asynchrone process ) , using callck back function fix the problem
You'll see always an empty string even the base64 image is generated , because of the asynchrone proccess ,
What you can do is pass a callback function , in which you can put your after generation intruction ( your alert )
, and call this last on the onloadend by passing the result as param in the callback function
See below Snippet :
$("#addNewProduct").click(function() {
var uploadpImg1 = converttobase64(document.getElementById("uploadpImg1-input"), function(result) {
alert(result);
});
});
function converttobase64(element, callback) {
var result = "";
var file = element.files[0];
if (typeof(file) == 'undefined') return;
var reader = new FileReader();
reader.onloadend = function() {
result = reader.result;
callback(result);
}
reader.readAsDataURL(file);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="uploadpImg1-input" />
<button id="addNewProduct">add</button>
I want to read a file from local storage and upload it via ajax. How is this done?
In most browsers, you can use FileReader to read data from file inputs. There are various functions for reading the data; this example uses the function that returns an ArrayBuffer containing all the bytes:
<script>
window.onload = function() {
document.getElementById('upload').onchange = function(e) {
var file = e.target.files[0];
var fileReader = new FileReader();
fileReader.onload = function(e) {
var bytes = e.target.result;
console.log(bytes);
};
fileReader.readAsArrayBuffer(file);
};
};
</script>
<input type = 'file' id = 'upload' />
I managed to figure it out. Here's the code for anyone interested.
var form = new FormData();
form.append("data", angular.toJson(message));
var bytes = new Uint8Array(audio.length); //audio is an IBuffer
var dataReader = Windows.Storage.Streams.DataReader.fromBuffer(audio);
dataReader.readBytes(bytes);
dataReader.close();
var media = new Blob([bytes], { type: "application/octet-stream" }); //application/octet-stream or audio/mpeg?
form.append("attached_files", media, "recording-aac.caf");
return $http.post(AppSettings.baseUri + "api/sendmessage", form, { headers: { "Content-Type": undefined } });
I am able to read Excel file via FileReader but it outputs text as well as weird characters with it. I need to read xls file row-wise, read data in every column and convert it to JSON.
How to read xls file row by row?
Below Function converts the Excel sheet (XLSX format) data to JSON. you can add promise to the function.
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js"></script>
<script>
var ExcelToJSON = function() {
this.parseExcel = function(file) {
var reader = new FileReader();
reader.onload = function(e) {
var data = e.target.result;
var workbook = XLSX.read(data, {
type: 'binary'
});
workbook.SheetNames.forEach(function(sheetName) {
// Here is your object
var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
var json_object = JSON.stringify(XL_row_object);
console.log(json_object);
})
};
reader.onerror = function(ex) {
console.log(ex);
};
reader.readAsBinaryString(file);
};
};
</script>
Below post has the code for XLS format Excel to JSON javascript code?
Old question, but I should note that the general task of parsing XLS files from javascript is tedious and difficult but not impossible.
I have basic parsers implemented in pure JS:
http://oss.sheetjs.com/js-xls/ (XLS files, what you wanted)
http://oss.sheetjs.com/js-xlsx/ (XLSX/XLSM/XLSB files)
Both pages are HTML5 File API-driven XLS/XLSX parsers (you can drag-drop your file and it will print out the data in the cells in a comma-separated list). You can also generate JSON objects (assuming the first row is a header row).
The test suite http://oss.sheetjs.com/ shows a version that uses XHR to get and parse files.
Upload an excel file here and you can get the data in JSON format in console:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js"></script>
<script>
var ExcelToJSON = function() {
this.parseExcel = function(file) {
var reader = new FileReader();
reader.onload = function(e) {
var data = e.target.result;
var workbook = XLSX.read(data, {
type: 'binary'
});
workbook.SheetNames.forEach(function(sheetName) {
// Here is your object
var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
var json_object = JSON.stringify(XL_row_object);
console.log(JSON.parse(json_object));
jQuery('#xlx_json').val(json_object);
})
};
reader.onerror = function(ex) {
console.log(ex);
};
reader.readAsBinaryString(file);
};
};
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
var xl2json = new ExcelToJSON();
xl2json.parseExcel(files[0]);
}
</script>
<form enctype="multipart/form-data">
<input id="upload" type=file name="files[]">
</form>
<textarea class="form-control" rows=35 cols=120 id="xlx_json"></textarea>
<script>
document.getElementById('upload').addEventListener('change', handleFileSelect, false);
</script>
This is a combination of the following Stackoverflow posts:
https://stackoverflow.com/a/37083658/4742733
https://stackoverflow.com/a/39515846/4742733
Good Luck...
This code can help youMost of the time jszip.js is not working so include xlsx.full.min.js in your js code.
Html Code
<input type="file" id="file" ng-model="csvFile"
onchange="angular.element(this).scope().ExcelExport(event)"/>
Javascript
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.10.8/xlsx.full.min.js">
</script>
$scope.ExcelExport= function (event) {
var input = event.target;
var reader = new FileReader();
reader.onload = function(){
var fileData = reader.result;
var wb = XLSX.read(fileData, {type : 'binary'});
wb.SheetNames.forEach(function(sheetName){
var rowObj =XLSX.utils.sheet_to_row_object_array(wb.Sheets[sheetName]);
var jsonObj = JSON.stringify(rowObj);
console.log(jsonObj)
})
};
reader.readAsBinaryString(input.files[0]);
};
If you want the simplest and tiniest way of reading an *.xlsx file in a browser then this library might do:
https://catamphetamine.gitlab.io/read-excel-file/
<input type="file" id="input" />
import readXlsxFile from 'read-excel-file'
const input = document.getElementById('input')
input.addEventListener('change', () => {
readXlsxFile(input.files[0]).then((data) => {
// `data` is an array of rows
// each row being an array of cells.
})
})
In the example above data is raw string data.
It can be parsed to JSON with a strict schema by passing schema argument. See API docs for an example of that.
API docs:
http://npmjs.com/package/read-excel-file
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js"></script>
<script>
var ExcelToJSON = function() {
this.parseExcel = function(file) {
var reader = new FileReader();
reader.onload = function(e) {
var data = e.target.result;
var workbook = XLSX.read(data, {
type: 'binary'
});
workbook.SheetNames.forEach(function(sheetName) {
// Here is your object
var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
var json_object = JSON.stringify(XL_row_object);
console.log(JSON.parse(json_object));
jQuery( '#xlx_json' ).val( json_object );
})
};
reader.onerror = function(ex) {
console.log(ex);
};
reader.readAsBinaryString(file);
};
};
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
var xl2json = new ExcelToJSON();
xl2json.parseExcel(files[0]);
}
</script>
<form enctype="multipart/form-data">
<input id="upload" type=file name="files[]">
</form>
<textarea class="form-control" rows=35 cols=120 id="xlx_json"></textarea>
<script>
document.getElementById('upload').addEventListener('change', handleFileSelect, false);
</script>
Thank you for the answer above, I think the scope (of answers) is completed but I would like to add a "react way" for whoever using react.
Create a file called importData.js:
import React, {Component} from 'react';
import XLSX from 'xlsx';
export default class ImportData extends Component{
constructor(props){
super(props);
this.state={
excelData:{}
}
}
excelToJson(reader){
var fileData = reader.result;
var wb = XLSX.read(fileData, {type : 'binary'});
var data = {};
wb.SheetNames.forEach(function(sheetName){
var rowObj =XLSX.utils.sheet_to_row_object_array(wb.Sheets[sheetName]);
var rowString = JSON.stringify(rowObj);
data[sheetName] = rowString;
});
this.setState({excelData: data});
}
loadFileXLSX(event){
var input = event.target;
var reader = new FileReader();
reader.onload = this.excelToJson.bind(this,reader);
reader.readAsBinaryString(input.files[0]);
}
render(){
return (
<input type="file" onChange={this.loadFileXLSX.bind(this)}/>
);
}
}
Then you can use the component in the render method like:
import ImportData from './importData.js';
import React, {Component} from 'react';
class ParentComponent extends Component{
render(){
return (<ImportData/>);
}
}
<ImportData/> would set the data to its own state, you can access Excel data in the "parent component" by following this:
readExcelFile = async ( file ) =>
{
const fileReader = new FileReader();
fileReader.readAsArrayBuffer( file );
fileReader.onload = ( e ) =>
{
const bufferArray = e.target.result;
const wb = XLSX.read( bufferArray, { type: "buffer" } );
const wsname = wb.SheetNames[ 0 ];
const ws = wb.Sheets[ wsname ];
const data = XLSX.utils.sheet_to_json( ws );
console.log(data);
};
};
<input type="file" name="excelfile" id="excelfile" readExcelFile(file)>
Simplest way to do it using CDN with plain javascript
<script src="https://unpkg.com/read-excel-file#5.x/bundle/read-excel-file.min.js"></script>
<html>
<h1>read-excel-file</h1>
</html>
<script>
var input = document.createElement("INPUT");
input.setAttribute("type", "file");
document.body.appendChild(input)
input.addEventListener('change', function() {
readXlsxFile(input.files[0]).then(function(rows) {
console.log(rows)
})
})
</script>
Simplest way to it using plain javascript.
If you are ever wondering how to read a file from server this code might be helpful.
Restrictions :
File should be in the server (Local/Remote).
You will have to setup headers or have CORS google plugin.
<Head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script lang="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.12.4/xlsx.core.min.js"></script>
</head>
<body>
<script>
/* set up XMLHttpRequest */
// replace it with your file path in local server
var url = "http://localhost/test.xlsx";
var oReq = new XMLHttpRequest();
oReq.open("GET", url, true);
oReq.responseType = "arraybuffer";
oReq.onload = function(e) {
var arraybuffer = oReq.response;
/* convert data to binary string */
var data = new Uint8Array(arraybuffer);
var arr = new Array();
for (var i = 0; i != data.length; ++i) {
arr[i] = String.fromCharCode(data[i]);
}
var bstr = arr.join("");
var cfb = XLSX.read(bstr, { type: 'binary' });
cfb.SheetNames.forEach(function(sheetName, index) {
// Obtain The Current Row As CSV
var fieldsObjs = XLS.utils.sheet_to_json(cfb.Sheets[sheetName]);
fieldsObjs.map(function(field) {
$("#my_file_output").append('<input type="checkbox" value="' + field.Fields + '">' + field.Fields + '<br>');
});
});
}
oReq.send();
</script>
</body>
<div id="my_file_output">
</div>
</html>
include the xslx.js , xlsx.full.min.js , jszip.js
add a onchange event handler to the file input
function showDataExcel(event)
{
var file = event.target.files[0];
var reader = new FileReader();
var excelData = [];
reader.onload = function (event) {
var data = event.target.result;
var workbook = XLSX.read(data, {
type: 'binary'
});
workbook.SheetNames.forEach(function (sheetName) {
// Here is your object
var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
for (var i = 0; i < XL_row_object.length; i++)
{
excelData.push(XL_row_object[i]["your column name"]);
}
var json_object = JSON.stringify(XL_row_object);
console.log(json_object);
alert(excelData);
})
};
reader.onerror = function (ex) {
console.log(ex);
};
reader.readAsBinaryString(file);
}
This is for react js
import React, { useState } from "react";
import logo from "./logo.svg";
import "./App.css";
import * as XLSX from "xlsx";
function App() {
const [items, setItems] = useState([]);
const readExcel = (file) => {
const promise = new Promise((resolve, reject) => {
const fileReader = new FileReader();
fileReader.readAsArrayBuffer(file);
fileReader.onload = (e) => {
const bufferArray = e.target.result;
const wb = XLSX.read(bufferArray, { type: "buffer" });
const wsname = wb.SheetNames[0];
const ws = wb.Sheets[wsname];
const data = XLSX.utils.sheet_to_json(ws);
resolve(data);
};
fileReader.onerror = (error) => {
reject(error);
};
});
promise.then((d) => {
setItems(d);
});
};
return (
<div>
<input
type="file"
onChange={(e) => {
const file = e.target.files[0];
readExcel(file);
}}
/>
<table class="table container">
<thead>
<tr>
<th scope="col">Item</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
{items.map((d) => (
<tr key={d.Item}>
<th>{d.Item}</th>
<td>{d.Description}</td>
</tr>
))}
</tbody>
</table>
</div>
);
}
export default App;
Below code will work in reading XLSX file using Javascript
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.7.7/xlsx.core.min.js"></script>
<script>
function handleFile(e)
{
//Get the files from Upload control
var files = e.target.files;
var i, f;
var title;
var choice;
//Loop through files
for (i = 0, f = files[i]; i != files.length; ++i)
{
var reader = new FileReader();
var name = f.name;
reader.onload = function(e)
{
debugger;
var data = e.target.result;
var result;
var workbook = XLSX.read(data,
{
type: 'binary'
});
var sheet_name_list = workbook.SheetNames;
var roa;
sheet_name_list.forEach(function(y)
{
/* iterate through sheets */
//Convert the cell value to Json
roa = XLSX.utils.sheet_to_json(workbook.Sheets[y]);
if (roa.length > 0)
{
result = roa;
}
});
};
reader.readAsArrayBuffer(f);
}
}
$(document).ready(function()
{
$('#files').change(handleFile);
});
</script>
<input type="file" id="files" name="files"/>
The weird characters you got from reading the Excel file from the FileReader API comes from the structure of the file that differs a lot from a text file.
So reading it as text with the FileReader API will give those weirds character as a result.
What you can do is to use the FileReader API to read it as a binary string.
At this point if you try to log that binary string you will also get weirds characters.
In order to get your file content you need to parse that binary string to extract the data it contains. This can be done quite easily using SheetJS.
import { read, writeFileXLSX, utils } from "https://cdn.sheetjs.com/xlsx-0.18.7/package/xlsx.mjs";
const workbook = read(data, {
type:'binary',
});
data is the binary string resulting from reading an Excel file as a binary string with the FileReader API.
workbook is an object that contains all the data of your file.
The workbook.Sheets instruction will give you access to all the sheets that are in the file.
workbook.Sheets.sheet1 will give you access to the content of the first sheet of the file.
All the related arrays are from the {key:value} type.
The content of a sheet accessed this way is a single dimension object array wich contains all the cells of the sheet starting from the first cell of the header to the last cell wich contains data. Each of those cells has a key like this 'A1', 'B250', 'J3'
This array also have two more entries with those keys '!margin' and '!ref':
'!margin' refers to cells margins so it may not represent any interest.
'!ref' is more interesting as it contains the plage of cells containing data wich is a string like this 'A1:J215' from it you could get the amount of lines or the char of the last column.
If you want more informations you could check the SheetJS documentation and there is a more detailed example here : How to read an excel file contents on client side?
Note :
If you want to use this import statement in an html page you'll need to do it inside those scripts tags : <script type="module" defer> ... </script>
Here is a codepen where you can test this method. There's only the most basic method. There are some shorter ways to do the same by using the SheetJS utils functions to convert directly the sheet content to another format.
XLS is a binary proprietary format used by Microsoft. Parsing XLS with server side languages is very difficult without using some specific library or Office Interop. Doing this with javascript is mission impossible. Thanks to the HTML5 File API you can read its binary contents but in order to parse and interpret it you will need to dive into the specifications of the XLS format. Starting from Office 2007, Microsoft embraced the Open XML file formats (xslx for Excel) which is a standard.
var excel=new ActiveXObject("Excel.Application");
var book=excel.Workbooks.Open(your_full_file_name_here.xls);
var sheet=book.Sheets.Item(1);
var value=sheet.Range("A1");
when you have the sheet. You could use VBA functions as you do in Excel.