web项目使用bootstrap fileinput插件无法在IE预览PDF文件

项目场景：

web项目需要上传图片，包括png，jpeg，及tiff还有pdf。
使用的是bootstrap fileinput 插件；

---

问题描述：

选择pdf文件之后或者上传之后回显，在火狐，谷歌展示正常，但是在IE浏览器中展示为空白。

---

原因分析：

IE需要安装adobe插件？？？
确实，我在安装了adobe之后，pdf能够显示，但是还是有一些问题：

1. 在选择图片的时候，会提示我权限不够，（选择照片的回显有问题，上传之后能够回显）搜索了半天还是不能解决该问题；
   
   

2. 上传之后，缩略图预览没问题，但是放大会有问题。
   缩略图：
   
   点击放大：
   
   所以最后还是放弃了去设置IE，直接从代码上解决问题。

---

解决方案：

插件pdf.js。下载链接

pdf.js使用起来特别简单，下载相关文件，重点是pdf.js还有一个viewer.html。
在自己的html代码中引入pdf.js即可。其他问题小伙伴可以自行百度，我在这里就不详细介绍了。

那么bootstrap fileinput插件怎么把pdf.js嵌进来呢。

首先说一下，我们的项目是上传文件到minio文件服务器的。
其次，fileinput处理pdf是分两种情况的：
1.在选择照片的时候之后，未上传之前，预览预加载的图片；
2.上传之后，预览minio文件服务器文件；
两种情况都可在fileinput.js中看到是怎么预览的。下边也会提到。

接下来给大家展示我的才艺了：
其实挺简单的。
fileinput插件提供了previewTemplates对象，重写该对象对pdf类型的文件处理方式就好了。
1.处理选择照片pdf的预览；

function initFileInput(initialPreview,initialPreviewConfig) {
$('#txt_file').fileinput({
            language: 'zh', //设置语言
            uploadUrl: "", //上传的地址
            //deleteUrl: '',//批量删除的url
            //deleteExtraData: {},//删除的参数
            allowedFileExtensions: ['jpg', 'tiff', 'tif','gif', 'png','pdf'],//接收的文件后缀
            uploadExtraData:{"recid": recid},//参数
            dropZoneEnabled: true,//是否显示拖拽区域
            dropZoneTitle: '无原文<br/>可以将图片拖放到这里 …<br/>支持多文件上传',
            uploadAsync: true, //默认异步上传
            showUpload: false, //是否显示上传按钮
            showRemove : false, //显示移除按钮
            showPreview : true, //是否显示预览
            purifyHtml: true, // 这是默认情况下为预览净化HTML数据
            showCaption: true,//是否显示标题
            overwriteInitial: false, //不覆盖已存在的图片
            browseClass: "btn btn-primary", //按钮样式
            //dropZoneEnabled: true,//是否显示拖拽区域
            //minImageWidth: 100, //图片的最小宽度
            //minImageHeight: 100,//图片的最小高度
            //maxImageWidth: 1000,//图片的最大宽度
            //maxImageHeight: 1000,//图片的最大高度
            //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
            //minFileCount: 0,
            //maxFileCount: 10, //表示允许同时上传的最大文件个数
            //enctype: 'multipart/form-data',
            //validateInitialCount:true,
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
            //msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
            //initialPreviewFileType: 'image', // `image`是默认值，可以在下面的配置中覆盖
            initialPreview: initialPreview,
            initialPreviewConfig: initialPreviewConfig,
            initialPreviewAsData: true, // 特别重要
            previewTemplates:{
				pdf: '<div class="file-preview-frame{frameClass}" id="{previewId}" data-fileindex="{fileindex}" data-template="{template}">\n' +
        			 '   <div class="kv-file-content">' +
        			 //'       <embed class="kv-preview-data" src="{data}" width="{width}" height="{height}" type="application/pdf">\n',
        			 '		   <iframe src="/modules/pdfPreView/generic/web/viewer.html?file={data}" width="100%" height="100%" style="border: 0;overflow: hidden;" scrolling="no"></iframe>'+
        			 '   </div>\n' +
        			 '   {footer}\n' +
        			 '</div>',
			}
            fileActionSettings:{
				showRemove: false,
                showUpload: false,
                showDownload: false,
                showZoom: true,
            	showDrag: false
			},
            layoutTemplates:{
            	actionUpload:'',//去除上传预览缩略图中的上传图片
                //actionZoom:'',   //去除上传预览缩略图中的查看详情预览的缩略图标
                actionDownload:'', //去除上传预览缩略图中的下载图标
                actionDelete:'', //去除上传预览的缩略图中的删除图标
                actionDrag:''//去除缩略图中的拖拽图标
				},//对象用于渲染布局的每个部分的模板配置。您可以设置以下模板来控制窗口小部件布局.eg:去除上传图标
    }).on('filepreupload', function(event, data, previewId, index) {     //上传中
            var form = data.form, files = data.files, extra = data.extra,
                response = data.response, reader = data.reader;
            console.log('文件正在上传');
        }).on("fileuploaded", function (event, data, previewId, index) {    //一个文件上传成功
            var response = data.response;
            //alert(response.filePath);
            console.log('文件上传成功！'+data.id);
            //在上传成功事件中将服务器返回的所需数据，添加到该文件对应的div中
            $('#' + previewId).attr('fileid', response.id);
            //$('#' + previewId).attr('deletePath', response.deletePath);

        }).on('fileerror', function(event, data, msg) {  //一个文件上传失败
            console.log('文件上传失败！'+data.id);
        }).on('filesuccessremove', function (event, previewId, extra) {//单个文件删除
            //在移除事件里取出所需数据，并执行相应的删除指令
            //delete(($('#' + previewId).attr('fileid'));

        })
        }

重点看

2. 处理回显文件服务器的pdf回显；

从数据库获取到图片的路径，然后封装成对象，放到初始化fileinput的对应函数中去。

function getFileData(){
       	$.ajax({
            url: '',//访问后台的url
            data: {
                //参数
            },
            type: 'post',
            dataType: 'json',
            success: function (data) {
                //封装回显的图片
                if("1"==data.flag){
                    if(data.data){
                        //获取照片的路径封装至数组中
                        var initialPreview = [];
                        var initialPreviewConfig = [];
                        for(var i=0;i<data.data.length;i++){
                            if(data.data[i].affixSuffix.indexOf('pdf')>-1){
                                //'<img src="http://lorempixel.com/800/460/nature/1" class="kv-preview-data krajee-init-preview file-preview-image">'
                                initialPreview.push('<iframe src="/modules/pdfPreView/generic/web/viewer.html?file='+文件在服务器的访问路径+'" width="100%" height="100%" style="border: 0;overflow: hidden;" scrolling="no"></iframe>');
                                initialPreviewConfig.push({
                                    previewAsData: false,
                                    type:'pdf',//文件类型（后缀）
                                    caption:data.data[i].affixName,/*文件标题*/
                                    size:data.data[i].affixSize,
                                    url:'',/* 预览中的删除按钮的url*/
                                    key:data.data[i].id,/* 删除时ajax携带的参数*/
                                    downloadUrl: '',   //这个是显示下载按钮的关键，如果没有此属性，下载按钮是不会显示的。
                                    extra: {ids: data.data[i].id}  /*删除文件携带的参数*/
                                });
                            }
                        }
                        initFileInput(initialPreview,initialPreviewConfig);
                    }else{
                        initFileInput();
                    }
                }

            },
            error: function (err) {
                layer.msg('获取档案照片失败，请刷新重试！',{icon: 2,time:1000});

            }
        });
    }

重点看：

至于为什么设置成false，大家看下bootstrap fileinput 帮助文档的高级预览。

这样设置之后，之前的问题就能够完美解决了。至于成功的截图我就不贴了，自己去感受吧。

刚开始写文档，有点糙，大家有问题随时问我就好了。希望能对大家有用。