Use vue-pdf para realizar una vista previa en línea de pdf y personalizar la altura del cuadro de vista previa

Primero, instale vue-pdfla biblioteca

npm install --save vue-pdf

Introduzca este componente en su archivo de página vue

Luego ejecute el programa, en este momento encontrará que la imagen de vista previa en pdf no puede cubrir el marco de su contenedor.
Ver estilos:

Se encuentra vue-pdfque la altura está codificada height:212.269pxde forma rígida .
Intentamos escribir otra clase de vista previa de pdf para este componente y establecer la altura al 100% y descubrimos que no funcionó.

  .pdf-preview {
    
    
    height: 100%;
  }

Solución: aumentar la prioridad de la aplicación (prioridad) del estilo especificado

  .pdf-preview {
    
    
    height: 100%;
  }
  // 穿透vue-pdf插件中的canvas样式
  .pdf-preview canvas {
    
    
    //提高指定样式规则的应用优先权（优先级）
    height: 100% !important;
  }

Adjunta el código completo:

<!--
 * @Author: WenZhiming
 * @Date: 2022-09-26 17:17:55
 * @LastEditors: WenZhiming
 * @LastEditTime: 2022-09-26 18:03:13
 * @Description: file content
-->
<template>
  <div class="container_upload relative">
    <pdf
      v-if="pdfUrl && pdfUrl.endsWith('.pdf')"
      class="pdf-preview"
      :src="pdfUrl"
    ></pdf>
    <div class="buttons">
      <el-button v-if="pdfUrl" type="primary" plain @click="previewPDF">
        {
    
    {
    
     $t('查看') }}
      </el-button>
      <el-button type="primary" class="mt-12" @click="uploadPdf">
        {
    
    {
    
     $t('上傳') }}
      </el-button>
    </div>
    <input
      ref="pdfInput"
      type="file"
      style="display: none"
      accept="application/pdf"
      @change="fileChange"
    />
  </div>
</template>
<script>
  import pdf from 'vue-pdf'
  export default {
    
    
    components: {
    
    
      pdf,
    },
    data() {
    
    
      return {
    
    
        pdfUrl: '',
      }
    },
    methods: {
    
    
      uploadPdf() {
    
    
        this.$refs.pdfInput.click()
      },
      fileChange(ev) {
    
    
        //文件上传到阿里云oss获得url
        // this._upload(ev, (url) => {
    
    
        //   this.pdfUrl = url
        // })
        this.pdfUrl = 'https://www.pinduoduo.com/pdd_privacy_policy.pdf'
      },
      previewPDF() {
    
    
        window.open(this.pdfUrl, '_blank')
      },
    },
  }
</script>

<style lang="scss">
  .container_upload {
    
    
    width: 150px;
    height: 256px;
    border: 1px solid #ddd;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .buttons {
    
    
      z-index: 1;
      position: absolute;
      display: flex;
      flex-direction: column;
      .el-button {
    
    
        margin-left: 0;
        width: 80px;
      }
    }
    img {
    
    
      width: 100%;
      height: 100%;
    }
  }

  .pdf-preview {
    
    
    height: 100%;
  }
  // 穿透vue-pdf插件中的canvas样式
  .pdf-preview canvas {
    
    
    //提高指定样式规则的应用优先权（优先级）
    height: 100% !important;
  }
</style>