点击文件下载（vue）

1. a 标签的 h5 新属性 download

// filename 规定作为文件名来使用的文本。
// href 必填
<a href="balabalabala" download="filename">

但是我的文件不在网页的域名下，点击 a 标签直接显示预览页面，可以手动下载，但是这样就不可以控制文件名称了
2.参考：https://blog.csdn.net/qq_44757978/article/details/103098220

//安装
npm install downloadjs

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

//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];
        }

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

// 官网传参时，只有一个参数，即：只有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?

全局引入

// main.js
	import download from 'downloadjs'
	Vue.prototype.$download = download

页面使用

// aaa.vue
	filesDownload (url, name) {
		let str=url.split("/").pop().split("?")[0]
		let strType=String(str.substring(str.indexOf(".")).trim())
		this.$download(url, name, strType)
    }

function aaa() {
	//salaryExcel 接口返回blob数据流
	salaryExcel({titleId: this.id}).then(res => {
            // type 为需要导出的文件类型，此处为xlsx表格类型
            const blob = new Blob( [res], {type: 'application/x-xlsx'} )
            // 兼容不同浏览器的URL对象
            const url = window.URL || window.webkitURL || window.moxURL
            // 创建下载链接
            const downloadHref = url.createObjectURL(blob)
            // 创建a标签并为其添加属性
            let downloadLink = document.createElement('a')
            downloadLink.href = downloadHref
            //this.fileName 自定义文件名称
            downloadLink.download = `${this.fileName}.xlsx`
            // 触发点击事件执行下载
            downloadLink.click()
        }).catch(err => {
            console.log(err)
        })
}