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

1.1页面结构 html

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
      

        

          

            
上一页
            
下一页
            
顺时针
            
逆时针
          
          
{{ pageNum }}/{{ pageTotalNum }}
          
        
        
 //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;
    }
  }
}