1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!-- xlsx.js (C) 2013-present  SheetJS -- http://sheetjs.com --><template><div @drop="_drop" @dragenter="_suppress" @dragover="_suppress">	<div class="row"><div class="col-xs-12">		<form class="form-inline">			<div class="form-group">				<label for="file">Spreadsheet</label>				<input type="file" class="form-control" id="file" :accept="SheetJSFT" @change="_change" />			</div>		</form>	</div></div>	<div class="row"><div class="col-xs-12">		<button :disabled="data.length ? false : true" class="btn btn-success" @click="_export">Export</button>	</div></div>	<div class="row"><div class="col-xs-12">		<div class="table-responsive">			<table class="table table-striped">				<thead><tr>					<th v-for="c in cols" :key="c.key">{{c.name}}</th>				</tr></thead>				<tbody>					<tr v-for="(r, key) in data" :key="key">						<td v-for="c in cols" :key="c.key"> {{ r[c.key] }}</td>					</tr>				</tbody>			</table>		</div>	</div></div></div></template><script>const make_cols = refstr => Array(XLSX.utils.decode_range(refstr).e.c + 1).fill(0).map((x,i) => ({name:XLSX.utils.encode_col(i), key:i}));
const _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(",");export default {	data() {		return {			data: ["SheetJS".split(""), "1234567".split("")],			cols: [				{name:"A", key:0},				{name:"B", key:1},				{name:"C", key:2},				{name:"D", key:3},				{name:"E", key:4},				{name:"F", key:5},				{name:"G", key:6},			],			SheetJSFT: _SheetJSFT	}; },	methods: {		_suppress(evt) { evt.stopPropagation(); evt.preventDefault(); },		_drop(evt) {			evt.stopPropagation(); evt.preventDefault();			const files = evt.dataTransfer.files;			if(files && files[0]) this._file(files[0]);		},		_change(evt) {			const files = evt.target.files;			if(files && files[0]) this._file(files[0]);		},		_export(evt) {			/* convert state to workbook */			const ws = XLSX.utils.aoa_to_sheet(this.data);			const wb = XLSX.utils.book_new();			XLSX.utils.book_append_sheet(wb, ws, "SheetJS");			/* generate file and send to client */			XLSX.writeFile(wb, "sheetjs.xlsx");		},		_file(file) {			/* Boilerplate to set up FileReader */			const reader = new FileReader();			reader.onload = (e) => {				/* Parse data */				const ab = e.target.result;				const wb = XLSX.read(new Uint8Array(ab), {type:'array'});				/* Get first worksheet */				const wsname = wb.SheetNames[0];				const ws = wb.Sheets[wsname];				/* Convert array of arrays */				const data = XLSX.utils.sheet_to_json(ws, {header:1});				/* Update state */				this.data = data;				this.cols = make_cols(ws['!ref']);			};			reader.readAsArrayBuffer(file);		}	}};</script>