后端返回url实现预览和下载文件（目前只支持图片和pdf文档）

最近新接触的一个node+express的项目，要做一个在线预览和下载的功能。费了好大的劲，总算是写的差不多了，下面总结一下：

一：首先是通过url预览(以后可能还会让预览word、xlsx文件，这种方法就不能用了，还得另寻他法)

1. 这次并没有调取接口，是在列表的操作列有一个预览按钮。然后后端将文件的url、type、id都在列表的每条数据里返给了我们
2. 点击预览的时候需要弹框展示，这里用到的是layui的模态框
3. 我们拿到文件url，在弹框完成时，将url赋值给弹框里的元素。(我们项目中是要预览N个文件的，所以弹框里用的轮播组件)
4. 赋值时判断文件类型，如果是图片：赋值给img的src；如果是pdf：赋值给object的data
5. 只要把url赋上值，只要url能用，不出意外就可以预览了(涉及到样式什么的可以自己调试)

二：其次是使用预览的url实现下载功能。(亲测图片和pdf可行)

1. 因为这个url是预览用的，所以使用普通的a链接、iframe等都不行。
2. 拿到路径后可以先在前端转一下，转成文件流，然后再使用a链接下载

三：贴图

四：贴代码（这是我自己项目里的代码，大家看上面的思路就可）

    

        

			
        
    


// 文件预览
    function filePreview(data) {  // data是列表数据
        // 点击预览按钮
        $('.previewApt').on('click',function(){
            var qInfoIDFlag = $(this).data('flie');
            var attachmentArr = [];
            data.forEach(function(item){
                if(item.QInfoID == qInfoIDFlag){
                    attachmentArr = item.Attachment;
                    return;
                }
            })
            $('#test1 .previewCarousel').empty(); // 销毁预览容器里的所有元素
            var addOpenedit = layer.open({
                type: 1,
                title: "预览",
                closeBtn: 1,
                skin: "pop-set",
                area: ["1000px","700px"],
                maxHeight:"800px",
                moveType: 1,
                resize: false,
                isOutAnim: true,
                scrollbar: true,
                anim: 1,
                content: $('#previewBox').html(),
                success: function (layero, index) {
                    var children = '',content = '';
                    attachmentArr.forEach(function(item){
                        if(item.FileSuffix == 'pdf'){
                            content = '
'+item.FileName+'.'+item.FileSuffix+'点击下载...
'
                        }else{
                            content = '
'+item.FileName+'.'+item.FileSuffix+'点击下载...
'
                        }
                        children += '
'+content+'
';
                    })
                    $('#test1 .previewCarousel').append(children);
                    //建造实例
                    carousel.render({
                        elem: $(layero).find('#test1')
                        ,width: '100%' //设置容器宽度
                        ,arrow: 'always' //始终显示箭头
                        ,height:'620px'
                        ,autoplay:false
                        ,anim: 'fade' //切换动画方式
                    });
                    $(layero).find('.downloadFlie').on('click',function(){
                        var flieurl = $(this).data('flieurl');
                        var fliename = $(this).data('fliename');
                        getFileAndDownload(fliename,flieurl);
                    })
                    // console.log(layero, index);
                    $(layero).find('.returnBtn').on('click', function () {
                        layer.close(index);
                    })
                 	$(layero).find('.register-sub a').attr('href','javascript:void(0)').on('click', function () {
                        layer.close(index);
                    })

                    // 下载方法
                    function getFileAndDownload(fileName, url) {
                        var x = new XMLHttpRequest();
                        x.open("GET", url, true);
                        x.responseType = 'blob';
                        x.onload = function (e) {
                            var blob = x.response;
                            if ('msSaveOrOpenBlob' in navigator) {//IE导出
                                window.navigator.msSaveOrOpenBlob(blob, fileName);
                            }
                            else {
                                var a = document.createElement('a');
                                a.download = fileName;
                                a.href = URL.createObjectURL(blob);
                                $("body").append(a);
                                a.click();
                                $(a).remove();
                            }
                        };
                        x.send();
                    }
                }
            });

        })
    }