layUI实现文件下载

最新推荐文章于 2024-08-23 18:00:00 发布

ifHappyEveryDay@

最新推荐文章于 2024-08-23 18:00:00 发布

阅读量3.5k

点赞数 1

分类专栏：前端 layUI 文章标签： layui javascript 前端

本文链接：https://blog.csdn.net/luoawai/article/details/131748847

版权

前端同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

layUI

1 篇文章 0 订阅

订阅专栏

文章介绍了如何利用layui框架，结合JavaScript的XMLHttpRequest对象和Blob处理，实现文件下载的功能。通过监听table工具事件，触发下载、编辑和删除操作，重点展示了文件下载的详细代码实现，包括设置请求头、处理响应以及创建下载链接等步骤。

摘要由CSDN通过智能技术生成

1. 需求：使用layui来实现文件下载是一个常见的需求，今天我们就来实现一下

2. 代码实现如下

HTML部分

<div class="layui-body">
        <!-- table主体区域 -->
        <table class="layui-hide" id="test" lay-filter="test"></table>
 		
		<div style="margin-top: 40px" align="center">
        <button id="downLoad" class="layui-btn layui-btn-xs" onclick="downLoad()">  模板下载</button>
		</div>
        <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>

JS内容部分

// 通用工具类
    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);
    }

// 主要下载部分实现代码
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();
            }
        });
    });