vue文件下载及重命名

本文所讲的下载地址格式为：地址+文件名（例如：http...+ 'test.docx'）

页面代码： 

<!--map为所下载的文件信息，包括文件名、路径等 -->
<p v-down="map">这是文件名</p>    

js代码： (在main.js中写入以下代码)  

注：方法一 前端不需要考虑跨域问题，后台设置允许就行

       方法二 单独设置文件名无效，默认下载文件名为上传服务器后所返回的地址里的命名（一般会为uuid的格式，非文件原名），若大家有解决方法可以留言给博主

let baseDownloadUrl = "http://192.xxx.x.xxx:8090/"; // 域名+端口号
// 添加自定义v-down指令
Vue.directive("down", {
  inserted: (el, binding) => {
    el.style.cssText = "cursor: pointer;";
    el.addEventListener("click", () => {
    //方法一
        var xz = new XMLHttpRequest();
        xz.open("GET", baseDownloadUrl + binding.value.path, true);
        xz.responseType = "blob";
        xz.onload = function (e) {
          var url = window.URL.createObjectURL(xz.response);
          var a = document.createElement("a");
          a.href = url;
          a.download = binding.value.fileName;
          a.click();
        };
        x.send();
    //方法二
      // let link = document.createElement("a"); // 创建a标签
      // link.style.display = "none";
      // link.href = baseDownloadUrl + binding.value.path; // 设置下载地址
      // link.setAttribute("download", binding.value.fileName); // 添加downLoad属性
      // link.setAttribute("target", "_blank");
      // document.body.appendChild(link);
      // link.click();
    });
  },
});