前端文件下载——点击下载和二进制流下载

最新推荐文章于 2024-06-23 23:55:57 发布

翻斗花园正门保安小夏

最新推荐文章于 2024-06-23 23:55:57 发布

阅读量274

点赞数 12

分类专栏：前端实现某某功能文章标签：前端

本文链接：https://blog.csdn.net/qkdgz/article/details/139442749

版权

前端实现某某功能专栏收录该内容

3 篇文章 0 订阅

订阅专栏

下载文件有两种情况：

点击文件的地址直接下载
点击文件的地址发生跳转，变成查看文件。

无论那种情况都需要获取文件的地址

https://media.w3.org/2010/05/sintel/trailer.mp4

但有时只有文件的路径

/oss/jxb/temp/tmp_13c57f0757fef1b4fdd9141fc06558c3a50fd0fa6fcd98cc_1698372495702.pdf

需要 环境变量+路径 拼接获取完整的文件地址

vue2 和 vue3 的环境配置不相同
环境配置请查看 src/.env.development文件，自行拼接

vue2+vue/cli
- ```
process.env.VUE_APP_API_BASE_URL + url
```
vue3+vite
- ```
import.meta.env.VITE_BASE_URL + url
```

点击就能下载的文件

a标签
window.location.href
window.open

a标签

// 测试视频
const video_url = 'https://media.w3.org/2010/05/sintel/trailer.mp4';
// 下载函数
function download(url,name){
	const a = document.createElement("a");
	a.href = url;
	a.download = name;
	a.click();
	a.remove();
}
	
download(video_url, ('test_video'+Date.now()))

window.location.href

window.location.href = 'https://media.w3.org/2010/05/sintel/trailer.mp4'

window.open(url, target, features)

url:打开的新窗口或标签页的 URL。可以是绝对路径或相对路径，也可以是一个完整的 URL。
target:打开链接的目标位置
- _blank:新标签或者新窗口
- _self:当前窗口打开（默认）
features: 一个字符串，包含各种以逗号分隔的特性和选项，用于控制新窗口的外观和行为。
- width,height,top,left……

// 在新标签页中打开指定 URL
window.open("https://www.example.com");

// 在新窗口中打开指定 URL，指定窗口大小
window.open("https://www.example.com", "_blank", "width=600,height=400");

不能直接下载。使用fetch

需要通过fetch或者axios发送请求，获取二进制流（blob对象），然后进行下载

fetch是浏览器内置API

const download = (url, name, callback) => {
  fetch(url)
    .then((res) => res.blob())
    .then((blob) => {
      const a = document.createElement("a");
      const objectUrl = window.URL.createObjectURL(blob);
      a.download = name;
      a.href = objectUrl;
      a.click();
      window.URL.revokeObjectURL(objectUrl);
      a.remove();
    });
};