JavaScript读取Excel文件

升龙决 發表於 2020-4-28 14:53:00

作者:不老猫
日期:2020年04月28日
（如果文章确实地帮助你解决了问题，请点个推荐，让我开心一下，助人为乐，嘿嘿(*^▽^*)）
前端时间想做一个读取EXCEL的相关应用，只想在单页面上使用，一直没有找到可以用的。后来在一个之前的前端页面框架中找到了，然后截出来用，特此做个笔记。
<h3 id="h3-u5BFCu5165u5E93">导入库</h3>
首先需要一个套件，这个套件叫sheetJS，需要导入一个xlsx库，不过我npm不成功，我找到一个http直连。在html页面中添加如下代码：
<div class="cnblogs_code">
<pre>
<script type="text/javascript" src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script></pre>
</div>
<h3>页面组件</h3>
1、在页面中需要添加一个input组件，以从电脑中获取文件。
<div class="cnblogs_code">
<pre>1 <input type="file" accept=".xlsx, .xls"@change="Excelinput_handle_change"></pre>
</div>
change 事件就是导入文件之后触发的事件。
2、事件处理
<div class="cnblogs_code">
<pre>1 // 选择文件完毕
2 Excelinput_handle_change(e) {
3 const files = e.target.files; // 导入的文件是数组的
4 const file = files; // only use files
5 if (!file) return;
6
7 console.log('导入的文件：' + file.name);
8 this.Excelfile_reader_file(file);
9 }</pre>
</div>
<h3 id="-">读取文件</h3>
读取文件是异步的。直接上代码：
<div class="cnblogs_code">
<pre> 1 // 读取文件，是个异步的
 2 Excelfile_reader_file(rawFile) {
 3 return new Promise((resolve, reject) => {
 4 const reader = new FileReader();
 5 reader.onload = e => {
 6 const data = e.target.result
 7 const workbook = XLSX.read(data, { type: 'array' });
 8 // console.log('读取出的源表格数据');
 9 // console.log(workbook);
10 const firstSheetName = workbook.SheetNames;
11 const worksheet = workbook.Sheets;
12 const header = this.Excelfile_get_header_row(worksheet);// 第一行为标题栏
13 const results = XLSX.utils.sheet_to_json(worksheet);
14 this.file_excel.file_data.header = header;
15 this.file_excel.file_data.results = results;
16 // console.log('读取出的数据');
17 // console.log(this.file_excel.file_data);
18 resolve();
19 }
20 reader.readAsArrayBuffer(rawFile);
21 })
22 },</pre>
</div>
这是标题转化的函数，直接粘贴使用即可：
<div class="cnblogs_code">
<pre> 1 Excelfile_get_header_row(sheet) {
 2 const headers = [];
 3 const range = XLSX.utils.decode_range(sheet['!ref'])
 4 let C;
 5 const R = range.s.r;
 6 /* start in the first row */
 7 for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */
 8 const cell = sheet[XLSX.utils.encode_cell({
 9 c: C,
10 r: R
11 })]
12 /* find the cell in the first row */
13 let hdr = 'UNKNOWN ' + C // <-- replace with your desired default
14 if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
15 headers.push(hdr);
16 }
17 return headers;
18 }</pre>
</div>
<h2 id="-">这些足够了，其余没了……</h2> 
来源：https://www.cnblogs.com/Romanticcat-Lin/p/12794280.html

頁: [1]

琼殿技术论坛's Archiver

JavaScript读取Excel文件