效果图如下：

代码如下：

<template>
	<div>
        <!-- 控制浮层显示隐藏 -->
		<el-button type="primary" size="small" class="btn" @click="dialogVisible = true">PDF 预览 (内嵌 iframe)</el-button>
         <!-- 浮层显示区域 -->
		<el-dialog title="PDF 预览" :visible.sync="dialogVisible" :close-on-click-modal="false">
             <!-- PDF 展示区域 -->
			<div class="main">
				<iframe id="printIframe" :src="src" frameborder="0" style="width:100%;height:100%;"></iframe>
			</div>
		</el-dialog>
	</div>
</template>
 
<script>
	export default {
		name: 'ViewPDF',
		data() {
			return {
				dialogVisible: false,
				src: '/static/3.pdf'
			}
		}
	}
</script>
 
<style lang="less" scoped>
	.btn {
		margin: 20px 0px;
	}
	.main {
		height: 700px;
		overflow: hidden;
	}
	/deep/ .el-dialog {
		width: 1000px;
		height: 700px;
		font-family: '楷体';
	}
	/deep/ .el-dialog__header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	/deep/ .el-dialog__body {
		padding: 0;
	}
</style>