uniapp开发app在当前页面预览pdf文件

试了很多方法，在插件市场上也找了很多插件，pdf可以显示出来，但都是铺满了整个屏幕，没有放到我指定的容器里面去，使用webview也是一整个页面，搞了几天，看了uniapp官方文档，终于解决,我是使用了此种方法

App端web-view的扩展

App端的webview是非常强大的，可以更灵活的控制和拥有更丰富的API。

每个vue页面，其实都是一个webview，而vue页面里的web-view组件，其实是webview里的一个子webview。这个子webview被append到父webview上。

通过以下方法，可以获得这个web-view组件对应的js对象，然后参考HTML5+ API Reference，可以进一步重设这个web-view组件的样式，比如调整大小

官方代码

<template>
	<view>
	</view>
</template>
<script>
var wv;//计划创建的webview
export default {
	onLoad() {
		// #ifdef APP-PLUS
		wv = plus.webview.create("","custom-webview",{
			plusrequire:"none", //禁止远程网页使用plus的API，有些使用mui制作的网页可能会监听plus.key，造成关闭页面混乱，可以通过这种方式禁止
      'uni-app': 'none', //不加载uni-app渲染层框架，避免样式冲突
			top:uni.getSystemInfoSync().statusBarHeight+44 //放置在titleNView下方。如果还想在webview上方加个地址栏的什么的，可以继续降低TOP值
		})
		wv.loadURL("https://www.baidu.com")
		var currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
		currentWebview.append(wv);//一定要append到当前的页面里！！！才能跟随当前页面一起做动画，一起关闭
		setTimeout(function() {
			console.log(wv.getStyle())
		}, 1000);//如果是首页的onload调用时需要延时一下，二级页面无需延时，可直接获取
		// #endif
	}
};
</script>

我借助了在线PDF播放器预览 - DCloud 插件市场这个插件里的js文件

	viewerUrl: '/static/hybrid/html/web/viewer.html',
	pdfUrl:'' //pdf文件

  //创建
   wv = plus.webview.create("", "custom-webview", {
	 plusrequire: "none",
	 'uni-app': 'none',
	 right: 20,
	 top: 130,
	 height: 400,
	 width: 720,
    })
    this.purl = `${this.viewerUrl}?file=${encodeURIComponent(this.pdfUrl)}`;
	wv.loadURL(this.purl)
	var currentWebview = this.$scope.$getAppWebview();
	currentWebview.append(wv);

 //隐藏
    wv.hide();
 //显示
    wv.show()
 //销毁
    wv.close();
	wv = null;