VUE的必学知识点：利用JS导入EXCEL

最新推荐文章于 2024-08-06 16:10:14 发布

指尖愤怒

最新推荐文章于 2024-08-06 16:10:14 发布

阅读量249

点赞数

本文链接：https://blog.csdn.net/hj0556/article/details/108468340

版权

当有导入EXCEL文件的需求时，展示EXCEL的内容在页面上
需基于js-xlsx的包
第一步 npm i xlsx
第二步 import XLSX from ‘xlsx’

第三步页面（用iview框架中的上传）

  <Upload action="/"  :before-upload="handleUpload">
        <Icon type="ios-cloud-upload-outline" size="30"  />
        <p>导入Excel</p>
 </Upload>

action指向空链接，before-upload指上传之前触发，当中含有file文件

第四步

   handleUpload(file){
     if(file.name.indexOf('xls')==-1){
      this.$Message.warning({content:'导入的不是Excel文件',duration:4})
       return false;
     }
     else{
       this.file = file;
       console.log(this.file)
       this.readWorkbookFromLocalFile(file,this.readWorkbook)
       return false;
     }
    },
},

先判断上传文件是否为excel，如果是再往下走，将file文件传入

/ 读取本地excel文件
readWorkbookFromLocalFile(file, callback) {
	var reader = new FileReader();
	reader.onload = function(e) {
		var data = e.target.result;
		//生成workbook对象
		var workbook = XLSX.read(data, {type: 'binary'});
    if(callback) callback(workbook);};
 reader.readAsBinaryString(file);
},

callback函数为

readWorkbook(workbook)
{var sheetNames = workbook.SheetNames; // 工作表名称集合
var worksheet = workbook.Sheets[sheetNames[0]]; // 这里我们只读取第一张sheet
  var csv = XLSX.utils.sheet_to_csv(worksheet);
  console.log(csv)
	console.log(this.csv2table(csv))
},

csv2table为转化结果函数，如下

// 将csv转换成简单的表格，会忽略单元格合并，在第一行和第一列追加类似excel的索引
 csv2table(csv)
{
  var html = '<table>';
  debugger
	var rows = csv.split('\n');
  rows.pop(); // 最后一行没用的
  rows.shift()//删除了一行（表头）
  
 //data1为需要展示在页面的列表，iview的Table组件 
if(this.data1.length != 0){
   this.data1 = []     //当第二次导入清空第一次导入内容
}
为data1里面赋值，会自动展示
for(let i = 0;i<rows.length;i++){
this.data1.push({
xh:rows[i].split(",")[0],         
name:rows[i].split(",")[1],
zjhm:rows[i].split(",")[2],
})
}
 this.$Message.success({content:'导入成功',duration:4})
 
 //---------分割线-------------- 上为展示Table表格
 //下为展示成原生table/tr/td
 
	rows.forEach(function(row, idx) {
    
		var columns = row.split(',');
		columns.unshift(idx+1); // 添加行索引
		if(idx == 0) { // 添加列索引
			html += '<tr>';
			for(var i=0; i<columns.length; i++) {
				html += '<th>' + (i==0?'':String.fromCharCode(65+i-1)) + '</th>';
			}
			html += '</tr>';
		}
		html += '<tr>';
		columns.forEach(function(column) {
			html += '<td>'+column+'</td>';
		});
		html += '</tr>';
	});
  html += '</table>';

	return html;
},