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

  • 4
    点赞
  • 31
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 8
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Summer_DM

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值