layui-excel

2020-07-31

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

一. layui-excel模块化

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

1. layui-excel 的导入

layui官方文档找到layui第三方插件模块
搜索excel, 找到码云社区
下载lay-ext文件夹
放入自己的项目静态资源目录
在html中配置插件
在layui中导入插件

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(语句) }}

<script type="text/html" id="LAY-excel-export-ans">
    {{# layui.each(d.data, function(file_index, item){ }}
    <blockquote class="layui-elem-quote">{{d.files[file_index].name}}</blockquote>
    <div class="layui-tab">
        <ul class="layui-tab-title">
        	<!-- 循环文件名(切换标题) -->
            {{# layui.each(item, function(sheet_name, content) { }}
            <li>{{sheet_name}}</li>
            {{# }); }}
        </ul>
        <div class="layui-tab-content">
        	<!-- 显示所有表的数据, 根据点击sheet名显示不同的内容 -->
            {{# layui.each(item, function(sheet_name, content) { }}
            <div class="layui-tab-item">
                <table class="layui-table">
                    {{# layui.each(content, function(row_index, value) { }}
                    {{# var col_index = 0 }}
                    <tr>
                        {{# layui.each(value, function(col_key, val) { }}
                        <td id="table-export-{{file_index}}-{{sheet_name}}-{{row_index}}-{{col_index++}}">{{val}}</td>
                        {{# });}}
                    </tr>
                    {{# });}}
                </table>
                <!-- 预览代码最后可以去掉 -->
               <pre class="layui-code">{{JSON.stringify(content, null, 2)}}</pre>
            </div>
            {{# }); }}
        </div>
    </div>
    {{# }) }}
</script>

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)
};