点击文件下载(vue)
a 标签的 h5 新属性download// filename 规定作为文件名来使用的文本。// href 必填<a href="balabalabala" download="filename">但是我的文件不在网页的域名下,点击 a 标签直接显示预览页面,可以手动下载,但是这样就不可以控制文件名称了...
·
- 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)
})
}
更多推荐
已为社区贡献2条内容
所有评论(0)