vue 使用download.js 问题之 文件下载后内容是url地址 和 没有文件类型
如何使用download.js下载好download.js把download.js文件放到你vue项目中,一般我是放在 static 文件夹中在你需要使用下载方法的组件中引入//使用下载方法的组件//定义一个按钮<el-button @click="downloadFile(url,name)"> 下载</el-button>`//使用下载方...
·
如何使用download.js
- 下载好download.js
- 把download.js文件放到你vue项目中,一般我是放在 static 文件夹中
- 在你需要使用下载方法的组件中引入
//使用下载方法的组件
//定义一个按钮
<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不一样了
第一次写文档 ,如果有什么不对 ,敬请体谅和指出!谢谢 大猿们!!
参考文档:https://blog.csdn.net/yan263364/article/details/89335536
更多推荐
已为社区贡献4条内容
所有评论(0)