vue实现excel导入导出,vue表格导出excel简书
本文主要介绍了用Vue导入Excel的功能。本文一步步为你详细介绍，对你的学习或工作有一定的参考价值。有需要的朋友可以参考一下。
1.前端主导实现步骤
第一步，点击页面上的导入按钮，读入Excel文件。
包括插件。
第二步，根据后端数据格式处理的要求，转换成他们需要的格式。
你需要写自己的逻辑。
第三步，通过后端接口，通过ajax将数据发回。
接口，正常运行。
简而言之：前端读excel文件，修改文件格式，调接口
2.实现读入Excel文件
注意：这一步可以实现前端导入功能。如果有兴趣修改格式，可以继续看第三步。
总结：将代码复制到您自己的文件夹中，并下载必要的插件。
2.1使用elementUI提供的vue-admin-element中的上传方法(百度仓库克隆方法，官网也有)
2.2下载npm安装包xlsx -S(默认情况下，步骤2.1现在已经完成)
2.3引入UploadExcel组件，并将其注册为global(转到文件UploadExcel，复制它，打包组件就不用说了)
如果不注册全局组件，请参考下面的代码：(喜欢的话可以在main.js中做，这里我按照可维护性来做)
从导入PageTools。/PageTools
从导入UploadExcel。/UploadExcel
导出默认值{
//可以在这里配置插件的初始化和插件提供的全局函数。
安装(Vue) {
//执行组件的全局注册。
Vue.component (PageTools ，page tools)//注册工具栏组件
Vue.component (Uploadexcel ，upload excel)//注册以导入Excel组件
}
}
2.4介绍组件，使用组件，配置路由，设置点击回调函数(不用多说)
2.5测试结果
浏览器手动输入你设置的路由地址，页面跳转过来。
小结：1.最重要的是复制然后下载必要的插件。
2.需要引入UploadExcel组件(其功能是导入Excel文件)，但不需要全局注册，看心情。
3.导入组件并为他注册回调函数。他的两个参数是必要的。可以参考别人的源代码，这样更容易理解。
4.excel导入插件的本质：将Excel转换成js分析后可以识别的常规数据，我们在得到数据后可以做任何操作。
3.对数据进行加工
注意：这一步实际上是测试JavaScript的应用。可惜这个对我来说并不难，相信很久以后。
3.1后端要求的格式：
3.2我们必须处理的问题：
将中文字段翻译成英文。在excel中读取名称，但在后端需要用户名。
日期处理。从excel中读取的时间是一个数值，而后端需要一个标准日期。
3.3单独封装一个处理函数：
/**
*结果excel表格内容
//[{ 姓名:小张，手机号码: 13712345678}，{.}]
//目标
//[{ 用户名:小张，手机: 13712345678}，{.}]
*/
跨Excel(结果){
const userRelations={
雇佣日期:工作时间，
手机号码:手机，
名称:用户名，
雇佣确认日期:更正时间，
工作编号:工作编号，
部门:部门名称，
就业形式:就业形式
}
返回results.map(item={
const obj={}
//1.取出这个对象的所有属性名：[姓名，手机号]
//2.遍历这个数组，通过中文名字到userRelations找到对应的英文名字，保存值。
const zhKeys=Object.keys(item)
zhKeys.forEach(zhKey={
const enKey=user relations[zhKey]
//如果是时间格式的，就得转换。
if(enKey=== correction time enKey=== time of entry ){
obj[enKey]=新日期(formatExcelDate(item[zhKey])
}否则{
项目，项目
}
})
返回对象
})
}
handleSuccess({ results，header }) {
Console.log(从当前excel文件中读取的内容是，结果)
//结果：[{参赛日期：44502，姓名：xxxx}]
//目标：
//结果：[{timeOfEntry: 44502，用户名：xxxx}]
//处理从excel读入的格式
const arr=this.transExcel(结果)
Console.log(转换为后的格式，arr)
})
3.4 日期处理函数：
//将excel文件中的日期格式内容变回标准时间。
//https://blog.csdn.net/qq_15054679/article/details/107712966
导出函数formatExcelDate(number，format=/) {
const time=新日期((数字-25567)* 24 * 3600000-5 * 60 * 1000-43 * 1000-24 * 3600000-8 * 3600000)
time.setYear(time.getFullYear())
const year=time.getFullYear()
const month=time.getMonth() 1
const date=time.getDate()
if (format format.length===1) {
返回年格式月格式日期
}
返回年份(第10个月？0 月：月)(日期10？“0”日期：日期)
}
4.调接口，发请求，在页面中使用
从“@/api/employees”导入{ importEmployee }
导出默认值{
名称：导入，
方法：{
异步handleSuccess({ results，header }) {
尝试{
Console.log(从当前excel文件中读取的内容是，结果)
//结果：[{参赛日期：44502，姓名：xxxx}]
//目标：
//结果：[{timeOfEntry: 44502，用户名：xxxx}]
const arr=this.transExcel(结果)
Console.log(转换为后的格式，arr)
//调用上传的接口，
const RS=wait import employee(arr)
Console.log(调用上传的接口，rs)
//上传成功后，返回上一页
这个。$router.back()
这个。$message.success(操作成功)
} catch (err) {
这个。$message.error(err.message)
}
}
}
5 总结：
导入的功能和导出类似，但难点在于数据格式的转换。本文不做过多介绍，在另一篇导出文章中有详细解释。有兴趣可以去看看。我就跳到导出功能的实现。
关于Vue导入Excel的功能这篇文章就到这里了。有关vue导入Excel的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。