1. Introduction

The online preview function of PDF files is something we have come across, but in my daily projects, the company provides corresponding plug-ins, but in other projects such as H5, we still have to rely on ourselves! Today, I will give an overview of the vuE-PDF component. Most of the requirements can be met

2. Install

npm install --save vue-pdf
Copy the code

3. The PDF page is displayed

3.1 code

<template>
    <div>
      <pdf 
        ref="pdf"
        :src="url"
      >
      </pdf>
    </div>
</template>
Copy the code
<script>
import pdf from 'vue-pdf'
export default {
  components:{
      pdf
  },
  data() {return {
          url:"http://image.cache.timepack.cn/nodejs.pdf",
      }
  }
</script>
Copy the code

3.2 show

At this point, the PDF file is already displayed on the page, but you can see that this only shows the first page of the PDF file

4. PDF displays multiple pages

4.1 code

<template>
  <div>
    <pdf
      ref="pdf"
      v-for="i in numPages" 
      :key="i"  
      :src="url" 
      :page="i"
      ></pdf>
  </div>
</template>
Copy the code
<script>
import pdf from 'vue-pdf'
export default {
  components:{
      pdf
  },
  data() {return {
          url:"http://image.cache.timepack.cn/nodejs.pdf", numPages: null, // PDF total pages}},mounted() {
      this.getNumPages()
  },
  methods: {
    Calculate the total number of PDF pages
    getNumPages() {
      let loadingTask = pdf.createLoadingTask(this.url)
      loadingTask.promise.then(pdf => {
        this.numPages = pdf.numPages
      }).catch(err => {
        console.error('PDF load failed', err);
      })
    },
  }
</script>
Copy the code

4.2 show

At this time, we can preview the PDF content by sliding, but this way is to load the PDF content all at once, the page number is too many, the browser directly stuck in the loading state, the experience is too bad, so we can consider loading by page

5. Preview PDF by page

5.1 code

<template>
  <div>
    <el-button-group>
      <el-button type="primary" icon="el-icon-arrow-left" size="mini" @click="prePage"< p style = "max-width: 100%; clear: bothtype="primary" size="mini" @click="nextPage"< p style = "max-width: 100%; clear: both; min-height: 1em"el-icon-arrow-right el-icon--right"></i></el-button>
    </el-button-group>
    <div style="marginTop: 10px; color: #409EFF">{{ pageNum }} / {{ pageTotalNum }}</div>
    <pdf
      :page="pageNum"
      :src="url"
      @progress="loadedRatio = $event"
      @num-pages="pageTotalNum=$event" 
      ></pdf>
  </div>
</template>
Copy the code
<script>
import pdf from 'vue-pdf'

export default {
  name: 'Pdf',
  components: {
    pdf,
  },
  data() {
    return {
      url: 'http://image.cache.timepack.cn/nodejs.pdf',
      pageNum: 1,
      pageTotalNum: 1, # total number of pages
      loadedRatio: 0, # The current page loading progress ranges from 0 to 1. A value equal to 1 indicates that the current page is fully loaded}}, methods: {// previous pageprePage() {
      letpage = this.pageNum page = page > 1 ? Page-1: this.pageTotalNum this.pageNum = page}, // Next pagenextPage() {
      let page = this.pageNum
      page = page < this.pageTotalNum ? page + 1 : 1
      this.pageNum = page
    }
  }
}
</script>
Copy the code

5.2 show

At this point, the general effect looks like this

6. More

npm vue-pdf