Layui文件下载（VIP典藏版）

Layui常用总结50篇（VIP典藏版）

目录

一、内容主体区域

二、监听行工具事件

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

四、扩展：文件点击下载

一、内容主体区域

<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：转载请注明原博客，尊重劳动成果！

有用请点赞，养成良好习惯！

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

---