直播平台搭建，使用vue-pdf 实现pdf在线预览并且自定义预览框高度
.pdf-preview {
height: 100%;
}
解决方案：提高指定样式的应用优先权（优先级）
.pdf-preview {
height: 100%;
}
// 穿透vue-pdf插件中的canvas样式
.pdf-preview canvas {
//提高指定样式规则的应用优先权（优先级）
height: 100% !important;
}
附上完整代码：
<!--
* @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">
v-if="pdfUrl && pdfUrl.endsWith('.pdf')"
:src="pdfUrl"
></pdf>
<div>
<el-button v-if="pdfUrl" type="primary" plain @click="previewPDF">
{{ $t('查看') }}
</el-button>
<el-button type="primary" @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>
.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>
以上就是直播平台搭建，使用vue-pdf 实现pdf在线预览并且自定义预览框高度， 更多内容欢迎关注之后的文章