Vue 项目使用PDF.js预览pdf文件

一、vue 文件

<template>
  <div class="pdf" style="height:100vh">
    <iframe
      width="100%"
      height="100%"
      scrolling="no"
      style="border:none"
      :src="src"
    ></iframe>
  </div>
</template>

<script>
export default {
  name: 'pdf',
  data () {
    return {
      viewerUrl: '/static/pdfjs/web/viewer.html',
      fileUrl: 'http://localhost/test.pdf'
      src: ''
    };
  },
  created () {
    this.src = `${this.viewerUrl}?file=${encodeURIComponent(this.fileUrl)}`;
  },
};
</script>

 二、pdf.js 文件

需要将 js 放到 public 中的 static 文件夹（具体根据自己的项目静态文件目录修改）

注意本地开发还需要设置路径别名

其他

1、pdf.js 下载地址