<template>
<view style="width: 100%;height: 100vh;background-color: #fff;" v-if="showTis">
<view style="width: 100%;display: flex;justify-content: flex-end;margin-bottom: 30rpx;">
<image style="width: 50%;" src="/static/newImg/tips1.png" mode=""></image>
</view>
<view style=" width: 100%;position: absolute; left: 50%; margin-left: -25%;">
<view style="">
<view style="display: flex;align-items: center;">
<view style="margin: 0 20rpx 0 0;padding:8rpx 16rpx;background-color: #2d8cf0;color: #fff;border-radius: 55%;">1</view>
<view style="font-size: 24rpx;">点击右上角的</view>
<view style="margin: 0 30rpx; background-color: #2d8cf0;border-radius: 10rpx;width: 55rpx;height: 50rpx;display: flex;justify-content: center;align-items: center;">
<image style=" width: 30rpx;height: 30rpx;" src="../../static/newImg/tips3.png" mode=""></image>
</view>
<view style="font-size: 24rpx;">按钮</view>
</view>
</view>
<view style="">
<view style="display: flex;align-items: center;margin-top: 30rpx;">
<view style="margin: 0 20rpx 0 0;padding:8rpx 16rpx;background-color: #2d8cf0;color: #fff;border-radius: 50%;">2</view>
<view style="font-size: 24rpx;">选择</view>
<view style="margin: 0 30rpx; background-color: #2d8cf0;border-radius: 10rpx;width:250rpx ;height: 50rpx;display: flex;justify-content: center;align-items: center;">
<image style=" width: 30rpx;height: 30rpx;margin-right: 20rpx;" src="../../static/newImg/tips2.png" mode=""></image>
<view style="color: #fff;font-size: 24rpx;">在浏览器中打开</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
path: '',
showTis: null
}
},
onLoad(opt) {
this.path = opt.path
this.download()
},
methods: {
download() {
let is_weixin = this.checkUrl() //调用checkUrl 得到返回结果
if (is_weixin) {
this.showTis = true //可以理解为this.display绑定了 引导图img的display属性,当前是微信浏览器,展示引导图
} else {
this.showTis = false //当前为其他浏览器 ,隐藏引导图
window.location.href = this.path //讲之前存储的文件地址,赋值给当前 地址栏,即可预览或者下载文件了
}
},
checkUrl() {
let ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
return true; // '微信浏览器'
} else {
return false; // 其他浏览器
}
}
}
}
</script>
<style>
</style>
新建downreport页面
点击后携带下载URL 跳转至downreport并接收URL