直播平台搭建，使用vue-pdf 实现pdf在线预览并且自定义预览框高度

直播平台搭建，使用vue-pdf 实现pdf在线预览并且自定义预览框高度

 

1	.pdf-preview {<br>    height: 100%;<br>  }<br>

​

解决方案：提高指定样式的应用优先权（优先级）

 

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

 

 

附上完整代码：

 

1

<!--<br> * @Author: WenZhiming<br> * @Date: 2022-09-26 17:17:55<br> * @LastEditors: WenZhiming<br> * @LastEditTime: 2022-09-26 18:03:13<br> * @Description: file content<br>--><br><template><br>  <div class="container_upload relative"><br>    <pdf<br>      v-if="pdfUrl && pdfUrl.endsWith('.pdf')"<br>     <br>      :src="pdfUrl"<br>    ></pdf><br>    <div><br>      <el-button v-if="pdfUrl" type="primary" plain @click="previewPDF"><br>        {{ $t('查看') }}<br>      </el-button><br>      <el-button type="primary" @click="uploadPdf"><br>        {{ $t('上傳') }}<br>      </el-button><br>    </div><br>    <input<br>      ref="pdfInput"<br>      type="file"<br>      style="display: none"<br>      accept="application/pdf"<br>      @change="fileChange"<br>    /><br>  </div><br></template><br><script><br>  import pdf from 'vue-pdf'<br>  export default {<br>    components: {<br>      pdf,<br>    },<br>    data() {<br>      return {<br>        pdfUrl: '',<br>      }<br>    },<br>    methods: {<br>      uploadPdf() {<br>        this.$refs.pdfInput.click()<br>      },<br>      fileChange(ev) {<br>        //文件上传到阿里云oss获得url<br>        // this._upload(ev, (url) => {<br>        //   this.pdfUrl = url<br>        // })<br>        this.pdfUrl = 'https://www.pinduoduo.com/pdd_privacy_policy.pdf'<br>      },<br>      previewPDF() {<br>        window.open(this.pdfUrl, '_blank')<br>      },<br>    },<br>  }<br></script><br><style><br>  .container_upload {<br>    width: 150px;<br>    height: 256px;<br>    border: 1px solid #ddd;<br>    border-radius: 4px;<br>    display: flex;<br>    flex-direction: column;<br>    justify-content: center;<br>    align-items: center;<br>    .buttons {<br>      z-index: 1;<br>      position: absolute;<br>      display: flex;<br>      flex-direction: column;<br>      .el-button {<br>        margin-left: 0;<br>        width: 80px;<br>      }<br>    }<br>    img {<br>      width: 100%;<br>      height: 100%;<br>    }<br>  }<br>  .pdf-preview {<br>    height: 100%;<br>  }<br>  // 穿透vue-pdf插件中的canvas样式<br>  .pdf-preview canvas {<br>    //提高指定样式规则的应用优先权（优先级）<br>    height: 100% !important;<br>  }<br></style>

 

 以上就是直播平台搭建，使用vue-pdf 实现pdf在线预览并且自定义预览框高度， 更多内容欢迎关注之后的文章