javascript - 包含文件名的 XMLHttpRequest 下载 (JS)
问题描述
我试图在这个下载脚本中包含两个函数,但我无法让它工作
1- 下载结束时(动画下载栏)在示例浏览器中自动开始下载:window.open ()
. 但这包括脚本中的默认名称。
2-当检测到死链接或大小为 0 字节时,request.open ()
如果可能,抛出警告。
任何帮助都会非常有用,问候。
var _OBJECT_URL;
document.querySelector('#download-button').addEventListener('click', function() {
var request = new XMLHttpRequest();
request.addEventListener('readystatechange', function(e) {
if(request.readyState == 2 && request.status == 200) {
document.querySelector('#start-download').style.display = 'block';
document.querySelector('#download-button').style.display = 'none';
}
else if(request.readyState == 3) {
document.querySelector('#download-progress-container').style.display = 'block';
document.querySelector('#start-download').style.display = 'none';
}
else if(request.readyState == 4) {
_OBJECT_URL = URL.createObjectURL(request.response);
document.querySelector('#save-file').setAttribute('href', _OBJECT_URL);
// NAME default
document.querySelector('#save-file').setAttribute('download', 'MyNameFile.zp');
// OPEN FILE IN BROWSER
//Open file, start download automatically sample: window.open(_OBJECT_URL)
// and that includes the default name "MyFilename.zip"
document.querySelector('#save-file').style.display = 'block';
document.querySelector('#download-progress-container').style.display = 'none';
setTimeout(function() {
window.URL.revokeObjectURL(_OBJECT_URL);
document.querySelector('#download-button').style.display = 'block';
document.querySelector('#save-file').style.display = 'none';
}, 60*1000);
}
});
request.addEventListener('progress', function(e) {
var percent_complete = (e.loaded / e.total)*100;
document.querySelector('#download-progress').style.width = percent_complete + '%';
});
request.responseType = 'blob';
request.open('get', 'https://www.google.com.sv/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png');
request.send();
// HERE NOTICE DEAD LINK
//If the link is dead, notify with some notice
});
body {
margin: 0;
font-family: "Titillium Web";
font-size: 15px;
}
#demo-container {
width: 400px;
margin: 60px auto;
}
#download-button {
background-color: white;
color: #2980b9;
border: 2px solid #2980b9;
font-family: inherit;
outline: none;
min-width: 100px;
padding: 10px;
font-size: inherit;
border-radius: 2px;
cursor: pointer;
display: block;
margin: 0 auto;
}
#start-download {
text-align: center;
display: none;
}
#download-progress-container {
border: 1px solid #cccccc;
padding: 4px;
display: none;
height: 20px;
}
#download-progress {
background-color: #2980b9;
display: inline-block;
height: 100%;
}
#save-file {
color: #2980b9;
text-decoration: none;
display: none;
text-align: center;
}
#save-file:hover {
text-decoration: underline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<body>
<div id="demo-container">
<button id="download-button">Download</button>
<div id="download-ui-container">
<div id="start-download">Starting Download..</div>
<div id="download-progress-container"><div id="download-progress"></div></div>
<a id="save-file">Save File</a>
</div>
</div>
解决方案
推荐阅读
- excel - stata:保存时工作表名称不存在
- java - Tibco 8.6 64 位 RVD 连接问题
- python-3.x - 线性时间的拓扑排序复杂度?
- c - 为了完成这个问题,我应该如何修改函数中的指针算法?
- javascript - 为什么我的隐藏表格在按钮单击时没有显示?
- python - 通过 SQL 查询传递列表时收到“错误:SQL 语句中未使用所有参数”
- html - 在横向模式下使 div 在 Y 中可滚动
- python - 在 django 中管理 helper/utils 函数及其敏感数据
- java - 将几个相同的CDI bean注入一个类?
- json - 试图让我们 XSLT 从一个简单的 JSON 响应中提取一个值,但无法启动