vue/cli3.0中使用pdf.js的案例教程

pdf.js下载

浏览器中直接打开预览 pdf 文件

安装

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

使用 pdf.js 自带的预览界面 viewer.html 预览，可以在 viewer.css 文件对 viewer.html 做一些样式调整。

在需要使用的地方直接一个 a 标签 href 链接即可，a 标签的 href 链接形式为：/pdf-dist/web/viewer.html?file=pdf文件地址

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

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

 

通过 vue 路由组件实现预览

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

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

<template>
  <div class="box">
    <a href="/">返回首页</a>
    <iframe :src="$route.query.url" class="iframe"></iframe>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$router.push({
      path: "download",
      query: {
        url:
          "/pdf-dist/web/viewer.html?file=/xf.pdf"
      }
    });
  }
};
</script>

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