使用pdf.js插件同时用iframe嵌套方式预览pdf文件

  • 时间:
  • 浏览:
  • 来源:互联网

1.在百度搜pdf.js
在这里插入图片描述
在这里插入图片描述
2.把下载好的包放在项目中,我这里是Vue项目,在public文件夹下,新建一个PDF文件夹,把下载的包里的build 和web 文件夹 放到PDF文件夹里
在这里插入图片描述
3.预览页面中

<template>
	<div>
		<iframe :src="baseUrl + 'PDF/web/viewer.html?file' + encodeURIComponent(pdfUrl)" width="100%" height="100%" frameborder="0"/>
	</div>
</template>
<script>
	import StorageHandler from "@/handler/StorageHandler.js" //封装的存储文件,导出的是类
	export default {
		name:"index",
		data(){
			return {
				baseUrl:process.evn.BASE_URL,
				pdfUrl:""
			}
		},
		created(){
			let storageHandler = new StorageHandler();  // 类 实例化
			let fileId = this.$route.query.id; // 文件id,我这里是跳转路由时路由带参带过来的
			this.pdfUrl = `/meeting-system/material/view?id=${fileId}&token=${storageHandler.getSessionStorage('token')}`
		//	/meeting-system/material/view   这是后端给的地址,需要拼接id参数
		}
	}
</script>

process.evn.BASE_URL 就是vue.config.js文件中的publicPath
在这里插入图片描述
4.下面放一下完整的代码截图
在这里插入图片描述
5.如果需要修改样式,可以到这里找到对应的元素修改
在这里插入图片描述
6.效果大概就是这样
在这里插入图片描述

本文链接http://www.dzjqx.cn/news/show-617470.html