1.简单的行内式修改

 <a href="url" download="name">文件下载</a> 
 //url  文件路径
 //name 文件下载后的文件名                                   

2.span标签模拟下载

html

<span @click="aDownload(name, url)">文件下载</span>

script 写法一 (下载的目标文件做好了跨域处理)

aDownload(name, url) {
    //服务器配置nginx实现代理服务
    let a = document.createElement("a");
    console.log(url);
    a.href = url;
    a.download = name;
    a.click();
},

script 写法二 (下载的目标文件未做好跨域处理)

aDownload(name, url) {
    var x = new XMLHttpRequest();
    x.open("GET", url, true);
    x.responseType = 'blob';
    x.onload = function () {
        console.log('控制台下载完成,前端显示下载');
        var url = window.URL.createObjectURL(x.response)
        var a = document.createElement('a');
        a.href = url
        a.download = name; //下载后的文件名
        a.click()
    }
    x.send();
    console.log('控制台开始下载');
},

3.本地配置跨域

本地配置跨域骗过浏览器

aDownload(name, url) { 
    //本地配置nginx实现代理服务
    let _url = url.split(url.match(/:\d+/g)[0])[1]          //处理本地环境浏览器截掉协议域名端口号
    let a = document.createElement("a");
    a.href = _url;
    a.download = name;
    a.click();
},

本地跨域设置 webpack配置代理

  devServer: {
    port: "8080",
    proxy: {
      "/meeting": {
        target: "http://116.63.10.153:16005",
        pathRewrite: {
          "^/meeting": "/meeting",
        },
      },
      "/audiorec/files": {
        target: "http://116.63.10.153:11080",
        pathRewrite: {
          "^/audiorec/files": "/audiorec/files",
        },
      },
    
    },
  },

本地跨域设置 nginxk配置代理

    server {
        listen       8080; 
        server_name  localhost;
        root         C:/Users/mcq/Desktop/dist/;
        location / {
            root   C:/Users/mcq/Desktop/dist/;
            index  index.html index.html;
        }
        location /meeting/ {
            proxy_pass  http://116.63.10.153:16005;
        }
        location /audiorec/files/ {
            proxy_pass  http://116.63.10.153:11080;
            proxy_set_header Host $proxy_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }