Skip to content

P
pica.cloud.web-education-admin
提交 27368773 编写于 作者: bo.dang's avatar bo.dang
浏览文件
操作

下载功能优化

上级 10d72366
隐藏空白字符变更
内嵌 并排
正在显示 包含 275 行增加 和 19 行删除
src/utils/download/download2.js 0 → 100644
浏览文件 @ 27368773
//download.js v3.0, by dandavis; 2008-2014. [CCBY2] see http://danml.com/download.html for tests/usage
// v1 landed a FF+Chrome compat way of downloading strings to local un-named files, upgraded to use a hidden frame and optional mime
// v2 added named files via a[download], msSaveBlob, IE (10+) support, and window.URL support for larger+faster saves than dataURLs
// v3 added dataURL and Blob Input, bind-toggle arity, and legacy dataURL fallback was improved with force-download mime and base64 support
// data can be a string, Blob, File, or dataURL
function download(data, strFileName, strMimeType) {
var self = window, // this script is only for browsers anyway...
u = "application/octet-stream", // this default mime also triggers iframe downloads
m = strMimeType || u,
x = data,
D = document,
a = D.createElement("a"),
z = function(a){return String(a);},
B = self.Blob || self.MozBlob || self.WebKitBlob || z,
BB = self.MSBlobBuilder || self.WebKitBlobBuilder || self.BlobBuilder,
fn = strFileName || "download",
blob,
b,
ua,
fr;
//if(typeof B.bind === 'function' ){ B=B.bind(self); }
if(String(this)==="true"){ //reverse arguments, allowing download.bind(true, "text/xml", "export.xml") to act as a callback
x=[x, m];
m=x[0];
x=x[1];
}
//go ahead and download dataURLs right away
if(String(x).match(/^data\:[\w+\-]+\/[\w+\-]+[,;]/)){
return navigator.msSaveBlob ? // IE10 can't do a[download], only Blobs:
navigator.msSaveBlob(d2b(x), fn) :
saver(x) ; // everyone else can save dataURLs un-processed
}//end if dataURL passed?
try{
blob = x instanceof B ?
x :
new B([x], {type: m}) ;
}catch(y){
if(BB){
b = new BB();
b.append([x]);
blob = b.getBlob(m); // the blob
}
}
function d2b(u) {
var p= u.split(/[:;,]/),
t= p[1],
dec= p[2] == "base64" ? atob : decodeURIComponent,
bin= dec(p.pop()),
mx= bin.length,
i= 0,
uia= new Uint8Array(mx);
for(i;i<mx;++i) uia[i]= bin.charCodeAt(i);
return new B([uia], {type: t});
}
function saver(url, winMode){
if ('download' in a) { //html5 A[download]
a.href = url;
a.setAttribute("download", fn);
a.innerHTML = "downloading...";
D.body.appendChild(a);
setTimeout(function() {
a.click();
D.body.removeChild(a);
if(winMode===true){setTimeout(function(){ self.URL.revokeObjectURL(a.href);}, 250 );}
}, 66);
return true;
}
//do iframe dataURL download (old ch+FF):
var f = D.createElement("iframe");
D.body.appendChild(f);
if(!winMode){ // force a mime that will download:
url="data:"+url.replace(/^data:([\w\/\-\+]+)/, u);
}
f.src = url;
setTimeout(function(){ D.body.removeChild(f); }, 333);
}//end saver
if (navigator.msSaveBlob) { // IE10+ : (has Blob, but not a[download] or URL)
return navigator.msSaveBlob(blob, fn);
}
if(self.URL){ // simple fast and modern way using Blob and URL:
saver(self.URL.createObjectURL(blob), true);
}else{
// handle non-Blob()+non-URL browsers:
if(typeof blob === "string" || blob.constructor===z ){
try{
return saver( "data:" + m + ";base64," + self.btoa(blob) );
}catch(y){
return saver( "data:" + m + "," + encodeURIComponent(blob) );
}
}
// Blob but not URL:
fr=new FileReader();
fr.onload=function(e){
saver(this.result);
};
fr.readAsDataURL(blob);
}
return true;
} /* end download() */
src/views/yqrange/live-manage.vue
浏览文件 @ 27368773
......@@ -183,7 +183,7 @@
<!--<el-col :span="1">-->
<!--</el-col>-->
<el-button @click="download('model')" size="small" type="text"><img style="vertical-align: middle;margin-left: 56px;width: 25%;height: 25%;" src="../../assets/image/icon_download.png" />下载</el-button>
<el-button @click="downloadV('model')" size="small" type="text"><img style="vertical-align: middle;margin-left: 56px;width: 25%;height: 25%;" src="../../assets/image/icon_download.png" />下载</el-button>
</div>
<div style="margin-left:30px;">
......@@ -517,7 +517,7 @@ export default {
},
// 下载
download(type){
downloadV(type){
let downloadUrl = "";
if (type == "model") {
if(vm.numberShowFlag){
......@@ -542,24 +542,37 @@ export default {
downloadVideo(downloadUrl){
if(downloadUrl == null || downloadUrl == ""){
vm.$message.warning("下载地址不正确");
return;
}
// if(downloadUrl == null || downloadUrl == ""){
// vm.$message.warning("下载地址不正确");
// return;
// }
// var link = document.createElement("a");
// downloadUrl = "http://1302268825.vod2.myqcloud.com/22ae71e7vodcq1302268825/317cf9115285890804733258933/f0.mp4";
// var url = downloadUrl;
// link.href = url;
// if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion .split(";")[1].replace(/[ ]/g,"")=="MSIE9.0" ||
// navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion .split(";")[1].replace(/[ ]/g,"")=="MSIE10.0"){
// window.open(url,'blank')
// }else if (navigator.userAgent.indexOf("Firefox/") > -1){
// window.open(url,'blank')
// } else{
// window.open(url,'_blank')
// }
// let url = window.URL.createObjectURL(new Blob([data]))
// let link = document.createElement('a')
// link.style.display = 'none'
// link.href = "https://test1-videos.yunqueyi.com/video/mp4/protal/project/20200708120235951.mp4";
// link.setAttribute('download', '20200708120235951.mp4')
//
// document.body.appendChild(link)
// link.click()
downloadUrl = "https://test1-videos.yunqueyi.com/video/mp4/protal/project/20200708120235951.mp4"
// let fileName = "20200708120235951.mp4";
let fileName = vm.getFileName(downloadUrl);
vm.downloadfile(downloadUrl, fileName, vm.getFileType(fileName));
var link = document.createElement("a");
link.download = "f0.mp4";
var url = downloadUrl;
link.href = url;
if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion .split(";")[1].replace(/[ ]/g,"")=="MSIE9.0" ||
navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion .split(";")[1].replace(/[ ]/g,"")=="MSIE10.0"){
window.open(url,'blank')
}else if (navigator.userAgent.indexOf("Firefox/") > -1){
window.open(url,'blank')
} else{
// link.click();
window.open(url,'blank')
}
},
......@@ -928,7 +941,118 @@ export default {
url = this.guestUrl;
}
window.open(url);
},
/*
* 使用download.js 强制浏览器下载图片、视频等文件
* @param {any} url url链接地址
* @param {any} strFileName 文件名
* @param {any} strMimeType 文件类型
*/
downloadfile(url, strFileName, strMimeType) {
var xmlHttp = null;
if (window.ActiveXObject) {
// IE6, IE5 浏览器执行代码
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlHttp = new XMLHttpRequest();
}
//2.如果实例化成功，就调用open（）方法：
if (xmlHttp != null) {
xmlHttp.open("get", url, true);
xmlHttp.responseType = 'blob';//关键
xmlHttp.send();
xmlHttp.onreadystatechange = doResult; //设置回调函数
}
function doResult() {
if (xmlHttp.readyState == 4) { //4表示执行完成
if (xmlHttp.status == 200) { //200表示执行成功
download(xmlHttp.response, strFileName, strMimeType);
}
}
}
},
getFileName(url){
const urlArray = url.split("/");
const length = urlArray.length;
const fileName = urlArray[length-1];
return fileName;
},
getFileType(fileName) {
// 后缀获取
let suffix = '';
// 获取类型结果
let result = '';
try {
const flieArr = fileName.split('.');
suffix = flieArr[flieArr.length - 1];
} catch (err) {
suffix = '';
}
// fileName无后缀返回 false
if (!suffix) { return false; }
suffix = suffix.toLocaleLowerCase();
// 图片格式
const imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif'];
// 进行图片匹配
result = imglist.find(item => item === suffix);
if (result) {
return 'image';
}
// 匹配txt
const txtlist = ['txt'];
result = txtlist.find(item => item === suffix);
if (result) {
return 'txt';
}
// 匹配 excel
const excelist = ['xls', 'xlsx'];
result = excelist.find(item => item === suffix);
if (result) {
return 'excel';
}
// 匹配 word
const wordlist = ['doc', 'docx'];
result = wordlist.find(item => item === suffix);
if (result) {
return 'word';
}
// 匹配 pdf
const pdflist = ['pdf'];
result = pdflist.find(item => item === suffix);
if (result) {
return 'pdf';
}
// 匹配 ppt
const pptlist = ['ppt', 'pptx'];
result = pptlist.find(item => item === suffix);
if (result) {
return 'ppt';
}
// 匹配 视频
const videolist = ['mp4', 'm2v', 'mkv', 'rmvb', 'wmv', 'avi', 'flv', 'mov', 'm4v'];
result = videolist.find(item => item === suffix);
if (result) {
return 'video';
}
// 匹配 音频
const radiolist = ['mp3', 'wav', 'wmv'];
result = radiolist.find(item => item === suffix);
if (result) {
return 'radio';
}
// 其他 文件类型
return 'other';
}
}
};
</script>
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或