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文件预览、下载就完成了。