Я вмію читати файл Excel через, FileReader
але він виводить текст, а також дивні символи з ним. Мені потрібно прочитати xls
файл у строковому порядку, прочитати дані у кожному стовпці та перетворити їх у JSON.
Як читати файл xls рядок за рядком?
Я вмію читати файл Excel через, FileReader
але він виводить текст, а також дивні символи з ним. Мені потрібно прочитати xls
файл у строковому порядку, прочитати дані у кожному стовпці та перетворити їх у JSON.
Як читати файл xls рядок за рядком?
Відповіді:
Нижче функція перетворює дані аркуша Excel (формат XLSX) в JSON. ви можете додати обіцянку функції.
<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>
Нижче за постом є код для формату XLS формату Excel до коду JavaScript JSON?
jszip.js
сценарій раніше xlsx.js
.
Старе запитання, але мушу зазначити, що загальне завдання розбору XLS-файлів з JavaScript є стомлюючим і складним, але не неможливим.
У мене базові парсери, реалізовані в чистому JS:
Обидві сторінки є керованими API XLS / XLSX-аналізаторами файлів HTML5 (ви можете перетягнути файл, і він буде роздруковувати дані в клітинках у списку, розділеному комами). Ви також можете генерувати об'єкти JSON (якщо перший рядок - це заголовок).
Тестовий набір http://oss.sheetjs.com/ показує версію, яка використовує XHR для отримання та аналізу файлів.
excel file
сюди, і ви можете отримати дані у JSON
форматі у 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>
Це поєднання наступних Stackoverflow
публікацій:
Щасти...
Цей код може допомогти вам
Більшість часу jszip.js не працює, тому включіть xlsx.full.min.js у свій js-код.
<input type="file" id="file" ng-model="csvFile"
onchange="angular.element(this).scope().ExcelExport(event)"/>
<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]);
};
Якщо ви хочете найпростіший і найдрібніший спосіб читання файлу * .xlsx у веб-переглядачі, то ця бібліотека може зробити:
https://catamphetamine.github.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.
})
})
У наведеному вище прикладі наведені data
необроблені рядкові дані. Його можна розібрати на JSON за допомогою суворої схеми, передавши schema
аргумент. Дивіться документи API для прикладу цього.
Документи API: http://npmjs.com/package/read-excel-file
Дякую за відповідь вище, я думаю, що сфера (відповідей) завершена, але я хотів би додати "спосіб реагування" для тих, хто використовує реакцію.
Створіть файл, який називається 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)}/>
);
}
}
Тоді ви можете використовувати компонент у методі візуалізації, наприклад:
import ImportData from './importData.js';
import React, {Component} from 'react';
class ParentComponent extends Component{
render(){
return (<importData/>);
}
}
<ImportData/>
встановивши дані у власний стан, ви можете отримати доступ до даних Excel у "батьківському компоненті", дотримуючись цього :
<ImportData/>
замість <importData/>
. Я досить новачок у React, але я вважаю, що назви компонентів завжди мають великі літери. У будь-якому випадку, це ім'я, яке використовується при імпорті в прикладі.
<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>
Якщо вам колись цікаво, як прочитати файл із сервера, цей код може бути корисним.
Обмеження:
<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>
включають xslx.js, xlsx.full.min.js, jszip.js
додати обробник події onchange до вхідного файлу
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);
}
XLS - це бінарний фірмовий формат, який використовується Microsoft. Розбір XLS з мовами серверних сторін дуже важкий без використання певної бібліотеки чи Office Interop. Робити це за допомогою javascript - місія неможлива. Завдяки API-файлу HTML5 ви можете прочитати його бінарний вміст, але для того, щоб проаналізувати та інтерпретувати його, вам потрібно зануритися в специфікації формату XLS . Починаючи з Office 2007, Microsoft прийняла формати файлів Open XML ( xslx
для Excel), що є стандартним.
var excel = новий ActiveXObject ("Excel.Application"); var book = excel.Workbooks.Open (your_full_file_name_here.xls); var sheet = book.Sheets.Item (1); значення значення = sheet.Range ("A1");
коли у вас аркуш. Ви можете використовувати функції VBA, як і в Excel.