JS结合layui实现文件预览、下载功能

JS结合layui实现文件预览、下载功能

这俩天做项目，需要做一个下载pdf的功能，但是需要实现客户点击文件先进行预览，然后预览界面得有下载按钮，提供下载。之前已经写过一篇直接下载的文章了，这篇主要记录一下预览功能；

用到的技术 ：JS + layui(结合iframe)

一、html代码

<div class="grey-card jus-c ptb30 flex"> <div class="tc mlr50 cupointer" οnclick="getProjectFiles(1,${detail[0]["项目ID"]},'信托合同')"><img src="/res/images/file.png"> <div class="mt5 fs16">信托合同</div> </div> <div class="tc mlr50 cupointer" οnclick="getProjectFiles(2,${detail[0]["项目ID"]},'信托计划说明书')"><img src="/res/images/file.png"> <div class="mt5 fs16">信托计划说明书</div> </div> <div class="tc mlr50 cupointer" οnclick="getProjectFiles(3,${detail[0]["项目ID"]},'认购风险说明书')"><img src="/res/images/file.png"> <div class="mt5 fs16">认购风险说明书</div> </div> <div class="tc mlr50 cupointer" οnclick="getProjectFiles(6,${detail[0]["项目ID"]},'服务协议')"><img src="/res/images/file.png"> <div class="mt5 fs16">服务协议</div> </div> </div>

二、JS代码

//获取文件 function getProjectFiles(type,xmid,title) { var fileParam = { pageNo: 1, pageSize: 10, xmId: xmid, cxlx: type, }; $.ajax({ url: "/prod/getProjectFiles", type: "POST", data: fileParam, dataType: "JSON", success: function (ret) { if (ret && ret['code'] > 0) { //渲染界面 var dataList = ret['list']; //通过layui进行先预览，在下载 showFile(dataList[0]["附件路径"],title,true,false); //这个是之前写的第一种，直接下载pdf文件 // download(dataList[0]["附件名"],dataList[0]["附件路径"]); } } }) } //文件下载 function download(fileName,filePath){ window.open("/downloadTwo?fileName="+encodeURI(fileName)+"&downUrl="+filePath); return ; } //打开新的页面 function openNewWindow1(action) { if (!action) return; var form = $("<form method='get'></form>").attr("id", "toPageForm_" + new Date().getTime()); $("body").append(form); form.attr("action", action).submit(); } //预览下载 function showFile(url, title, isDownload, jump) { if(!title || title === "") title = "文件"; console.log(url); let btnArry = ['已阅']; if(isDownload) { btnArry.push('下载'); } // 是否要跳转到别的页面 if(jump){ openNewWindow1(url); return; } layer.open({ type: 1 ,title: title ,area: ['1000px', '700px'] ,shade: 0.5 ,scrollbar: false ,maxmin: true ,cancel: function(index, layero){ layer.close(index) } ,offset: [ -($(window).height() * 0.02) ,($(window).width() * 0.2) ] ,content: '<iframe src="/res/js/pdfjs/pdfjs-2.4.456-es5-dist/web/viewer.html?file=' + url + '&v=' +new Date().getTime()+ '" style="width: 99%; height: 99%;"></iframe>' ,btn: btnArry ,yes: function(){ layer.closeAll(); } ,btn2: function(){ window.location.href = url; } ,zIndex: layer.zIndex //重点1 ,success: function(layero){ let btn = layero.find('.layui-layer-btn').find('.layui-layer-btn1'); btn.attr({class: 'layui-btn layui-btn-normal', style: 'background-color: #1E9FFF!important;', }); } }); }

三、后端代码 后端代码，这里就不赘述了，和之前的一样。之前的下载：pdf下载

四、需要导的jar包 文件：永久有效 链接：https://pan.baidu.com/s/1vXkyyEU-Rb0PB4Vmo4Rz3w 提取码：64b0 五、页面效果

简单的pdf文件预览、下载就完成了。