tp6 实现excel 导入功能

news2024/11/23 11:46:30

在项目根目录安装

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"><i
                            class="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);
                            //关闭当前frame
                            parent.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.coloradmin.cn/o/781624.html

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

相关文章

Vmware+CentOS+KGDB内核双机调试

1.准备两台CentOS系统的vmware虚拟机 其中一台作为调试机&#xff0c;另一台则作为被调试机。如下图&#xff0c;CentOS7.9x64为被调试机&#xff0c;CentOS7.9x64-Debugger为调试机 2.配置串口设备 若虚拟机有串口设备&#xff08;如打印机&#xff09;&#xff0c;需要先删…

数据仓库设计理论

数据仓库设计理论 一、数据仓库基本概念 1.1、数据仓库介绍 数据仓库是一个用于集成、存储和分析大量结构化和非结构化数据的中心化数据存储系统。它旨在支持企业的决策制定和业务分析活动。 1.2、基本特征 主题导向&#xff1a;数据仓库围绕特定的主题或业务领域进行建模…

vscode设置java -Xmx最大堆内存

如果在vscode中直接运行java程序&#xff0c;想要改下每次运行的最大堆内存&#xff0c;按照如下修改 一、vscode安装java插件 当然前提是vscode在应用管理中已经安装了java语言的插件&#xff0c;Debugger for Java,如下图所示 二、CommandShiftP打开配置搜索框 三、搜索…

PCL+C++点云窗体显示实例

程序示例精选 PCLC点云窗体显示实例 如需安装运行环境或远程调试&#xff0c;见文章底部个人QQ名片&#xff0c;由专业技术人员远程协助&#xff01; 前言 这篇博客针对<<PCLC点云窗体显示实例>>编写代码&#xff0c;代码整洁&#xff0c;规则&#xff0c;易读。 …

深度剖析数据在内存中的存储——C语言进阶

目录 一、数据类型介绍 1.1 整型家族 1.2 浮点型家族 1.3 构造类型 二、整型在内存中的存储 2.1 原码、反码、补码 2.2 大小端字节序 大小端存储的定义 为什么会有大小端字节序之分呢&#xff1f; 怎么判断一个当前机器的大小端 2.3 有符号和无符号的区别 三、浮点型…

网络安全秋招面试题+(含答案)

自我介绍 有没有挖过src&#xff1f; 平时web渗透怎么学的&#xff0c;有实战吗&#xff1f;有过成功发现漏洞的经历吗&#xff1f; 做web渗透时接触过哪些工具 xxe漏洞是什么&#xff1f;ssrf是什么&#xff1f; 打ctf的时候负责什么方向的题 为什么要搞信息安全&#xff0c;对…

人工智能在教育上的应用1-基于pytorch框架下模型训练,用于数学题目图形的智能分类

大家好&#xff0c;今天给大家介绍一下人工智能在教育上的应用1-基于pytorch框架下模型训练&#xff0c;用于数学题目图形的智能分类&#xff0c;本文将利用CNN算法对数学题目中的图形进行自动分类和识别。这种应用可以帮助学生更好地理解和解决与数学相关的问题。基于CNN的数学…

C++平衡搜索二叉树(AVL)

一、定义 AVL树本质上还是一棵二叉搜索树&#xff0c;它的特点是&#xff1a; 1.本身首先是一棵二叉搜索树。 2.带有平衡条件&#xff1a;每个结点的左右子树的高度之差的绝对值&#xff08;平衡因子&#xff09;最多为1。 搜索二叉树可能出现单边树的情况&#xff0c;导致…

JavaWeb 速通HTTP

目录 一、HTTP快速入门 1.HTTP简介 : 2.HTTP请求头 : 3.HTTP响应头 : 二、HTTP响应状态码 1.基本介绍 : 2.常见状态码 : 3.状态码的分类 : 4.完整状态码汇总 : 三、HTTP请求包和响应包 1.请求包分析 : 1 GET请求 (1) 说明 (2) doGet返回数据给浏览器 (3) form表单提…

网络安全合规与标准的主要发展方向

网络安全合规就是避免违反网络安全有关的法律、法规、规章、合同义务以及任何安全要求&#xff0c;标准在网络安全合规工作中扮演着重要的角色。 一、标准在网络安全合规体系中的地位作用 网络安全合规体系包括网络安全有关的法律、法规、规章、其他规范性文件、及合同义务等…

JavaWeb课程设计项目实战(07)——项目编码实践4

版权声明 本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl 在本节教程中&#xff0c;我们实现删除学生的功能。当在学生列表中点击删除后即可删除某位学生并重新加载学生列表。所以&#xff0c;该操作实际包含两步&#xff1a; 1、删…

Java虚拟机——虚拟机字节码执行引擎 运行时栈帧结构

1 虚拟机字节码执行引擎 执行引擎是Java虚拟机核心的组成部分之一。"虚拟机"是一个相对于"物理机"的概念&#xff0c;这两种机器都有代码执行的能力&#xff0c;物理机的执行引擎是直接建立在处理器、缓存、指令集和操作系统层面上的。而虚拟机的执行引擎…

unity 调用c++ dll同时将unity的值传给c++

最近因为项目的需要&#xff0c;实现了将C工程生成dll在unity中调用&#xff0c;但同时发现如果能让unity中值实时的传给c则就完美了&#xff0c;而不只是把c计算的结果给unity。 通过验证是可行的。 C 生成dll导出关键部分 // SPDX-License-Identifier: MIT // Copyright (c…

单Bank OTA升级:STM32G071 BootLoader (一)

什么是单Bank升级&#xff1a;将Flash划分为以下3个区域。 BootLoader区&#xff1a;程序进行升级的引导程序&#xff0c;根据Upade_Flag来判断跳转Bank区运行程序或是接收升级数据写入Bank&#xff0c;接收完成后擦写Upade_Flag区&#xff0c;进行跳转Bank区运行程序。 Upad…

无线投屏手机(安卓)屏幕到 Linux(ubuntu 22.04)桌面

1.安装 scrcpy 安装 scrcpy会自动安装 adb. 这个版本的adb功能不是最全的&#xff0c;需要删掉&#xff0c;然后从链接 https://dl.google.com/android/repository/platform-tools-latest-darwin.zip 下载&#xff0c;解压安装即可。 2. 在手机上 打开开发者模式和 USB调试…

Git Merge和Rebase

◆ 前言 Git作为我们日常开发代码的版本管理&#xff0c;开发分支的管理方面起着很大作用&#xff0c;我们开发过程中分支通常有生产、预发、测试、开发这几个分支&#xff0c;我们会根据项目进行的某个阶段&#xff0c;将代码提交到某个版本上&#xff0c;正常流程是先开发 —…

【并发专题】阻塞队列BlockingQueue实战及其原理分析

目录 前置知识队列有界队列、无界队列Queue——队列在JAVA里面的接口 阻塞队列介绍BlockingQueue——阻塞队列在JAVA里面的接口阻塞队列的应用场景JUC包下的阻塞队列 课程内容*一、ArrayBlockingQueue基本介绍应用场景使用示例基本原理数据结构核心源码解析双指针与环形数组 *二…

设计模式:创建型模式

抽象工厂 abstract factory 例子 考虑一个多风格的界面应用&#xff0c;要求可以切换不同风格类型的组件&#xff08;窗口&#xff0c;滚动条&#xff0c;按钮等&#xff09; 风格/组件pm风格motif风格滚动条pmScrollBarmotifScrollBar窗口pmWindowMotifWindow WidgetFact…

Vue中TodoList案例_静态

MyHeader.vue <template><div class"todo-header"><input type"text" placeholder"请输入你的任务名称&#xff0c;按回车键确认"></div> </template><script> export default {name: "MyHeader"…

16. python从入门到精通——Python网络爬虫

目录 什么是爬虫 优点 网络爬虫的常用技术 网络请求&#xff1a;有三个常用网络请求模块 Urllib模块&#xff1a;python原生系统中标准库模块 urllib中的子模块 urllib.parse.urlencode() 常用于进行 URL 的 get 请求参数拼接 Urllib3模块&#xff1a;Urllib模块的升级版…