vue-pdf 实现pdf的预览

1. 安装vue-pdf插件

npm install --save vue-pdf
或
yarn add  vue-pdf

2. 引入 pad 文档地址

html代码：

<!--PDF 预览-->
    <el-dialog title=""
               :modal="false"
               :visible.sync="viewVisible"
               width="33%"  top="39px"
               center
               @close='closeDialog'>
      <div >
        <p class="pdf-preview-arrow">
          <span @click="changePdfPage(0)" class="turn" :class="{grey: currentPage===1}">上一页</span>
           {{currentPage}} / {{pageCount}}
          <span @click="changePdfPage(1)" class="turn" :class="{grey: currentPage===pageCount}">下一页</span>
        </p>
        <pdf
                :src="src"
                :page="currentPage"
                @num-pages="pageCount=$event"
                @page-loaded="currentPage=$event"
                @loaded="loadPdfHandler">
        </pdf>
      </div>
    </el-dialog>

js代码：

import pdf from 'vue-pdf';
export default {
  components: {
    pdf
  },
  data() {
    return {
      //PDF预览
      viewVisible: false,
      src: "/电站工程特性表.pdf",
      currentPage : 0,
      pageCount: 0,
    };
  },
  methods: {
    //PDF预览
    previewPDF(){
      this.src = pdf.createLoadingTask(this.src);
      this.viewVisible = true;
    },

    //关闭窗口初始化PDF页码
    closeDialog(){
      this.viewVisible = false;
      this.src = "/电站工程特性表.pdf"; 
    },

    loadPdfHandler () {
      this.currentPage = 1 // 加载的时候先加载第一页
    },
    changePdfPage (val) {
      if (val === 0 && this.currentPage > 1) {
        this.currentPage--;
      }
      if (val === 1 && this.currentPage < this.pageCount) {
        this.currentPage++;
      }
    },
  }
};

css 代码：

<style scoped lang="scss">
.pdf-preview-arrow{
    position: absolute;
    right: 75px;
    top: 8px;
    color: #004594;
    z-index: 3;
    span{
      cursor: pointer;
    }
  }
</style>
<style>
  .el-dialog__headerbtn{
    z-index: 3;
  }
</style>

实现效果：

预览文件时可能会出现以下错误

主要原因是：读取PDF文件时，路径不合法，导致读取不到文件； 在vue-cli3脚手架搭建的项目中，读取本地的PDF文件需要放到public文件夹中，在引用时，不能使用相对路径，且‘/’即表示public文件夹(需略去public)；

解决方案：pdf本地文件需放在public文件夹下，且使用绝对路径