uniapp实现文件预览过程

H5实现预览

vbscript 复制代码
<template>
    <iframe :src="_url" style="width:100vw; height: 100vh;" frameborder="0"></iframe>
</template>
<script lang="ts">
export default {
    data() {
        return {
            _url: '',
        }
    },
    onLoad(options: {_url: string}) {
        // 第一:https://docs.google.com/viewer?url=
        // 第二:https://view.officeapps.live.com/op/view.aspx?src=
        this._url = `https://view.officeapps.live.com/op/view.aspx?src=${options._url}`
        console.log(this._url,'this._url')
    }
}
</script>

小程序和app预览

CoffeeScript 复制代码
                uni.downloadFile({
					    url: url,
					    success: function (res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function (res) {
								console.log('打开文档成功');
							}
						});
					}
				});
相关推荐
小钟H呀17 分钟前
Uniapp项目运行到微信小程序、H5、APP等多个平台教程
uni-app
HerayChen39 分钟前
uniapp vue3 微信小程序 uni.chooseLocation使用
微信小程序·小程序·uni-app·微信小程序地理位置
pillowss5 小时前
uniapp中image加载图片失败解决方案
uni-app
bug总结5 小时前
uniapp+微信小程序+地图+传入多个标记点显示+点击打开内置地图导航+完整代码
uni-app
码农研究僧5 小时前
Uniapp 页面返回不刷新?两种方法防止 onShow 触发多次请求!
uni-app·vue·html·onshow
阿常1111 小时前
uni-app基础拓展
前端·javascript·uni-app
智驾12 小时前
uniapp,自绘仪表盘组件(基础篇)
uni-app·仪表
三天不学习1 天前
uniapp x 学习之 uts 语言快速入门
学习·uni-app