内嵌 iframe 实现PDF预览

最新推荐文章于 2024-05-13 15:52:19 发布

吃葡萄不吐葡萄皮嘻嘻

最新推荐文章于 2024-05-13 15:52:19 发布

阅读量3k

点赞数 1

分类专栏： vue 文章标签： pdf vue.js javascript

本文链接：https://blog.csdn.net/qq_45695853/article/details/131530270

版权

vue 专栏收录该内容

73 篇文章 3 订阅

订阅专栏

效果图如下：

在这里插入图片描述
代码如下：


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