admin管理员组

文章数量:1648972

1.安装

npm install --save vue-pdf

2.在需要用的页面引入 

import pdf from 'vue-pdf'

 3.带有放大、缩小、换页功能的用例

<template>
  <div >
    <div >
      <pdf
      :src="src"
      :page="currentPage"
      @progress="loadedRatio = $event"
      @loaded="loadPdfHandler"
      @num-pages="pageCount=$event"
      @page-loaded="currentPage=$event"
      ref="wrapper"
      ></pdf>
    </div>
    <ul >
      <li : @touchstart="idx=0" @touchend="idx=-1" @click="scaleD">
        <p >放大</p>
      </li>
      <li : @touchstart="idx=1" @touchend="idx=-1" @click="scaleX">
        <p >缩小</p>
      </li>
      <li : @touchstart="idx=2" @touchend="idx=-1" @click="changePdfPage(0)">
        <p >上一页</p>
      </li>
      <li : @touchstart="idx=3" @touchend="idx=-1" @click="changePdfPage(1)">
        <p >下一页</p>
      </li>
      <li>
        <p>当前第{
  { currentPage }}页/共{
  { pageCount }}页</p>
      </li>
    </ul>
  </div>

</template>

<script>
import pdf from 'vue-pdf'
export default {
  data() {
    return {
      currentPage: 1, // 当前页码
      pageCount: 0, // 总页码
      scale: 100,
      idx: -1,
      loadedRatio: 0,
      src: 'https://dakaname.oss-cn-hangzhou.aliyuncs/file/2018-12-28/1546003237411.pdf'
    }
  },
  created() {
    this.src = pdf.createLoadingTask(this.src) // 处理一下跨域
  },
  components: {
    pdf

本文标签： 缩放功能文件换页vue

版权声明：本文标题：vue使用vue-pdf预览pdf文件，带有换页、缩放、选择功能 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1729505576a1203587.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。