运用vue项目开发遇到预览PDF的功能并要兼容IE11，最开始运用vue-pdf这个插件，后来发现在IE11浏览器不支持。所以使用了pdfjs-dist，下边上代码。

// 安装pdfjs-dist 
npm install pdfjs-dist@2.0.943 --save //这里安装这个版本是最为合适的 其他版本可能会出现一些问题

// 安装完成后一定要记得重启项目 


// 视图代码 css样式自行去写
  <div>
    <div>
       <span>{{ "pdf" }}</span>
       <span>
          <img src="@/assets/shape_left.png" alt="" @click="reduceCurrentPage" />  
          <!-- 这是个上一页图标 --> 
          {{ current }}/{{ total }} 
          <img src="@/assets/shape_right.png" alt="" @click="addCurrentPage" />
          <!-- 这是个下一页图标 --> 
        </span>
     </div>
     <canvas id="the-canvas"></canvas> <!-- 展示pdf的视图容器 -->
  </div>

// 接下来在需要的地方引入插件
// 在script中进行引入
const PDF = require("pdfjs-dist")
import pdfjsWorker from "pdfjs-dist/build/pdf.worker.entry"
PDF.GlobalWorkerOptions.workerSrc = pdfjsWorker


// 然后进行在data中定义一些变量 

data(){
 return {
   total: 0, // 拿到的pdf总页数
   current: 1, // 拿到的pdf当前页数
   pdfUrld: "", // pdf文件路径变量
 }
}

//pdf渲染函数
    // pageSize为要展示的页数，自己定义上一页下一页函数， url是pdf文件的路径
    init(pageSize, url) {
      const padUrlsd = url || this.pdfUrld
      var loadingTask = padUrlsd
      PDF.getDocument(loadingTask).then((pdf) => {
        this.total = pdf._pdfInfo.numPages
        pdf.getPage(pageSize).then(function(page) {
          var viewport = page.getViewport(1.5)
          var canvas = document.getElementById("the-canvas")
          var context = canvas.getContext("2d")
          canvas.height = viewport.height
          canvas.width = viewport.width
          var renderContext = {
            canvasContext: context,
            viewport: viewport
          }
          page.render(renderContext)
        })
      })
    }

// 初始话的时候在created生命周期只需要拿到pdf文件路径然后调用 this.init(1,"拿到的文件路径") 就可以

注意 IE11是不支持baseurl这种形式的文件路径的，如果后端给你的文件路径是baseurl形式的 可以去看我的其他文章 有把baseurl转换为blob路径的方法，希望这篇文章能对各位有所帮助