webview 访问 html字符串

项目背景

需要让用户预览转成html的excel,并且可以对excel中的图片及视频文件,进行预览。

遇到问题

最一开始,是想通过 v-html或者rich-text,将html字符串展现到页面中,然后通过document 来监听用户的点击事件,从而获取点击元素的文件路径,以此来实现预览。但是在开发过程中,发现控制台输出document is not undefined,查了uni-app官网,发现非H5端,是不支持 windowdocument这些API的。
在这里插入图片描述

解决思路

uniapp官网也给出了app端web-view使用的思路,那就是使用 html5+plus.webview

//创建新的Webview窗口
// 总共4个参数
	// url: 新窗口加载的HTML页面地址
	// id: 新窗口的标识
	// styles: 创建Webview窗口的样式(如窗口宽、高、位置等信息)
	// extras: 创建Webview窗口的额外扩展参数
//eg:
const wv = plus.webview.create("", "custom-webview", {
	backButtonAutoControl: "hide", //如果我们设置了窗口title bar,而且有 返回键,那么这个属性就可以用到。
	titleNView: { //定义窗口的标题栏控件样式
		autoBackButton: true, //是否显示左侧返回按钮
		background: "#333",
		backButton: { //返回按钮自定义样式
			title: '返回', //返回按钮上的标题
			color: '#999', //按钮上返回图标和标题颜色
			...
		},
		backgroundColor: "#666",
		titleText: "custom-webview",
		...
	},
}, ...extras)

// 最终生成的是一个 WebviewObject 对象
// 加载新HTML数据
//两个参数
	//1.data html数据
	//2.options 加载HTML数据的配置参数(可选)
wv.loadData(`
	<html>
      <body>
          <div style="font-size: 50px">这是一个自定义的web view</div>
      </body>
      </html>
`)

//可以注入js脚本
wv.evalJS(` 
	var dom = document.createElement("div")
	dom.setAttribute("style", "width: 200px; heigth: 200px; background-color: rgb(230, 158, 26)")
	document.body.appendChild(dom)
`) 

//显示web view窗口
wv.show(
"slide-in-right" //从右侧横向滑动效果
)

//隐藏web view窗口
wv.hide(
"slide-out-right" //向右划出动画效果
)

在这里插入图片描述

上述只是做了一个简单的例子,官方文档还提供了很多 属性和方法

参考文档

uniapp webview 官方文档
html5+ plus.webview 官方文档

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值