移动端预览pdf资源

最新推荐文章于 2024-07-18 19:15:00 发布

是谁眉眼

最新推荐文章于 2024-07-18 19:15:00 发布

阅读量211

点赞数 4

文章标签： pdf javascript 前端

本文链接：https://blog.csdn.net/weixin_46370288/article/details/137229334

版权

单页面预览
一.安装
npm install --save vue-pdf
二.代码

<template>
<div class="pdf">
  <pdf 
    ref="pdf"
    :src="pdfUrl">
  </pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
  name: 'Pdf',
  components:{
      pdf
  },
  data(){
      return {
          pdfUrl:"http://file.dakawengu.com/file/2018-05-29/20180527-tianfeng.pdf",
      }
  }
</script>

多页面pdf预览
一.安装
npm install --save vue-pdf
二.代码

this.$router.push({path:'/homeConcentricIndex/pdfpage',query:{url:url}})

<pdf v-for="item in pageTotal"
            :src="pdfUrl"
            :key="item"
            :page="item"></pdf>

<script>
import pdf from 'vue-pdf'
export default {
    name:'pdfpage',
    data(){
        return { 
            pdfUrl: '',
            numPages: 0,
            pageTotal:undefined
        }
    },
    components: {
        pdf
    },
    mounted() {
        this.pdfUrl = pdf.createLoadingTask(decodeURIComponent(this.$route.query.url))
        // 获取页码
        this.pdfUrl.promise.then(pdf => this.pageTotal = pdf.numPages).catch(error => {})
    },
  }
</script>