a标签down下载视频会直接打开
时间: 2023-08-06 11:03:17 浏览: 69
a标签的下载属性(downloads)可以用来指定下载文件的名称,但是它并不能保证所有浏览器都支持该属性。在某些浏览器中,特别是移动设备上的浏览器,点击a标签下载视频可能会直接打开视频而不是下载。为了解决这个问题,可以使用JavaScript来触发文件下载。你可以使用XMLHttpRequest对象来获取视频文件的二进制数据,然后使用FileSaver.js库中的saveAs函数将数据保存为文件并下载到本地。以下是一个示例代码:
```javascript
export function downloadVideo(url) {
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onload = () => {
if (xhr.status === 200) {
const blob = xhr.response;
const fileName = 'video.mp4'; // 设置下载的文件名
saveAs(blob, fileName); // 使用FileSaver.js保存文件并下载
}
};
xhr.send();
}
function saveAs(blob, fileName) {
if (window.navigator.msSaveOrOpenBlob) {
// 兼容IE浏览器
window.navigator.msSaveOrOpenBlob(blob, fileName);
} else {
// 其他浏览器
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = fileName;
link.style.display = 'none';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(link.href);
}
}
```
你可以调用`downloadVideo`函数并传入视频的URL来实现下载视频而不是直接打开。请注意,这个方法在某些浏览器上可能仍然无法正常工作,因为浏览器对于跨域下载的限制可能会导致下载失败。在这种情况下,你可能需要通过服务器端来提供视频文件的下载链接。
#### 引用[.reference_title]
- *1* [js 使用a标签下载文件或打开后台返回的下载链接](https://blog.csdn.net/wh20141212/article/details/124607706)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [<a>标签下载download 浏览器打开文件或者下载文件的区别](https://blog.csdn.net/qiao_qiao_happy/article/details/117035187)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [使用h5 <a>标签 href='url' download 下载踩过的坑](https://blog.csdn.net/yiyan12/article/details/80902945)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]