项目背景
需要让用户预览转成html的excel,并且可以对excel中的图片及视频文件,进行预览。
遇到问题
最一开始,是想通过 v-html或者rich-text,将html字符串展现到页面中,然后通过document 来监听用户的点击事件,从而获取点击元素的文件路径,以此来实现预览。但是在开发过程中,发现控制台输出document is not undefined
,查了uni-app官网,发现非H5端,是不支持 window、document这些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" //向右划出动画效果
)
上述只是做了一个简单的例子,官方文档还提供了很多 属性和方法