vue-pdf

vue-pdf参考：https://www.cnblogs.com/lodadssd/p/10297989.html
放大缩小参考：https://www.cnblogs.com/wushiq/p/13246674.html

• 安装：npm install --save vue-pdf
• 页面引入：import pdf from 'vue-pdf'
• 为方便手机端查看，增加了放大缩小功能，同时为了防止整个页面放大缩小，给pdf盒子pdfBox增加了overflow: scroll;属性

<template>
  <div class="projectDeclaration">
    <!-- 按页加载 -->
    <div class="pdf">
      <div class="pdf-tab">
        <div class="btn-def btn-pre" @click.stop="prePage">上一页</div>
        <div>{{ pageNum }}/{{ pageTotalNum }}</div>
        <div class="btn-def btn-next" @click.stop="nextPage">下一页</div>
      </div>
      <div class="pdf-tab">
        <div class="btn-def btn-pre" @click="scaleD">放大</div>
        <div class="btn-def btn-next" @click="scaleX">缩小</div>
      </div>
      <div class="pdfBox">
        <pdf
          ref="pdf"
          :src="projectDeclaration"
          :page="pageNum"
          :rotate="pageRotate"
          @progress="loadedRatio = $event"
          @page-loaded="pageLoaded($event)"
          @num-pages="pageTotalNum = $event"
          @error="pdfError($event)"
          @link-clicked="page = $event"
        >
        </pdf>
      </div>
    </div>
    <!-- 全部加载 -->
    <!-- <div class="pdf">
      <pdf ref="pdf" v-for="i in numPages" :key="i" :src="projectDeclaration" :page="i"></pdf>
    </div> -->
  </div>
</template>
<script>
import pdf from "vue-pdf";
export default {
  name: "ProjectDeclaration",
  components: {
    pdf,
  },
  props: {
    projectDeclaration: String,
  },
  data() {
    return {
      pdfUrl: "",
      pageNum: 1,
      pageTotalNum: 1,
      pageRotate: 0,
      // 加载进度
      loadedRatio: 0,
      curPageNum: 0,
      numPages: null, // pdf 总页数
      scale: 100,
    };
  },
  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;
    },
    pageLoaded(e) {
      this.curPageNum = e;
    },
    pdfError(error) {
      console.error(error);
    },
    // 全部加载
    // 计算pdf页码总数
    // getNumPages() {
    //   let loadingTask = pdf.createLoadingTask(this.projectDeclaration)
    //   loadingTask.promise.then(pdf => {
    //     this.numPages = pdf.numPages
    //   }).catch(err => {
    //     console.error('pdf 加载失败', err);
    //   })
    // },
    //放大
    scaleD() {
      this.scale += 10;
      this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
    },
    //缩小
    scaleX() {
      if (this.scale == 100) {
        return;
      }
      this.scale += -10;
      this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
    },
  },
};
</script>
<style lang="less" scoped >
.projectDeclaration {
  margin: 4%;
  font-size: 14px;
  .project_content {
    background: #e1e4e7;
    border-radius: 5px;
    margin-top: 10px;
    .project_ul {
      padding: 5px 0;
      .project_item {
        padding: 5px 15px 5px;
        font-size: 14px;
      }
    }
  }
  .pdf {
    .pdf-tab {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 40px;
      .btn-def {
        height: 20px;
      }
    }
    .pdfBox {
      width: 100%;
      height: 100%;
      overflow: scroll;
    }
  }
}
</style>

<template>
  <div class="projectDeclaration">
    <!-- <div>
      <span>{{ "项目申报书" }}</span>
    </div> -->
    <!-- <div class="project_content">
      <ul class="project_ul">
        <li class="project_item">
          <span class="project_item_title">{{ projectDeclaration }}</span>
        </li>
      </ul>
    </div> -->
    <!-- <div class="pdf">
      <pdf ref="pdf" :src="projectDeclaration"> </pdf>
    </div> -->
    <!-- 按页加载 -->
    <div class="pdf">
      <div class="pdf-tab">
        <div class="btn-def btn-pre" @click.stop="prePage">上一页</div>
        <div>{{ pageNum }}/{{ pageTotalNum }}</div>
        <div class="btn-def btn-next" @click.stop="nextPage">下一页</div>
      </div>
      <div class="pdf-tab">
        <div class="btn-def btn-pre" @click="scaleD">放大</div>
        <div class="btn-def btn-next" @click="scaleX">缩小</div>
      </div>
      <div class="pdfBox">
        <pdf
          ref="pdf"
          :src="projectDeclaration"
          :page="pageNum"
          :rotate="pageRotate"
          @progress="loadedRatio = $event"
          @page-loaded="pageLoaded($event)"
          @num-pages="pageTotalNum = $event"
          @error="pdfError($event)"
          @link-clicked="page = $event"
        >
        </pdf>
      </div>
    </div>
    <!-- 全部加载 -->
    <!-- <div class="pdf">
      <pdf ref="pdf" v-for="i in numPages" :key="i" :src="projectDeclaration" :page="i"></pdf>
    </div> -->
  </div>
</template>
<script>
import pdf from "vue-pdf";
export default {
  name: "ProjectDeclaration",
  components: {
    pdf,
  },
  props: {
    projectDeclaration: String,
  },
  data() {
    return {
      pdfUrl: "",
      pageNum: 1,
      pageTotalNum: 1,
      pageRotate: 0,
      // 加载进度
      loadedRatio: 0,
      curPageNum: 0,
      numPages: null, // pdf 总页数
      scale: 100,
    };
  },
  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;
    },
    pageLoaded(e) {
      this.curPageNum = e;
    },
    pdfError(error) {
      console.error(error);
    },
    // 全部加载
    // 计算pdf页码总数
    // getNumPages() {
    //   let loadingTask = pdf.createLoadingTask(this.projectDeclaration)
    //   loadingTask.promise.then(pdf => {
    //     this.numPages = pdf.numPages
    //   }).catch(err => {
    //     console.error('pdf 加载失败', err);
    //   })
    // },
    //放大
    scaleD() {
      this.scale += 10;
      this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
    },
    //缩小
    scaleX() {
      if (this.scale == 100) {
        return;
      }
      this.scale += -10;
      this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
    },
  },
};
</script>
<style lang="less" scoped >
.projectDeclaration {
  margin: 4%;
  font-size: 14px;
  .project_content {
    background: #eceef0;
    border-radius: 5px;
    margin-top: 10px;
    .project_ul {
      padding: 5px 0;
      .project_item {
        padding: 5px 15px 5px;
        font-size: 14px;
      }
    }
  }
  .pdf {
    .pdf-tab {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 40px;
      .btn-def {
        height: 20px;
      }
    }
    .pdfBox {
      width: 100%;
      height: 100%;
      overflow: scroll;
    }
  }
}
</style>