实现office文档在线预览之—pdfjs前端展示

GitHub下载并引入pdfjs

https://github.com/mozilla/pdf.js/

下载后如下：

放到前端工程public目录下，然后执行以下语句下载相关依赖:

nmp install

前端展示如下：

<Button
      type="success"
        size="small"
        @click="showOnlineBtn(row.documentName)"
        class="table-btn">
在线预览</Button>

<Drawer title="在线预览" v-model="showOnline" width="30">
      <div style="background: #eee; padding: 20px; height: 100%">
          <iframe class="prism-player" :src="onlineFileUrl" width="100%" height="100%"></iframe>
      </div>
</Drawer>

获取请求路径如下：

let url = '文档所在路径';
this.onlineFileUrl = `/pdfjs-2.6.347-es5-dist/web/viewer.html?file=${encodeURIComponent(url)}`
this.showOnline = true;