Layui文件下载

雨点打透心脏的1/2处 2024-04-18 17:19 54阅读 0赞

> <table> 
>  <tbody> 
>   <tr> 
>    <td> <p><strong>Layui常用总结</strong></p> </td> 
>    <td><strong><a href="https://blog.csdn.net/libusi001/article/details/100065911" rel="nofollow">https://blog.csdn.net/libusi001/article/details/100065911</a></strong></td> 
>   </tr> 
>  </tbody> 
> </table>
> 
> **目录**
> 
> 一、内容主体区域
> 
> 二、监听行工具事件
> 
> 三、相关工具类(省略...)
> 
> 四、扩展：文件点击下载
> 
> ## 一、内容主体区域 ##
> 
>     <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：转载请注明原博客，尊重劳动成果！**
> 
> **有用请点赞，养成良好习惯！**
> 
> **疑问、交流、鼓励请留言！**
> 
> **需要后台代码的同学，一键三连并留下邮箱~**

--------------------