zoukankan      html  css  js  c++  java
  • 在移动端通过vue-pdf实现预览pdf

    应用场景:比赛报表pdf文件需要在线预览跟下载,发现直接使用window.open(url, '_blank'),在pc端是可以实现预览,但是在移动端是直接通过打开浏览器进行下载再预览,经查资料发现可以使用vue-pdf组件实现预览!!!

    参考:https://www.cnblogs.com/steamed-twisted-roll/p/9648255.html     GitHub地址:https://github.com/FranckFreiburger/vue-pdf#readme

    安装:

    npm install --save vue-pdf

    template代码:

    复制代码
    <template>
    <div class="pdf" v-show="fileType === 'pdf'">
        <p class="arrow">
        <!-- // 上一页 -->
        <span @click="changePdfPage(0)" class="turn" :class="{grey: currentPage==1}">Preview</span>
        {{currentPage}} / {{pageCount}}
        <!-- // 下一页 -->
        <span @click="changePdfPage(1)" class="turn" :class="{grey: currentPage==pageCount}">Next</span>
        </p>
        <!-- // 自己引入就可以使用,这里我的需求是做了分页功能,如果不需要分页功能,只要src就可以了 -->
        <pdf
          :src="pdfSrc"
          :page="currentPage"
          @num-pages="pageCount=$event"
          @page-loaded="currentPage=$event"
          @loaded="loadPdfHandler" >
        </pdf>
      </div>
    </template>
    复制代码

    js代码:<script>  // 引入PDF

    复制代码
    import pdf from 'vue-pdf'
      export default {
        metaInfo: {
          title: 'This is the test',
          meta: [
            { charset: 'utf-8' },
            { name: 'viewport', content: 'width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=2,user-scalable=yes' }
          ]
        },
            components: {pdf},
            // props: ['pdfSrc'],
        data () {
          return {
            currentPage: 0, // pdf文件页码
            pageCount: 0, // pdf文件总页数
            fileType: 'pdf', // 文件类型
         pdfSrc: this.$route.query.url // pdf文件地址
          }
        },
      created() {
       // 有时PDF文件地址会出现跨域的情况,这里最好处理一下
        this.pdfSrc = pdf.createLoadingTask(this.pdfSrc)
        },
        methods: {
          // 改变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 // 加载的时候先加载第一页
          }
        }
      }
    复制代码

    上面是有实现分页功能的

    下面是没有分页功能

    template代码:

    复制代码
    <template>
      <div class="pdf-box">
        <pdf
          v-for="i in numPages"
          :key="i"
          :src="pdfSrc"
          :page="i">
        </pdf>
      </div>
    </template>
    复制代码

    js代码

    复制代码
    import pdf from 'vue-pdf'
    export default {
      metaInfo: {
        meta: [
          { name: 'viewport', content: 'width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=2,user-scalable=yes' }
        ]
      },
      components: {
        pdf
      },
      data () {
        return {
        pdfSrc: this.$utils.DecryptUrl(this.$route.query).url, // pdf文件地址
          numPages: undefined,
        }
      },
      mounted() {
        // 有时PDF文件地址会出现跨域的情况,这里最好处理一下
      this.pdfSrc = pdf.createLoadingTask(this.pdfSrc)
        this.pdfSrc.then(pdf => {
          this.numPages = pdf.numPages
        })
      }
    }
    </script>
    复制代码

    css:

    复制代码
    <style lang="scss" scoped>
     .pdf-box {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        max- 1024px;
         100%;
        margin: 0 auto;
        overflow-x: hidden;
        height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        font-size: .28rem;
        span {
           100%;
        }
      }
    </style>
    复制代码

    最后:我们发现了pdf在手机预览的时候,不可以放大,后面发现是因为入口文件设置了禁止用户缩放放大,我们可以借助vue-meta进行单独为这个组件设置动态meta,具体看下vue-meta使用。

    转自https://www.cnblogs.com/qdlhj/p/11237040.html

  • 相关阅读:
    day 66 ORM django 简介
    day 65 HTTP协议 Web框架的原理 服务器程序和应用程序
    jQuery的事件绑定和解绑 事件委托 轮播实现 jQuery的ajax jQuery补充
    background 超链接导航栏案例 定位
    继承性和层叠性 权重 盒模型 padding(内边距) border(边框) margin 标准文档流 块级元素和行内元素
    属性选择器 伪类选择器 伪元素选择器 浮动
    css的导入方式 基础选择器 高级选择器
    03-body标签中相关标签
    Java使用内存映射实现大文件的上传
    正则表达式
  • 原文地址:https://www.cnblogs.com/douyage/p/12835168.html
Copyright © 2011-2022 走看看