遇到的需求，需要实现IE自带浏览器也可以预览。以下是自己踩过无数坑总结出来的。

1、引入pdf.js包，由于会出现跨域问题。在viewer.js里注释掉以下代码，注释viewer.js 的1565行即可，如下图所示：

2、由于后端是传输文件流格式给我，我采取window.open()进行预览操作。

首先为获取文件流格式的接口，里面包含参数（id）,后端为get,如下：

http://localhost:8080/super/attachment/preview.api?id=22447

其中http://localhost:8080为当前调用后台地址，不可写死，设置相对路径，于是采取以下截取方式，分为正式环境与本地环境（方便自测）。

handlePreview(row){
 var basePreviewUrl = window.location.protocol + '//' + window.location.host +'/super/attachment/preview.api?id='+ row.id//正式环境截取方式
 //本地测试预览截取方式： var basePreviewUrl =  process.env.baseUrl +'/super/attachment/preview.api?id='+ row.id
     console.log(basePreviewUrl)
   window.open('/static/pdf/web/viewer.html?file='+encodeURIComponent(basePreviewUrl))

}

以上就可以实现预览了，但是这种方式不支持图片格式预览，于是进行判断，若后缀为图片格式，则采用element的自带组件进行预览。

<el-dialog :close-on-click-modal="false" :visible.sync="pdfShow" title="预览图片">  
    <el-image style="width: 100%; height: 100%" :fit="fits" v-for="src in imgs" :src="src.url" :key="src.title"></el-image>
    </el-dialog>

  data() {
    return {
      fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
       imgs: [
      ], 
      pdfShow:false,
    }
  },

    handlePreview(index, row) {
      this.imgs = [] 
       var isPreview = ''
       let imgList = ['jpg', 'JPG', 'gif', 'GIF', 'png', 'PNG']
          for (let i = 0; i < imgList.length; i++) {
            if (row.name.indexOf(imgList[i]) > -1) {
              isPreview = true;
            }
          }
          if (isPreview) {//若为图片格式，则采用另一种方式
            this.pdfShow = true
            // this.previewUrl = process.env.baseUrl +'supervise/attachment/open.api?id='+ row.id
            this.previewUrl = window.location.protocol + '//' + window.location.host +'/super/attachment/preview.api?id='+ row.id,
            console.log(this.previewUrl)
            this.imgs.push({
              url: this.previewUrl,
              title: row.name,
              preview: "1"
            })
          } else {//其他格式，采用pdf.js
        localStorage.setItem("filename", row.name);//将文件名 放入本地存储，这个是预览时设置文档名字，后面会告诉大家
        var basePreviewUrl = window.location.protocol + '//' + window.location.host +'/super/attachment/preview.api?id='+ row.id
        // var basePreviewUrl =  process.env.baseUrl +'supervise/attachment/open.api?id='+ row.id
        console.log(basePreviewUrl)
        window.open('/static/pdf/web/viewer.html?file='+encodeURIComponent(basePreviewUrl))
          }
     
    },

3、若文档预览时，未显示正确名字，我们需要在pdf.js的文件包中有一个viewer.js的文件，在viewer.js中找到设置标题文件名的方法（setTitleUsingUrl）,直接将以下代码替换过去就好。后面发现部署后IE不兼容这种文档名字方法，IE预览就会出现一直不显示的情况。于是我换了另一种方式进行替换预览文件名

setTitleUsingUrl(url = ""){
    var url = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
    this.url = url;
    var TITLE = localStorage.getItem("filename");
    try {
        var titleTmp = (TITLE == '' || TITLE == undefined) ? (decodeURIComponent(pdfjsLib.getFilenameFromUrl(url)) || url) : TITLE;
        this.setTitle(titleTmp);
    } catch (e) {
        this.setTitle(url);
    }
},

4、以下为IE兼容的预览文档名字方法，在viwer.js里加入getQueryParams方法,再找到getPDFFileNameFromURL（）进行修改

//获取地址栏参数
function getQueryParams(key){
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
          var pair = vars[i].split("=");
          if(pair[0] == key){
            return pair[1];
          }
       }
       return(false);
      },

 

这样就实现预览各种文档和图片了。