tp6 实现excel 导入功能

在项目根目录安装

composer require phpoffice/phpspreadsheet

我们看一下郊果图,如下

点击导入excel表格数据

 出现弹窗选择文件,控制台打开输出文档内容

前端layui代码

<form id="uploadForm" class="form-horizontal"  enctype="multipart/form-data"><input type="file" name="file" class="file" multiple="multiple" required=""><button type="button" id="upload" class="btn btn-xs btn-purple"><span class="ace-icon fa fa-cloud-upload icon-on-right bigger-110"></span>上传文件</button>
</form>
layui.use(['form','layer'],function () {$("#input_excel_data").click(function () {// console.log('点击导入了');// layer.msg('点击导入了');layer.open({type: 1,area: ["500px", "360px"],title: "导入excel文件",content:$("#file_upload_div"),});});$("#upload_file").click(function () {//上传文档// var data = new  FormData;// data.append('file',my_file);// data.append('name',my_file.name);var formData = new FormData($('#uploadForm')[0]);$.ajax({'type':'post','url':'user/input_excel_data',contentType:false,processData:false,'data':formData,success:function (data) {console.log(data);layer.msg('导入成功');}});})
});

整个laui页面文件如下

{extend name="public/layout"}
{block name="content"}
<div class="layui-col-md12"><div class="layui-card"><div class="layui-card-header"><!-- <button class="layui-btn" onclick="xadmin.open('添加用户组','{:admin_url('admin_user/add')}')">添加管理员</button> --><form id="uploadForm" class="form-horizontal"  enctype="multipart/form-data"><div id="file_upload_div" style="display: none" class="text-center"><input type="file" name="file" class="file" multiple="multiple" required="">
<!--                <button type="button" id="upload_file" class="btn btn-xs btn-purple">-->
<!--                      <span class="ace-icon fa fa-cloud-upload icon-on-right bigger-110"></span>上传文件-->
<!--                      </button>--><button type="button"  class="layui-btn mt-2" id="upload_file">开始上传</button></div></form></div><div class="layui-card-header" style="height:auto"><form class="layui-form layui-col-space5" id="main-form" ><div class="layui-inline layui-show-xs-block">{if isset($params['nickname']) && !empty($params['nickname'])}<input type="text" name="nickname" placeholder="用户名" value="{$params['nickname']}" autocomplete="off"class="layui-input">{else /}<input type="text" name="nickname" placeholder="用户名" value="" autocomplete="off"class="layui-input">{/if}</div><div class="layui-inline layui-show-xs-block">{if isset($params['phone'])}<input type="text" name="phone" placeholder="手机号" value="{$params['phone']}" autocomplete="off"class="layui-input">{else/}<input type="text" name="phone" placeholder="手机号" value="" autocomplete="off"class="layui-input">{/if}</div><div class="layui-inline layui-show-xs-block"><select name="enable"><option value="">状态</option>{if isset($params['enable'])}<option value="1" {eq name="$params['enable']" value='1'}selected{/eq}>正常</option><option value="2" {eq name="$params['enable']" value='2'}selected{/eq}>禁用</option>{else/}<option value="1">正常</option><option value="2">禁用</option>{/if}</select></div><div class="layui-inline layui-show-xs-block"><button class="layui-btn" lay-submit="" lay-filter="search"><iclass="layui-icon">&#xe615;</i></button><button class="layui-btn" type="button" lay-submit=""onclick="location.href = location.pathname">重置</button><button class="layui-btn" type="button" lay-submit="" onclick="location.reload()">刷新</button><button class="layui-btn" type="button" lay-submit="" id="input_excel_data">导入excel表格数据</button></div></form></div><div class="layui-card-body "><table class="layui-table layui-form"><thead><tr><!-- <th><input type="checkbox" name=""  lay-skin="primary"></th> --><th>头像</th><th>手机号</th><th>昵称</th><th>性别</th><th>状态</th><th>创建时间</th><th>操作</th></tr></thead><tbody>{volist name="datalist" id="vo"}<tr><!-- <td><input type="checkbox" name=""  lay-skin="primary"> </td> --><td><img style="width: 50px;height: 50px" src="{$vo['avatar']}" alt=""></td><td>{$vo['phone']}</td><td>{$vo['nickname']}</td><td>{$vo['sex']}</td><td>{$vo['enable']}</td><td>{$vo['create_time']}</td><td class="td-manage"><button  onclick="xadmin.open(this.innerText,this.dataset.url)" data-url="{:admin_url('user/edit',['id'=>$vo['id']])}" type="button" class="layui-btn">编辑</button><button data-url="{:admin_url('user/del',['id'=>$vo['id']])}" type="button" class="layui-btn layui-btn-danger delete-btn">删除</button></td></tr>{/volist}</tbody></table></div><div class="layui-card-body ">{$datalist->render()|raw}</div></div>
</div>{/block}{block name="foot"}
<script>
(function(){$('.layui-table').on('click','.delete-btn',function(){var obj = this;layer.confirm('确认要删除吗?',function(index){//发异步删除数据console.log(obj.dataset)var index = layer.load()$.ajax({'type':'post','url':obj.dataset.url,success:function(data){layer.close(index)layer.alert(data.msg||'服务器出现错误',{icon:data.err_code === 200?6:5,end:function(){if(data.err_code === 200){$($(obj).parents('tr')[0]).remove();}}});}})});});
})();//不添加这个,无法显示下拉列表
layui.use("form", function () {})
layui.use(['form','layer'],function () {$("#input_excel_data").click(function () {// console.log('点击导入了');// layer.msg('点击导入了');layer.open({type: 1,area: ["500px", "360px"],title: "导入excel文件",content:$("#file_upload_div"),});});$("#upload_file").click(function () {//上传文档// var data = new  FormData;// data.append('file',my_file);// data.append('name',my_file.name);var formData = new FormData($('#uploadForm')[0]);$.ajax({'type':'post','url':'user/input_excel_data',contentType:false,processData:false,'data':formData,success:function (data) {console.log(data);// layer.msg('导入成功');layer.alert(data.msg,{icon:data.err_code === 200?6:5,end:function(){if(data.err_code === 200){// 获得frame索引var index = parent.layer.getFrameIndex(window.name);//关闭当前frameparent.layer.close(index);parent.location.reload();}}});},error:function(){layer.close(index);layer.alert("服务器出现错误")}});})
});</script>
{/block}

接下来我们看一看Tp6后台的代码 

这是控制器代码,需要在控制器中添加引入

use PhpOffice\PhpSpreadsheet\IOFactory;

   /*** 导入excel文档数据* @return \think\response\Json*/function input_excel_data(){$file = request()->file('file');if (!$file) {print_r('请选择需要导入的文件');die;}// 加载文件$spreadsheet = IOFactory::load($file->getRealPath());$sheet = $spreadsheet->getActiveSheet();// 处理文件数据$data = [];foreach ($sheet->getRowIterator() as $row) {$rowIndex = $row->getRowIndex();// 不读取第一行 标题if ($rowIndex == 1) {continue;}$cellIterator = $row->getCellIterator();$row = [];foreach ($cellIterator as $cell) {$row[] = $cell->getValue();}$data[] = $row;}// 数据入库处理print_r($data);die;return success_json('导入数据');}

需要添加路由

//上传文档,导入excel文档数据
Route::post('productImport', 'ProductOrder/importExcel');

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/10069.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

c#数据类型:15种数据类型类型(13种基本数据类型,2种引用类型)

数据类型分为基本数据类型和引用数据类型 c#中,基本数据类型有13个,引用数据类型有两个 值类型整型名称命名空间说明范围8个byteSystem.Byte8位无符号整型0-255sbyteSystem.sbyte8位有符号整型-128-127intSystem.int3232位有符号整型uintsystem.uint3232位无符号整型shortsys…

如何使用 Flatpak 在 Linux 上安装 ONLYOFFICE 桌面编辑器?

Flatpak 是一款与 Linux 发行版无关的软件实用工具&#xff0c;可用于在 Linux 上构建和分发桌面端应用。其可帮助您安装第三方 Linux 应用程序&#xff0c;无需安装库或处理依赖。 ONLYOFFICE 桌面版是什么 ONLYOFFICE 编辑器桌面版是一款全面的办公工具&#xff0c;提供了文…

Java_24_Lambda表达式

Lambda表达式 简化匿名内部类的&#xff01;&#xff01; 什么是Lambda表达式&#xff1f; Lambda表达式是JDK1.8开始之后的新技术&#xff0c;是一种代码的新语法。 是一种特殊写法&#xff0c; 作用&#xff1a;“核心目的是为了简化匿名内部类的代码写法”。 Lambda表达式…

hive库操作示例

hive库操作示例 1、常规表 创建数据库 CREATE DATABASE mydatabase;使用数据库 USE mydatabase;创建表 CREATE TABLE mytable (id INT,name STRING,age INT ) ROW FORMAT DELIMITED FIELDS TERMINATED BY , STORED AS TEXTFILE;插入数据 INSERT INTO TABLE mytable VALUE…

(七)「消息队列」之 RabbitMQ 发布者确认(使用 .NET 客户端)

发布者确认&#xff08;Publisher Confirms&#xff09; 发布者确认是一个 RabbitMQ 扩展&#xff0c;用于实现可靠的发布。当在通道上启用发布者确认时&#xff0c;客户端发布的消息将由代理异步确认&#xff0c;这意味着它们已在服务器端得到处理。 0、引言 先决条件 本教程…

C#中使用LINQ和lambda实现左链接、右链接、内链接

C#中使用LINQ和lambda实现左链接、右链接、内链接 在 C# 中使用 LINQ 和 lambda 表达式可以实现左链接&#xff08;Left Join&#xff09;、右链接&#xff08;Right Join&#xff09;和内链接&#xff08;Inner Join&#xff09;操作。这些链接操作是针对两个数据集合之间的关…

在命令行模式、eclipse console下执行Java程序输入中文的几种情况尝试

介绍 在命令行模式下执行Java程序&#xff0c;如果输入中文&#xff0c;经常会出现和代码中的解码字符集不匹配的情况&#xff0c;导致结果不正确。 在命令行模式下执行Java程序&#xff0c;输入中文&#xff0c;其实是用某种字符集编码成字节流&#xff0c;Java程序读取该字节…

Seaborn库绘制单变量分布和双变量分布

Matplotlib虽然已经是比较优秀的绘图库了&#xff0c;但是它有个今人头疼的问题&#xff0c;那就是API使用过于复杂&#xff0c;它里面有上千个函数和参数&#xff0c;属于典型的那种可以用它做任何事&#xff0c;却无从下手。 Seaborn基于 Matplotlib核心库进行了更高级的API…

python与深度学习(五):CNN和手写数字识别

目录 1. 说明2. 卷积运算3. 填充4. 池化5. 卷积神经网络实战-手写数字识别的CNN模型5.1 导入相关库5.2 加载数据5.3 数据预处理5.4 数据处理5.5 构建网络模型5.6 模型编译5.7 模型训练、保存和评价5.8 模型测试5.9 模型训练结果的可视化 6. 手写数字识别的CNN模型可视化结果图7…

LeetCode面向运气之Javascript—第2600题-K件物品的最大和-94.68%

LeetCode第2600题-K件物品的最大和 题目要求 袋子中装有一些物品&#xff0c;每个物品上都标记着数字 1 、0 或 -1 。 四个非负整数 numOnes 、numZeros 、numNegOnes 和 k 。 袋子最初包含&#xff1a; numOnes 件标记为 1 的物品。numZeroes 件标记为 0 的物品。numNegOn…

12 扩展Spring MVC

✔ 12.1 实现页面跳转功能 页面跳转功能&#xff1a;访问localhost:8081/jiang会自动跳转到另一个页面。 首先&#xff0c;在config包下创建一个名为MyMvcConfig的配置类&#xff1a; 类上加入Configuration注解&#xff0c;类实现WebMvcConfiger接口&#xff0c;实现里面的视…

Tomcat中的缓存配置

Tomcat中的缓存配置通常是通过Web应用程序的context.xml文件或Tomcat的server.xml文件进行设置。下面提供一个简单的案例来说明如何在Tomcat中配置缓存。 假设您的Web应用程序名为"myapp"&#xff0c;我们将在context.xml中添加缓存配置。 打开Tomcat安装目录&…

【学习心得】sublime text 4 自定义编译系统

一、问题描述 在电脑中有多个版本的Python解释器&#xff0c;而sublime默认选择最新版本的解释器&#xff0c;如何指定自己想要的解释器呢&#xff1f; 二、自定义编译系统 1、选择新建编译系统&#xff08;如图&#xff09; 2、重写两个键值对&#xff08;只修改中文部分其…

升级你的数据采集引擎 使用多线程与代理池提升HTTP代理爬虫性能

在信息爆炸的时代&#xff0c;海量数据的采集和分析成为了企业发展和决策的关键。本文将分享如何通过多线程和代理池的应用&#xff0c;助您升级数据采集引擎&#xff0c;提高数据获取效率和稳定性。 HTTP代理爬虫作为数据采集的重要工具&#xff0c;其性能直接影响着数据采集…

【Hive 01】简介、安装部署、高级函数使用

1 Hive简介 1.1 Hive系统架构 Hive是建立在 Hadoop上的数据仓库基础构架&#xff0c;它提供了一系列的工具&#xff0c;可以进行数据提取、转化、加载&#xff08; ETL &#xff09;Hive定义了简单的类SQL查询语言&#xff0c;称为HQL&#xff0c;它允许熟悉SQL的用户直接查询…

待学习列表

列表 梦是人生番外篇 语雀 语言 区块链 TS 微信小程序 前端 Java Python C

【《机器学习和深度学习:原理、算法、实战(使用Python和TensorFlow)》——以机器学习理论为基础并包含其在工业界的实践的一本书】

机器学习和深度学习已经成为从业人员在人工智能时代必备的技术&#xff0c;被广泛应用于图像识别、自然语言理解、推荐系统、语音识别等多个领域&#xff0c;并取得了丰硕的成果。目前&#xff0c;很多高校的人工智能、软件工程、计算机应用等专业均已开设了机器学习和深度学习…

AVFoundation - 视频过渡

文章目录 一、简要说明二、使用一、简要说明 相关类 AVMutableVideoCompositionAVMutableVideoCompositionInstruction 视频操作指令 AVMutableVideoCompositionLayerInstruction二、使用 - (void)testCom5 {// Compositionを生成AVMutableComposition *mutableComposition =…

OBS 迁移--华为云

一、创建迁移i任务 1. 登录管理控制台。 2. 单击管理控制台左上角的 在下拉框中选择区域。 3. 单击“ 服务列表 ”&#xff0c;选择“ 迁移 > 对象存储迁移服务 OMS ”&#xff0c;进入“ 对象存储迁移服务 ”页面。 4. 单击页面右上角“ 创建迁移任务 ”。 5. 仔细阅读…

el-upload上传图片和视频,支持预览和删除

话不多说&#xff0c; 直接上代码&#xff1a; 视图层&#xff1a; <div class"contentDetail"><div class"contentItem"><div style"margin-top:5px;" class"label csAttachment">客服上传图片:</div><el…