sheetjs/demos/vue/SheetJS-vue.js

69 lines
1.9 KiB
JavaScript
Raw Permalink Normal View History

/* xlsx.js (C) 2013-present SheetJS -- http://sheetjs.com */
2017-06-19 07:14:14 +00:00
var SheetJSFT = [
"xlsx", "xlsb", "xlsm", "xls", "xml", "csv", "txt", "ods", "fods", "uos", "sylk", "dif", "dbf", "prn", "qpw", "123", "wb*", "wq*", "html", "htm"
].map(function(x) { return "." + x; }).join(",");
var SJSTemplate = [
'<div>',
'<input type="file" multiple="false" id="sheetjs-input" accept="' + SheetJSFT + '" @change="onchange" />',
'<br/>',
'<button type="button" id="export-table" style="visibility:hidden" @click="onexport">Export to XLSX</button>',
2017-06-19 07:14:14 +00:00
'<br/>',
'<div id="out-table"></div>',
'</div>'
].join("");
2021-09-21 19:03:05 +00:00
var component_struct = {
2017-06-19 07:14:14 +00:00
template: SJSTemplate,
methods: {
onchange: function(evt) {
2017-07-06 18:55:10 +00:00
var file;
var files = evt.target.files;
if (!files || files.length == 0) return;
file = files[0];
2017-09-24 23:40:09 +00:00
2017-06-19 07:14:14 +00:00
var reader = new FileReader();
reader.onload = function (e) {
2017-07-06 18:55:10 +00:00
// pre-process data
var binary = "";
var bytes = new Uint8Array(e.target.result);
var length = bytes.byteLength;
for (var i = 0; i < length; i++) {
binary += String.fromCharCode(bytes[i]);
}
2017-09-24 23:40:09 +00:00
2017-06-19 07:14:14 +00:00
/* read workbook */
2017-07-06 18:55:10 +00:00
var wb = XLSX.read(binary, {type: 'binary'});
2017-06-19 07:14:14 +00:00
/* grab first sheet */
var wsname = wb.SheetNames[0];
var ws = wb.Sheets[wsname];
/* generate HTML */
2017-09-24 23:40:09 +00:00
var HTML = XLSX.utils.sheet_to_html(ws);
2017-06-19 07:14:14 +00:00
/* update table */
document.getElementById('out-table').innerHTML = HTML;
/* show export button */
document.getElementById('export-table').style.visibility = "visible";
2017-06-19 07:14:14 +00:00
};
2017-07-06 18:55:10 +00:00
reader.readAsArrayBuffer(file);
2017-06-19 07:14:14 +00:00
},
onexport: function(evt) {
/* generate workbook object from table */
var wb = XLSX.utils.table_to_book(document.getElementById('out-table'));
/* generate file and force a download*/
XLSX.writeFile(wb, "sheetjs.xlsx");
2017-06-19 07:14:14 +00:00
}
}
2021-09-21 19:03:05 +00:00
};
var app;
if(Vue.component) {
Vue.component('html-preview', component_struct);
} else {
app = Vue.createApp({});
app.component('html-preview', component_struct);
}