vue开发微信公众号之文件下载

开发微信公众号实现文件下载的时候问题就出现了，一般网站做法就用不了，因为微信内置浏览器不支持下载文件，这就需要你用外部浏览器了（一般都是用手机自带的浏览器）。
这边你需要新建一个中转页面，提醒用户要通过浏览器去下载文件。
将需要下载的文件获取到并展示在页面，通过点击文件名跳转到中转页面，然后中转页面上去打开浏览器，会自动下载文件
在需要的页面调用接口去获取文件信息并且将文件展示getFile() {this.$get(api.getFile + this.contentId).then(res => {console.log(res);if (res.data.state === 200) {this.contentFile = res.data.data;} else if (res.data.state === 1000) {console.log(res.data.msg);}});
},
 
给文件信息添加点击事件并传值去往中转页面<aclass="files"v-for="item in contentFile":key="item.id"@click="download(item.id,item.fileName,item.fileType)">{{item.fileName}}</a>
 download(id, filename ,filetype) {let filePath = api.getFiles + id;console.log(filePath + ',' + filename + ',' + filetype);this.$router.push({name: "Download",params: { filePath: filePath, fileName: filename , fileType: filetype}});
}
 
中转页面（这里一般需要判断一下是安卓系统还是iOS系统，因为iOS系统也会把链接屏蔽掉，可以做个点击复制下载链接，然后让用户自己去浏览器里粘贴下载）
 判断是否为微信浏览器is_weixin() {var ua = window.navigator.userAgent.toLowerCase();if (ua.match(/MicroMessenger/i) == "micromessenger") {console.log("微信浏览器");return true;} else {console.log("不是微信浏览器");return false;}
}
 下载文件的方法download(){let is_weixin = this.is_weixin();if (is_weixin) {//是微信浏览器  显示返回按钮   （用户可以选择下载或者返回）return} else {//不是微信浏览器//执行下载axios({header: { OpenID: localStorage.openID, "Content-Type": this.fileType },method: "get",url: fileUrl,responseType: "blob"}).then(res => {console.log(res);var a = document.createElement("a");let url1 = URL.createObjectURL(res.data);console.log(url1);a.setAttribute("href", url1);a.setAttribute("download", this.fileName);a.setAttribute("target", "_blank");a.setAttribute("style", "display:blok");let clickEvent = document.createEvent("MouseEvents");clickEvent.initEvent("click", true, true);a.dispatchEvent(clickEvent);});}
}
 判断是什么系统并实现下载：//判断是安卓终端还是苹果终端
this.fileUrl = api.getFiles + this.id;
this.copys = this.fileUrl;let u = navigator.userAgent;
console.log(u);
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;  //安卓终端
let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);                //苹果终端 
if (isAndroid) { //判断为安卓手机console.log('这里安卓手机');this.showBox = false;
}else if (isIOS) {     //判断为苹果手机console.log('这里苹果手机');this.showBox = true; //判断显示的是哪一个页面，我这边设置的就是如果为true就显示iOS的页面，如果为false就显示安卓的页面
}this.download();
 
中转页面这里就需要做两部分啦每一个是安卓系统的“从浏览器打开的”提示，一个是苹果系统的复制下载链接的部分。
 
 这是iOS系统看到的样子
 
 这是在安卓系统下看到的样子，样式什么的就看自己怎么写了。
点击复制下载链接的方法如下// 我是用的插件来实现点击复制的// 首先安装插件
$ npm intall --save vue-clipboard2// 在 main.js 中引入
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)// 这是HTML部分
<div><a class="copy-a" href="javascript:;" v-clipboard:copy="copys" v-clipboard:success="copy">点击复制文件下载链接</a>
</div>// 这里是复制成功后的一个提示，用的是element-ui里的消息提示
copy(){this.$message({message: '复制成功',		//  提示内容center: true,				//  内容是否居中offset:300,				//  距顶部的距离duration:3500,			//  延时（提示过多久消失）type:'success'			//  提示类型});
},
 
大体应该是这样了~
vue开发微信公众号之文件下载

相关文章

TJUACM假期集训个人赛（八）(cf789a-c cf791a-c)

MySQL 事务与存储引擎

科幻字体_您可以免费获得40种科幻字体

23个适合logo设计的常用英文字体

字体跨域访问_21个访问量最大的免费字体网站

字体设计 css_CSS3字体设计简介

程序员最爱字体_网页设计师最爱的十大字体

字体设计基础理论知识
