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

1. 开发微信公众号实现文件下载的时候问题就出现了，一般网站做法就用不了，因为微信内置浏览器不支持下载文件，这就需要你用外部浏览器了（一般都是用手机自带的浏览器）。
2. 这边你需要新建一个中转页面，提醒用户要通过浏览器去下载文件。
3. 将需要下载的文件获取到并展示在页面，通过点击文件名跳转到中转页面，然后中转页面上去打开浏览器，会自动下载文件
4. 在需要的页面调用接口去获取文件信息并且将文件展示

   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);
        }
     });
   },
   

5. 给文件信息添加点击事件并传值去往中转页面

   <a
           class="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}
     });
   }
   

6. 中转页面（这里一般需要判断一下是安卓系统还是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();
   

7. 中转页面这里就需要做两部分啦每一个是安卓系统的“从浏览器打开的”提示，一个是苹果系统的复制下载链接的部分。
   
   这是iOS系统看到的样子
   
   这是在安卓系统下看到的样子，样式什么的就看自己怎么写了。
8. 点击复制下载链接的方法如下

   // 我是用的插件来实现点击复制的
   
   // 首先安装插件
   $ 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'			//  提示类型
     });
   },
   

9. 大体应该是这样了~