layui第三方插件引入_layui第三方插件layui-excel的用法

layui第三方插件layui-excel的用法

一. layui-excel模块化

想到使用layui-excel,就默认认为使用使用了整个layui模块

1. layui-excel 的导入

layui官方文档找到layui第三方插件模块

[站外图片上传中...(image-d4ee6c-1602861123679)]

搜索excel, 找到码云社区

image 20200423115714948

下载lay-ext文件夹

[站外图片上传中...(image-98fd99-1602861123679)]

放入自己的项目静态资源目录

[站外图片上传中...(image-c43143-1602861123679)]

在html中配置插件

image 20200423120014313

在layui中导入插件

[站外图片上传中...(image-8c0972-1602861123679)]

2.layui-excel的使用

2.1 下载excel文件

​ 在网页中下载excel文件需要调用

excel.exportExcel([['Hello', 'World', '!']], 'hello.xlsx', 'xlsx')方法

方法参数介绍:

第一个参数: excel表中的数据内容, 一般是一个二维数组, 或者一个对象,另外可以独立设置表头

第二个参数: 下载的文件名称

第三个参数: 下载文件的类型

2.2 显示上传的excel文件

2.2.1 上传excel文件处理方式:

一般是点击触发上传文件事件

$('#LAY-excel-import-excel').change(function (e) {

// 注意：这里直接引用 e.target.files 会导致 FileList 对象在读取之前变化，导致无法弹出文件

var files = Object.values(e.target.files);

uploadExcel(files);

// 变更完清空，否则选择同一个文件不触发此事件

e.target.value = ''

});

// 调用上传excel需要传入文件参数

function uploadExcel(files) {

layui.use(['excel', 'layer'], function () {

// 引入layui中的弹出层插件和excel插件, excel以配置完毕

var excel = layui.excel,

layer = layui.layer;

try {

// 实质上调用了excel.importExcel的方法来加载原生上传上来的files对象

excel.importExcel(files, {

// 读取数据的同时梳理数据

// 当然也可以不处理

fields: {

'id': 'A'

, 'username': 'B'

, 'experience': 'C'

, 'sex': 'D'

, 'score': 'E'

, 'city': 'F'

, 'classify': 'G'

, 'wealth': 'H'

, 'sign': 'I'

}

}, function (data) {

// 解析结束之后,会执行回调函数, 获取到解析成功之后的数据

// 还可以再进行数据梳理

// 如果不需要展示直接上传，可以再次 $.ajax() 将JSON数据通过 JSON.stringify() 处理后传递到后端即可

layer.open({

title: '文件转换结果'

, area: ['800px', '400px']

, tipsMore: true

, content: laytpl($('#LAY-excel-export-ans').html()).render({data: data, files: files})

// laytpl($('#LAY-excel-export-ans').html()).render({data: data, files: files}) 弹出层的内容由渲染引擎渲染出来

// 与ejs模板类似渲染时传入两个值data(数据), files(文件)

, success: function () {

element.render('tab')

layui.code({})

}

})

})

} catch (e) {

layer.alert(e.message)

}

})

}

关于layui的模板引擎

type="text/html"用来指明这个模板引擎

id="xxx"作为唯一标识检索需要渲染的内容,值得注意的是, 真正的渲染并不是在这个script标签里面的

layui模板引擎常见的写法:

{ {\ \# layui(语句) }} {{ 变量 }}

{{# layui.each(d.data, function(file_index, item){ }}

{{d.files[file_index].name}}

{{# layui.each(item, function(sheet_name, content) { }}

{{sheet_name}}

{{# }); }}

{{# layui.each(item, function(sheet_name, content) { }}

{{# layui.each(content, function(row_index, value) { }}

{{# var col_index = 0 }}

{{# layui.each(value, function(col_key, val) { }}

{{val}}

{{# });}}

{{# });}}

{{JSON.stringify(content, null, 2)}}

{{# }); }}

{{# }) }}

2.2.2 拖放上传excel文件

document.body.ondragover = function (e) {

// 阻止;浏览器默认事件

e.preventDefault()

};

document.body.ondrop = function (e) {

// 阻止浏览器默认事件

e.preventDefault();

var files = e.dataTransfer.files;

uploadExcel(files)

};