如何使用download.js

  1. 下载好download.js
  2. 把download.js文件放到你vue项目中，一般我是放在 static 文件夹中
  3. 在你需要使用下载方法的组件中引入
//使用下载方法的组件
//定义一个按钮
 <el-button @click="downloadFile(url,name)"> 下载</el-button>     `
//使用下载方法的组件
<script>
  import Download from  '../../../../static/download

//（“Download”方法也是可以自己定义随便定义的，路径自己定义好）
 
 //在methods中定义点事件



//需要使用下载方法的组件
 methods: {
    	downloadFile(url,name){
    //使用字符串方法处理url获取文件类型 url为文件的地址链接  name为要设置的文件名称
    //我使用的url是这样的https://***.***.cn/**/api/common/files/88584712-ec31-4c50-81b8-b7e618f60409.cdr*
           let str=url.split("/").pop().split("?")[0]  //88584712-ec31-4c50-81b8-b7e618f60409.cdr
     	   let strType=String(str.substring(str.indexOf(".")).trim())  //.cdr  文件类型
// 使用上面引入的 Download 下载的方法 url为文件的地址链接  name为要设置的文件名称  strType为文件类型
    	   Download(url, name,strType);

  	  },
    }
</script>

此时已经能实习下载的功能了，但是 打开下载后的文件发现 ，内容确实url 地址

问题一：download.js问题之文件下载后内容是url地址

查看download.js 源码发现
官网在传参时，只有一个参数，即：只有url，没有name和strType等参数

//download.js 
// 源码片段
url = !strFileName && !strMimeType && payload,

所以我直接对源文件进行修改

//download.js 
//直接改了源码
		var self = window, // this script is only for browsers anyway...  这个脚本只适用于浏览器…
            defaultMime = "application/octet-stream", // this default mime also triggers iframe downloads   这个默认的mime也会触发iframe下载
            mimeType = strMimeType || defaultMime,
            payload = data,
            //直接对url 进行修改
           // url = !strFileName && !strMimeType && payload 改为
			url = payload,  //改后
            anchor = document.createElement("a"),
            toString = function(a) { return String(a); },
            myBlob = (self.Blob || self.MozBlob || self.WebKitBlob || toString),
            fileName = strFileName, 
            blob,
            reader;
        myBlob = myBlob.call ? myBlob.bind(self) : Blob;

        if (String(this) === "true") { //反向参数，允许下载。绑定(true，“text/xml”，“export.xml”)作为回调
            payload = [payload, mimeType];
            mimeType = payload[0];
            payload = payload[1];
        }

再试了下，可以了，内容也不是 url 啦 也能下载文件了，但是 老板要求下载的时候需要具体的文件名，我有崩溃了，继续来看源码，发现在源码上对文件名进行了修改，修改成了源文件的名称，那我就只能改源码了！

问题二：download.js问题之文件下载后定义的文件名问题

源码

if(url && url.length< 2048){ // if no filename and no mime, assume a url was passed as the only argument
		fileName = url.split("/").pop().split("?")[0];
		...
		...
		...
	} // end if url?

我们需要修改第二行的 fileName = url.split("/").pop().split("?")[0];

// 官网传参时，只有一个参数，即：只有url，没有name等参数
 if (url && url.length < 2048) { //if no filename and no mime, assume a url was passed as the only argument
            // fileName = url.split("/").pop().split("?")[0]; 改为
            fileName = strFileName + strMimeType; //改后 strFileName为传进来的文件名称   strMimeType为传进来的文件类型 
            anchor.href = url; // assign href prop to temp anchor
            console.log(anchor.href, url)
            if (anchor.href.indexOf(url) !== -1) { // 如果浏览器确定这是一个可能有效的url路径: 如果url中有中文的字符串
                var ajax = new XMLHttpRequest();
                ajax.open("GET", url, true);
                ajax.responseType = 'blob';
                ajax.onload = function(e) {
                    download(e.target.response, fileName, defaultMime);
                };
                setTimeout(function() { ajax.send(); }, 0); // 允许设置自定义ajax头使用返回:
                return ajax;
            } // end if valid url?
        } // end if url?

到现在就可以完成了文件下载，并且自定义文件名的操作！有个弊端
如果是 url 不能有中文字节 ！如果有中文字节

anchor.href 、 url 后会发现，两个String不一样了

第一次写文档 ，如果有什么不对 ，敬请体谅和指出！谢谢 大猿们！！