Layui文件下载

Html-JS-JQ-Vue-React-Layui 专栏收录该内容
43 篇文章 0 订阅

Layui常用总结

https://blog.csdn.net/libusi001/article/details/100065911

目录

一、内容主体区域

二、监听行工具事件

三、相关工具类(省略...)

四、扩展:文件点击下载

一、内容主体区域

<div class="layui-body">
        <!-- 内容主体区域 -->
        <table class="layui-hide" id="test" lay-filter="test"></table>

        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <h3>文件列表</h3>
            </div>
        </script>

        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-xs"  lay-event="download">下载</a>
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>
</div>

二、监听行工具事件

layui.use('table', function () {
        var table = layui.table;

        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                layer.msg('功能待开发');
            }
            else if (obj.event === 'download') {
                // 获取XMLHttpRequest
                var xmlResquest = new XMLHttpRequest();
                //  发起请求
                xmlResquest.open("POST", ctxPath + "xxController/download", true);
                // 设置请求头类型
                xmlResquest.setRequestHeader("Content-type", "application/json");
                xmlResquest.setRequestHeader("id",data.id);
                xmlResquest.responseType = "blob";
                //  返回
                xmlResquest.onload = function(oEvent) {
                    //alert(this.status);
                    var content = xmlResquest.response;
                    // 组装a标签
                    var elink = document.createElement("a");

                    //获取文件格式,截取文件后缀
                    var fileaddr = data.fileAddress;
                    var index = fileaddr.lastIndexOf(".");
                    var length  =fileaddr.length;
                    var laterName = fileaddr.substring(index,length);
                    //拼接下载的文件名
                    var newFileName = data.fileName+laterName;
                    //设置文件下载路径
                    elink.download = newFileName;
                    elink.style.display = "none";
                    var blob = new Blob([content]);

                    //解决下载不存在文件的问题,根据blob大小判断
                    if(blob.size==0){
                        layer.msg('服务器没找到此文件,请联系管理员!');
                    }else{
                        elink.href = URL.createObjectURL(blob);
                        document.body.appendChild(elink);
                        elink.click();
                        document.body.removeChild(elink);
                    }
                };
                xmlResquest.send();
            }
        });
    });

三、相关工具类(省略...)

四、扩展:文件点击下载

<div style="margin-top: 40px" align="center">
        <button id="downLoad" class="layui-btn layui-btn-xs" onclick="downLoad()">模板下载</button>
</div>
    //下载模板
    function downLoad() {
        var curWwwPath = window.document.location.href;
        var pathName = window.document.location.pathname;
        var pos = curWwwPath.indexOf(pathName);
        var localhostPath = curWwwPath.substring(0, pos);
        var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
        var url = localhostPath + projectName + "/xxTemplate/xxx.xls";
        window.open(url);
    }

PS:转载请注明原博客,尊重劳动成果!

有用请点赞,养成良好习惯!

疑问、交流、鼓励请留言!

需要后台代码的同学,一键三连留下邮箱~


©️2021 CSDN 皮肤主题: 酷酷鲨 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值