Descripcion funcional

Recientemente, durante el desarrollo del proyecto, el cliente tiene un requisito de este tipo: obtener una vista previa en línea de los archivos PDF cargados. Nunca había tocado esto antes. Después de consultar la información, descubrí que hay un componente de vista previa de PDF, que solo necesita ser importado. ¡Entremos en el modelo de productos secos! ! !

código de interfaz

primer paso

Cree una carpeta PdfView en componentes y cree un archivo .vue

inserte la descripción de la imagen aquí

segundo paso

Copie el siguiente código en el archivo (index.vue).vue,

<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>

tercer paso

Inyéctelo en el archivo .vue que necesita usar este componente. Ya sea que 注意la ruta importada sea correcta o no, no publicaré este código. Puede escribirlo usted mismo. Solo hay dos líneas en total.

inserte la descripción de la imagen aquí

el cuarto paso

重点：Utilice el componente pdf

Para explicar
el significado de filePreviewModal: ya sea que se muestre o no, simplemente defina dicha variable global y el valor predeterminado es falso para no mostrar.
filePreviewUrl: URL del archivo.

<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 del archivo cargado + nombre del archivo

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

conclusión

Los blogueros interesados pueden prestarle atención y, a menudo, compartirán algunas funciones nuevas y errores encontrados en el desarrollo del proyecto en el período posterior, y los actualizarán en la página de inicio de este blogger a tiempo . ! !

Vue implementa vista previa en línea de archivos PDFpdf

Directorio de artículos