java前端导入excel_Java之导入Excel Vue框架前端篇

html内容：

导入Excel

js：

上传部分：

//检查选中的文件是否是Excel文件

checkType() {

let vm = this;

let allImgExt = '.xls|.xlsx|';

let filePath = this.$refs.head.value;

let extName = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();

if (allImgExt.indexOf(extName + '|') === -1) {

alert("请选择正确的Excel文件");

this.$refs.head.value = '';

excelContent = [];

return;

}

let file = this.$refs.head.files[0];

vm.readExcel(file);//预览选中的Excel文件信息

vm.excelContent = [];

}

//导入Excel文件

uploadExcel() {

let vm = this ;

let formData = new FormData();

let file = this.$refs.head.files[0];

if(file == "" || file == undefined){

alert("请选择要导入的Excel文件");

return;

}

formData.append('file', file);

console.log("userCode = ", this.token.userInfo.userCode)

//调用函数，把formData当做参数上传给后台的attchment微服务中的表格中

this.ctApi.post({

url: uploadExcel,

data: formData,

success: (data) => {

}

})

}

预览部分：把Excel文件的信息保存到excelContent 数组中，每一个元素就是一行excel数据

//预览要导入的excel

readExcel(file) {// 解析Excel

let _this = this;

return new Promise(function(resolve, reject){// 返回Promise对象

const reader = new FileReader();

reader.onload = (e) => {// 异步执行

try {

// 以二进制流方式读取得到整份excel表格对象

let data = e.target.result,workbook = XLSX.read(data, {type: 'binary'});

let batteryArr = [];

var sheetNames = workbook.SheetNames // 工作表名称集合

_this.workbook = workbook

_this.getTable(sheetNames[0])

} catch (e) {

reject(e.message);

}

};

reader.readAsBinaryString(file);

});

}

//根据excel的表明，获取单元格内容

getTable (sheetName) {

let vm =this;

var worksheet = this.workbook.Sheets[sheetName]//获取整张excel表的内容

vm.excelContent = XLSX.utils.sheet_to_json(worksheet)//把获取的信息转换成接送字符串

}

java前端导入excel_Java之导入Excel Vue框架前端篇相关推荐

java 动态导入excel_java实现导入导出excel数据
项目需要,要实现一个导入导出excel的功能,于是,任务驱动着我学习到了POI和JXL这2个java操作Excel的插件. 一.POI和JXL介绍 1.POI:是对所有office资源进行读写的一套工 ...
java横向导出excel_Java中导入、导出Excel
一.介绍当前B/S模式已成为应用开发的主流,而在企业办公系统中,常常有客户这样子要求:你要把我们的报表直接用Excel打开(电信系统.银行系统).或者是:我们已经习惯用Excel打印.这样在我们实际 ...
java重命名excel_Java重命名Excel工作表并设置工作表及标签颜色
码农公社 210.net.cn 210是何含义?10月24日是程序员节,1024 =210.210既 210 之意. 一份Excel文档中通常包含多个内容不同的工作表,而他们的默认名都为Sheet ...
java对象转excel_Java对象和Excel转换工具XXL-EXCEL
一.简介概述 XXL-EXCEL 是一个灵活的Java对象和Excel文档相互转换的工具. 一行代码完成Java对象和Excel之间的转换. 特性1.Excel导出:支持Java对象装换为Excel ...
java后台生成excel_Java后台生成Excel前台下载
Java后台通过poi生成HSSFWorkbook 对生成HSSFWorkbook 类型处理转为文件流通过response 返回到前台 HSSFWorkbook hw = null; try{ hw ...
java通用解析excel_java读取简单excel通用工具类
本文实例为大家分享了java读取简单excel通用工具类的具体代码,供大家参考,具体内容如下读取excel通用工具类 import java.io.File; import java.io.File ...
java动态生成excel_java动态生成excel打包下载
@SuppressWarnings("unchecked")public String batchExport() throwsDBException{ @SuppressWarn ...
vue 前端商城框架_前端工程师要掌握几个Vue框架
vue是一套用于构建用户界面的渐进式JavaScript框架,简单说Vue是类似于view的前端框架. vue开发核心是关注视图层,同时它更加容易与第三方库结合,再者我们在现有的项目中可以直接整合一起 ...
高级前端软件工程师知识整理之Vue技术栈篇
1. 什么是MVVM? MVVM是Model-View-ViewModel的简写,它本质上就是MVC的改进版.MVVM就是将View的状态和行为抽象化,将视图UI和业务逻辑分开,View和Model之 ...
Vue.js高效前端开发 • 【Ant Design of Vue框架进阶】
全部章节 >>>> 文章目录一.栅格组件 1.栅格组件介绍 2.栅格组件使用 3.实践练习二.输入组件 1.输入框组件使用 2.选择器组件使用 3.单选框组件使用 4.实践 ...

java前端导入excel_Java之导入Excel Vue框架前端篇

java前端导入excel_Java之导入Excel Vue框架前端篇相关推荐

最新文章

热门文章