最近有这样一个需求，需要在线预览pdf文件，于是就去找这方面的插件。最后筛选了一下，选择了pdf.js这个插件。
我们先看一下pdf.js定义：
pdf.js可以实现在html下直接浏览pdf文档，是一款开源的pdf文档读取解析插件
pdf.js主要包含两个库文件，一个pdf.js和一个pdf.worker.js，，一个负责API解析，一个负责核心解析
pdf.js本质上是用canvas渲染的，pdf文件经过解析之后，在canvas画布上渲染出来，实现预览（看了一下pdf.js的源码，先是用SVG生成图形，然后在canvas画布上展示出来）
那么怎么使用它呢？如下：
(方法都是通用的，借鉴了别人写的流程)
pdf.js的使用方式：

摘自（官网的例子）http://mozilla.github.io/pdf.js/examples/

1、页面引入pdf.js。

2、使用PDFJS.getDocument(‘helloworld.pdf’)方式加载要打开的PDF文件。

3、通过PDFJS.getDocument(‘helloworld.pdf’).then(function(pdf){// you can now use pdf here});then方式处理后续的方法

4、pdf.getPage(1).then(function(page){// you can now use page here});加载PDF的第一页

5、通过h5的canvas进行展示。

 // html 部分
 <div class="pdf">
    <div class="pdf-show" id="pdf-show">
    </div>
 </div>

// 展示pdf文件 vue中写的代码 js部分
this.showPdf(result.data.url, 'pdf-show');
pdfShow(url, id, type) {
      // 先定义一个放置阅览pdf文件的dom元素（页面上定义好的）
      let cvsItem = document.getElementById(id);
      cvsItem.innerHTML = "";
      
      const loading = this.$loading({
        lock: true,
        text: type || '加载中...',
        target: cvsItem,
        spinner: 'loader',
        background: 'rgba(0, 0, 0, 0.5)',
        customClass: 'loadings'
      });
      // url.replace("http:", 'https:') 这一步是因为后台返回的url是http开头的，但是用url去请求的时候要更换成https，这个是我做的项目的原因
      PDFJS.getDocument(url.replace("http:", 'https:')).then((pafObj) => {
        cvsItem.innerHTML = "";
        this.isloading = true,
        this.pafDoc = pafObj;
        let totalNum = this.pafDoc.numPages;
        loading.close();
        // debugger;
        for (let i = 1; i <= totalNum; i++) {
          let id = 'canvas' + i;
          let cvsNode = document.createElement('canvas');
          cvsNode.setAttribute('id', id);
          cvsNode.setAttribute('class', 'canvas-item');
          cvsWraper.appendChild(cvsNode);
          this.renderPage(i);
          if (totalNum === i) {
            this.isloading = false;
          }
        }
      }).catch(err => {
        this.$message({ message: "PDF加载失败", type: 'error' });
      })
    },
    renderPage(num) {
      // 进行渲染
      let id = 'canvas' + num;
      let canvas = document.getElementById(id);
      let ctx = canvas.getContext('2d'); // canvas的知识
      this.pageRendering = true;
      this.pafDoc.getPage(num).then(page => {
        let viewport = page.getViewport(this.scale);
        canvas.height = viewport.height; 
        canvas.width = viewport.width; 
        let renderContext = {
          canvasContext: ctx,
          viewport: viewport
        };
        page.render(renderContext);
      })
    }
  },