Functional description

Recently, during the project development, the customer has such a requirement: to preview the uploaded PDF files online. I have never touched this before. After consulting the information, I found that there is a PDF preview component, which only needs to be imported. Let’s enter the dry goods model! ! !

front-end code

first step

Create a PdfView folder under components and create a .vue file

insert image description here

second step

Copy the following code into the (index.vue).vue file,

<template>
  <div style="background-color: #FFFFFF;width: 100%;margin: 0 auto;">
    <pdf
      :page="pageNum"
      :src="url"
      @progress="loadedRatio = $event"
      @num-pages="pageTotalNum=$event"
    ></pdf>
    <br>
    <el-button-group style="position: relative;top: 8%;left: 43%;transform: translate(-50%,-50%);">
      <el-button type="primary" icon="el-icon-arrow-left" size="mini" @click="prePage">上一页</el-button>
      <el-button type="primary" size="mini" @click="nextPage">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
    </el-button-group>
    <div style="marginTop: 10px; color: #409EFF;text-align: center;">{
    
    {
    
     pageNum }} / {
    
    {
    
     pageTotalNum }}</div>
    <br>
  </div>
</template>

<script>
import pdf from 'vue-pdf'

export default {
    
    
  name: 'Pdf',
  components: {
    
    
    pdf,
  },
  props: {
    
    
    url: {
    
    
      type: String,
      default: ''
    },
  },
  data() {
    
    
    return {
    
    
      pageNum: 1,
      pageTotalNum: 1, //总页数
      loadedRatio: 0, //当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了
    }
  },
  created() {
    
    
    console.log(this.url,"pdf")
  },
  methods: {
    
    
    // 上一页
    prePage() {
    
    
      let page = this.pageNum
      page = page > 1 ? page - 1 : this.pageTotalNum
      this.pageNum = page
      document.getElementById("pdfId").scrollIntoView();
    },

    // 下一页
    nextPage() {
    
    
      //找到元素 scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内
      let page = this.pageNum
      page = page < this.pageTotalNum ? page + 1 : 1
      this.pageNum = page
      document.getElementById("pdfId").scrollIntoView();
    }
  }
}
</script>

third step

Inject it into the .vue file that needs to use this component. Whether 注意the imported path is correct or not, I will not post this code. You can write it yourself. There are only two lines in total.

insert image description here

the fourth step

重点：Use the pdf component

To explain
the meaning of filePreviewModal: whether to display or not, just define such a global variable, and the default is false to not display.
filePreviewUrl: file URL.

<a @click="filePreview(record)" v-if="roleCOde=='admin'">预览</a>
<j-modal :visible='filePreviewModal' :width='1400' cancelText='关闭' switchFullscreen title="预览" @cancel="filePreviewModal = false">
     <template>
       <div>
         <pdfView :url="filePreviewUrl" style="width: 600px;height: 900px;"></pdfView>  
       </div>
     </template>
     <template slot="footer">
       <div>
         <a-button type="white" @click="filePreviewModal = false">关闭</a-button>
       </div>
     </template>
</j-modal>

filePreviewUrl: URL of the uploaded file + file name

filePreview(record){
    
    
       this.filePreviewUrl = 'http://'+record.document
       this.filePreviewModal = true
     },

conclusion

Interested bloggers can pay attention to it, and will often share some new functions and bugs encountered in project development in the later period, and will update them on the homepage of this blogger in time ! ! !

Vue implements online preview of PDFpdf files

Article Directory