vue预览PDF文件的方法

1.使用iframe标签预览PDF文件

1.1页面结构 html

 <iframe
          :src="fileUrl"
          id="iframeBox"
          ref="iframeRef"
          frameborder="0"
          style="width: 100%; height: 800px"
        ></iframe>

1.2 js代码

export default {
  data() {
    return {
      fileUrl: "test.pdf", //文件路径
    };
  }
};

2.使用vue-pdf插件预览PDF文件

2.1 安装依赖

npm install vue-pdf@4.2.0 
建议安装指定版本依赖会解决控制台报错

2.2 注册并引入组件

import pdf from "vue-pdf";
components: {
    pdf,
  },

2.3 使用组件展示PDF文件

 //html
      <div
        class="pdf-box"
      >
        <div class="pdf-tab">
          <div class="pdf-tab-button">
            <div class="btn-def btn-pre" @click.stop="prePage">上一页</div>
            <div class="btn-def btn-next" @click.stop="nextPage">下一页</div>
            <div class="btn-def" @click.stop="clock">顺时针</div>
            <div class="btn-def" @click.stop="counterClock">逆时针</div>
          </div>
          <div class="page-size">{{ pageNum }}/{{ pageTotalNum }}</div>
          <pdf
            ref="pdf"
            class="pdf-preview"
            :src="fileUrl"
            :page="pageNum"
            :rotate="pageRotate"
            :style="{ height: customHeight + 'px' }"
            @num-pages="pageTotalNum = $event"
            @link-clicked="page = $event"
          ></pdf>
        </div>
        
 //js
  export default {
  data() {
    return {
      fileUrl: "", //文件路径
      pageNum: 1,
      pageTotalNum: 1,
      pageRotate: 0,
      customHeight: 400, // 自定义的PDF预览框高度
    };
  },
  components: {
    pdf,
  },
  methods: {
    //上一页
    prePage() {
      var p = this.pageNum;
      p = p > 1 ? p - 1 : this.pageTotalNum;
      this.pageNum = p;
    },
    // 下一页
    nextPage() {
      var p = this.pageNum;
      p = p < this.pageTotalNum ? p + 1 : 1;
      this.pageNum = p;
    },
    //顺时针
    clock() {
      this.pageRotate += 90;
    },
    //逆时针
    counterClock() {
      this.pageRotate -= 90;
    }  
  },
};
//css
.pdf-box {
  width: 100%;
  height: 800px;
  .pdf-tab {
    width: 100%;
    height: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .pdf-tab-button {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .btn-def {
        width: 98px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: #fff;
        background-color: #409eff;
        border-color: #409eff;
        border-radius: 5px;
        font-size: 18px;
      }
    }

    .page-size {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
    }
  }
}