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

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

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

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

一、html代码

<div class="grey-card jus-c ptb30 flex">
        
<img src="/res/images/file.png">
            <div class="mt5 fs16">信托合同div>
        div>
        
<img src="/res/images/file.png">
            <div class="mt5 fs16">信托计划说明书div>
        div>
        
<img src="/res/images/file.png">
            <div class="mt5 fs16">认购风险说明书div>
        div>
        
<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 = $("
").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: ''
            ,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文件预览、下载就完成了。