利用a标签的click方法下载APK到电脑本地

最近遇到一个项目需要，需要在PC页面上实现一个点击或扫码功能，从而可以将APP下载到电脑或手机本地，由于这个APP是uniapp进行开发的混合式APP，而且并没有打包成ios版，我们来看下效果图：

这个二维码和APP版本号等信息都是后端返回回来的数据进行渲染展示，二维码后端返回的是一个base64格式的图，没什么难的，重点看下下载APP功能，点击下载会触发downloadApp方法：

 downloadApp() {let a = document.createElement("a");a.setAttribute("download", ""); // download属性if (this.showStatus == 1) {//执行端a.setAttribute("href",window.g.API_URL + "/systemManage/file/downloadApk");} else {//管理端a.setAttribute("href",window.g.API_URL + "/systemManage/file/dlManageApk");}a.click(); // 自执行点击事件a = null;},

这里要注意的是不要用const定义a标签，不然控制台会报警告。该页面完整代码如下：

<template><div><div class="flex-wrapper"><spanclass="iconfont icon-huitui"style="font-size:30px;margin-right:10px;display:inline-block;vertical-align:middle;cursor:pointer;"@click="$router.back(-1)"></span><i@click="dialogVisible = true"class="el-icon-mobile-phone icon-style"></i><!-- <Badge :count="noticeCount"><span class="iconfont icon-gonggao2" style="font-size:30px;margin-right:10px;vertical-align:middle;cursor:pointer;" @click="handleNotice"></span></Badge> --><div class="user-avatar-dropdown"><Dropdown @on-click="handleClick"><Badge :dot="!!messageUnreadCount"><spanclass="iconfont icon-gerenxinxi"style="font-size:30px;"></span></Badge><!-- <Icon :size="18" type="md-arrow-dropdown"></Icon> --><DropdownMenu slot="list"><DropdownItem name="message">个人信息</DropdownItem><!-- <DropdownItem name="task">我的任务</DropdownItem><DropdownItem name="workOrder">我的工单</DropdownItem> --><DropdownItem name="logout">退出登录</DropdownItem></DropdownMenu></Dropdown></div><img class="code-style" :src="this.imageSrc" alt=""><div class="down-tip">扫码或点击下载到本地</div><div class="down-tip" v-if="version && version.length">版本号: {{version}}</div><div style="text-align: center;margin-top: 15px;"><el-button  type="primary" @click="downloadApp">下载到本地</el-button></div></Modal> --><el-dialog:visible.sync="dialogVisible"width="28.125rem":close-on-click-modal="false":show-close="false"class="myDialog"><div class="dialogBox"><div class="contentBox"><div class="closeBox"><imgsrc="@/assets/images/close.png"@click="closeDialog"alt=""/></div><div class="topBox"><span class="tips">图灵警务{{ showStatus == 1 ? "执行端" : "管理端" }}</span><span class="version">V{{ version }}</span></div><div class="middleBox"><div class="codeBox"><img :src="data:imageSrc" alt="" /></div><div class="downTips">扫码或者点击下载到本地</div><div class="mybtn"><el-button type="primary" round @click="downloadApp">下载到本地</el-button></div></div><div class="bottomBox"><div class="switchBox"><imgsrc="@/assets/images/switch.png"@click="switchStatus"alt=""/></div><span class="bottomTips" @click="switchStatus">切换至图灵警务{{ WayStatus(showStatus) }}</span></div></div></div></el-dialog></div></div>
</template><script>
import "./user.less";
import { mapActions } from "vuex";
import notice from "@/components/notice-popUp/notice.vue";
import { getDownloadCode } from "@/api/auth.js";
export default {name: "User",components: { notice },props: {userAvatar: {type: String,default: ""},userInfo: {type: Object,default: () => {}},messageUnreadCount: {type: Number,default: 0}},data() {return {modal: false,dialogVisible: false,imageSrc: "",version: "", //版本号showStatus: 1 //1执行端2管理端};},computed: {noticeCount() {return this.$store.state.noticeCount;}},created() {this.actFindAccessNoticeCount();this.getVersionNews();},methods: {...mapActions(["actLoginOut", "actFindAccessNoticeCount"]),logout() {this.$Modal.confirm({title: "退出登录",content: "请确认退出登录",okText: "确定",cancelText: "取消",onOk: () => {this.actLoginOut();},onCancel: () => {this.$Message.info("您已取消该操作！");}});},getVersionNews() {getDownloadCode(this.showStatus).then(res => {// console.log("获取版本号等", res);this.imageSrc = res.result.downloadCode;this.version = res.result.version;}).catch(() => {});},message() {this.$router.push({name: "my_account"});},workOrder() {this.$router.push({name: "my_workOrder"});},task() {this.$router.push({name: "my_task"});},handleClick(name) {switch (name) {case "logout":this.logout();break;case "message":this.message();break;case "workOrder":this.workOrder();break;case "task":this.task();break;}},// 打开弹框handleNotice() {this.modal = true;},// 关闭弹框cancel() {this.$nextTick(() => {this.actFindAccessNoticeCount();}, 2000);this.modal = false;},downloadApp() {let a = document.createElement("a");a.setAttribute("download", ""); // download属性if (this.showStatus == 1) {//执行端a.setAttribute("href",window.g.API_URL + "/systemManage/file/downloadApk");} else {//管理端a.setAttribute("href",window.g.API_URL + "/systemManage/file/dlManageApk");}a.click(); // 自执行点击事件a = null;},switchStatus() {if (this.showStatus == 1) {this.showStatus = 2;} else {this.showStatus = 1;}this.getVersionNews();},closeDialog() {this.dialogVisible = false;},WayStatus(showStatus) {if (showStatus == 1) {return "管理端";} else if (showStatus == 2) {return "执行端";}}}
};
</script><style lang="less" scoped>
/deep/.ivu-badge-count {top: 6px;right: 12px;
}
.icon-style {font-size: 20px;border-radius: 50%;padding: 5px;margin-top: 5px;border: 1px solid #515a6e;margin-right: 8px;display: inline-block;width: 30px;height: 30px;margin-top: 18px;cursor: pointer;
}
.flex-wrapper {display: flex;justify-content: space-around;
}
.icon-huitui {margin-top: 2px;
}
.user-avatar-dropdown {margin-top: -1px;
}
.code-style {width: 80%;height: 300px;margin-left: 10%;
}
.down-tip {text-align: center;color: #282828;
}::v-deep .dialogBox {position: relative;width: 28.125rem;height: 28.125rem;.contentBox {position: relative;width: 28.125rem;height: 28.125rem;background: url("../../../../assets/images/downAppBg.png");.topBox {width: 9rem;padding-top: 3.5625rem;margin: -0.4px 9.5625rem 0.7rem 9.25rem;font-size: 1.25rem;font-family: PingFang SC;font-weight: 500;color: #3c4353;line-height: 1.875rem;text-align: center;.tips {}.version {}}.middleBox {width: 10rem;height: 16.25rem;margin: 0 auto;.codeBox {width: 9.375rem;height: 9.375rem;img {width: 9.375rem;height: 9.375rem;}}.downTips {font-size: 0.875rem;font-family: PingFang SC;font-weight: 500;color: #838a9d;line-height: 1.875rem;}.mybtn {margin-left: 1.3125rem;}}.bottomBox {height: 3.75rem;border-top: 1px solid #d6d6d6;position: relative;.switchBox {width: 1.5625rem;height: 1.125rem;position: absolute;top: 0;left: 7.625rem;img {width: 1.5625rem;height: 1.125rem;cursor: pointer;}}.bottomTips {position: absolute;top: 0.75rem;left: 10rem;height: 1.125rem;font-size: 1rem;font-family: PingFang SC;font-weight: 500;// text-decoration: underline;padding-bottom: 1.6rem;border-bottom: 2px solid #98ccff;color: #3199ff;line-height: 1.875rem;cursor: pointer;}}.closeBox {position: absolute;top: 0px;right: 0.75rem;width: 1.75rem;height: 1.75rem;img {width: 1.75rem;height: 1.75rem;cursor: pointer;}}}
}::v-deep .el-dialog__body {padding: 0 !important;
}::v-deep .el-dialog__header {padding: 0 !important;
}
</style>

利用a标签的click方法下载APK到电脑本地相关推荐

python urlretrieve_使用urllib库的urlretrieve()方法下载网络文件到本地的方法
概述见源码源码 # !/usr/bin/env python # -*- coding:utf-8 -*- """ 图片(文件)下载,核心方法是 urllib.url ...
jquery 自动触发a 标签的click()方法
今天想向自动触发a标签的click事件,但是把事件绑定到a 标签上,即$("#id").click(),但是没有任何反应,然后查了下,原来不能把click事件直接绑定到a标签上,必 ...
jquery 自动触发标签的click()方法
今天想向自动触发a标签的click事件,但是把事件绑定到a 标签上,即$("#id").click(),但是没有任何反应,然后查了下,原来不能把click事件直接绑定到a标签上,必 ...
前端文件下载利用a标签的download属性下载文件
1.对于后端返回的是url下载地址代码(可直接复制拿去用): // 点击下载文件参数href:下载地址,参数filename:文件名(如后端没有返回文件,可自定义文件名)downloadFile(h ...
JQuery 自动触发 a 标签的 click事件
前言 JQuery 使用 trigger 可以自动触发 HTML元素的 click() 方法 a标签有些特殊,JQuery无法使用 trigger 触发 a 标签click事件,需要迂回一下. a标签 ...
详细解读微信内置浏览器不支持下载APK(APP)软件的解决方法
做微信营销活动或者APK下载推广时候,域名被经常被封,如何做到微信中正常使用呢?这就要借助一些工具来实现有效的操作. 先来认识一下微信屏蔽的原理.整理如下:微信屏蔽的原理第一是系统的自动检测,第二是微 ...
Android开发之下载Apk安装的方法兼容Android7.0和8.0及以上
具体查看代码: 首先在清单文件配置三个权限读写权限和请求安装权限(兼容Android8.0手机)如下: <uses-permission android: ...
jquery click()方法模拟点击事件对a标签不生效的解决办法
jquery click()方法模拟点击事件对a标签不生效的解决办法参考文章: (1)jquery click()方法模拟点击事件对a标签不生效的解决办法 (2)https://www.cnblog ...
h5页面下载apk方法
需求描述接到的原始需求是这样的,有一个H5页面,页面中有个"点击下载"的按钮,点击之后,完成下载特定的apk. 大概是下面这样的?: 图片描述需求分析接到需求的时候我偷乐了一 ...

利用a标签的click方法下载APK到电脑本地

利用a标签的click方法下载APK到电脑本地相关推荐

最新文章

热门文章