manHourHousekeeper/fhKeeper/formulahousekeeper/octopus/src/views/pdf/pdfview.vue

<template>
    <div v-loading="loading"
    element-loading-text="加载中，请稍后..."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
    
    <pdf ref="pdf"
      :src="src" 
      v-for="i in pageCount" 
      :key="i"
      :page="i"
      > 
      
    </pdf>
    <!-- <div class="toolBar" style="display:flex;" justify="center">
      <van-col span="8" style="text-align: center;"><a @click="changePdfPage(0)" :disabled="currentPage==1">上一页</a></van-col>
      <van-col span="8" style="text-align: center;"><span>{{currentPage}} / {{pageCount}}</span></van-col>
      <van-col span="8" style="text-align: center;"><a @click="changePdfPage(1)" :disabled="currentPage==pageCount">下一页</a></van-col>
    </div> -->
  </div>
</template>

<script>
import pdf from 'vue-pdf'
var headers = {
    'Authorization': 'Bearer SOME_TOKEN',
    'x-ipp-device-uuid': 'SOME_UUID',
    'x-ipp-client': 'SOME_ID',
    'x-ipp-client-version': 'SOME_VERSION'
};

// var loadingTask = pdf.createLoadingTask({
//     url:'/static/upload/222.pdf',
//     httpHeaders:headers
// });
var loadingTask;
  export default {
    components: {pdf},
    data () {
      return {
        loading:true,
        serverFname:null,
        fileName:null,
        file:null,
        currentPage: 1, // pdf文件页码
        pageCount: 1, // pdf文件总页数
        fileType: 'pdf', // 文件类型　　　　　
        src: null, //'/upload/1d43c8c07f5944a9a1dd9e5e0197aa00.pdf', // pdf文件地址，
      }
    },　　
    created(){
      
　　},
    methods: {
      handleError(e) {
        this.$toast.clear();
        this.$toast.fail('加载失败:'+e);

      },
      // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
      changePdfPage (val) {
        // console.log(val)
        if (val === 0 && this.currentPage > 1) {
          this.currentPage--
          // console.log(this.currentPage)
        }
        if (val === 1 && this.currentPage < this.pageCount) {
          this.currentPage++
          // console.log(this.currentPage)
        }
      },
      // pdf加载时
      loadPdfHandler (e) {
        this.currentPage = 1 // 加载的时候先加载第一页
      },
      back() {
         history.back();
      },
    },
    mounted(){
      console.log(sessionStorage.getItem("serverFname"));
      loadingTask = pdf.createLoadingTask({
          url:sessionStorage.getItem("serverFname"),
          httpHeaders:headers
      });
      this.src = loadingTask;
      this.serverFname = sessionStorage.getItem("serverFname");
      this.fileName = sessionStorage.getItem("fileName");
      loadingTask.promise.then(pdf => {
        this.pageCount = pdf.numPages;
        console.log('pageCount======'+this.pageCount);
        this.loading = false;
      }).catch(err => {
        console.error('pdf 加载失败', err);
        this.loading = false;
        this.$message({
                            message: "加载失败",
                            type: 'error'
                        });
      })
    }
  }
</script>

<style>
.toolBar {
    position:fixed; bottom:0;left:0; width:100%;
    padding:10px;
    background:#ddd;
}
.control_bar {
  float:right;
  position:fixed;
  bottom:80px;
  right:0px;
  margin-right:3px; 
  background:#ddd;
  opacity:0.4;
  filter:alpha(opacity=40); 
  border-radius:3px;
  padding:3px;
}
</style>