@vue/cli 项目使用 pdf.js 实现 pdf 文件在线预览

最近用 vue 做的一个移动端项目，在某些浏览器中无法直接打开预览 pdf 文件，所以选择了使用 pdf.js 去实现

实现步骤如下：

1、首先去 pdf.js 官网下载，地址：https://mozilla.github.io/pdf.js

2、解压下载的zip文件，将解压后的整个目录（pdfjs-2.3.200-dist）拷贝到项目的 public 目录下（放在 public 目录下的文件不会被 webpack 处理）

3、使用 pdf.js 自带的预览界面 viewer.html 预览，可以在 viewer.css 文件对 viewer.html 做一些样式调整。在需要使用的地方直接一个 a 标签 href 链接即可，a 标签的 href 链接形式为：/pdfjs-2.3.200-dist/web/viewer.html?file=pdf文件地址

<a href="/pdfjs-2.3.200-dist/web/viewer.html?file=http://0.0.0.0:1112/file/demo.pdf">
  预览文件
</a>

4、在浏览器中打开文件后如果报错 file origin does not match viewer's ，只需要在 viewer.js 文件中找到 throw new Error('file origin does not match viewer\'s'); 这一行，并注释掉即可

也可以通过 vue 路由组件实现预览，具体实现步骤如下：

1、在项目 views 文件夹下新建一个组件用于 pdf 文件预览，比如我这里的 views/pdf-preview/index.vue

2、index.vue 文件内容如下，主要是通过 iframe 实现：

<template>
  <iframe :src="$route.query.url" class="iframe"></iframe>
</template>

<style>
.iframe {
  width: 100%;
  height: 100%;
  border: 0;
  overflow: hidden;
  box-sizing: border-box;
}
</style>

3、定义路由

  {
    path: '/pdf-preview',
    component: () => import('../views/pdf-preview/index')
  }

4、路由跳转

this.$router.push({
  path: "pdf-preview",
  query: {
    url: "/pdfjs-2.3.200-dist/web/viewer.html?file=http://0.0.0.0:1112/file/demo.pdf"
  }
});