vue-pdf使用

vue-pdf的使用

1. 安装

安装命令：

npm install --save vue-pdf@4.2.0

安装完之后报错，pdfjs-dist未安装，安装了 ，pdfjs-dist安装的时候，未指定版本，还是报错，最后指定@2.6.347，一定要先卸载前面安装的，再重新安装

npm install pdfjs-dist@2.6.347

2. 官网列出的一些方法和属性

• :src，用于绑定文件的URL
• :page，用于展示第几页pdf，如果一个页面只渲染一页这个就会用到，翻页就是改变这个绑定的值
• :rotate，旋转的角度，不常用
• @password，当文档有密码时使用，不常用
• @process，文档加载的进度，不常用
• @loaded，当文档第一次加载时触发，不常用
• @page-loaded，当页面加载时使用，当pdf翻页时会使用
• @num-pages，pdf文件的总页数
• @error，文件加载错误时触发
• @lin-clicked，点击内部链接时触发，不常用
• createLoadingTask，最常用的方法，加载pdf时使用
• print，打印pdf的方法

3. vue-pdf的使用

1. pdf单页显示

<template>
    <div>
      <pdf 
        ref="pdf"
        :src="url"
      >
      </pdf>
    </div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
  components:{
      pdf
  },
  data(){
      return {
          url:"pdf地址",
      }
  }
</script>

2. pdf多页显示

<template>
  <div>
    <pdf
      ref="pdf"
      v-for="i in numPages"
      :key="i"
      :src="url"
      :page="i"
    ></pdf>
  </div>
</template>
<script>
import pdf from "vue-pdf";
export default {
  components: {
    pdf,
  },
  data() {
    return {
      url: "pdf地址",
      numPages: null,
    };
  },
  created() {
    this.getNumPages();
  },
  methods: {
    getNumPages(url) {
      let loadingTask = pdf.createLoadingTask(this.url);
      loadingTask.promise
        .then((pdf) => {
          this.numPages = pdf.numPages;
        })
        .catch((err) => {
          console.error("pdf 加载失败", err);
        });
    },
  },
};
</script>

3. pdf分页显示

<template>
  <div>
    <button @click="prePage">上一页</button>
    <button @click="nextPage">下一页</button>
    <div style="margintop: 10px; color: #409eff">
      {{ pageNum }} / {{ pageTotalNum }}
    </div>
    <pdf
      :page="pageNum"
      :src="url"
      @progress="loadedRatio = $event"
      @num-pages="pageTotalNum = $event"
    ></pdf>
  </div>
</template>
<script>
import pdf from "vue-pdf";
export default {
  components: {
    pdf,
  },
  data() {
    return {
      url: "pdf地址",
      pageNum: 1,
      pageTotalNum: 1, //总页数
      loadedRatio: 0, //当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了
    };
  },
  created() {},
  methods: {
    // 上一页
    prePage() {
      let page = this.pageNum;
      page = page > 1 ? page - 1 : this.pageTotalNum;
      this.pageNum = page;
    },

    // 下一页
    nextPage() {
      let page = this.pageNum;
      page = page < this.pageTotalNum ? page + 1 : 1;
      this.pageNum = page;
    },
  },
};
</script>

4.读取本地pdf文件

把文件放在public文件夹下，不支持相对路径

<pdf
    :page="pageNum"
    src="1.pdf"
    @progress="loadedRatio = $event"
    @num-pages="pageTotalNum = $event"
    @error="errorHandler"
></pdf>