-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
127 additions
and
39 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,87 @@ | ||
# 前端文件下载方法总结 | ||
|
||
前端涉及到的文件下载场景非常多,本文将介绍几种常见的前端文件下载方法,并探讨它们的优缺点。 | ||
|
||
## 1. 使用 `<a>` 标签 | ||
|
||
通过 `<a>` 标签的 `download` 属性实现文件下载是最简单且常用的方法。 | ||
|
||
### 示例代码 | ||
|
||
``` | ||
<a href="http://www.example.com/sample.pdf" download="SampleFile.pdf">下载</a> | ||
``` | ||
|
||
### 注意事项 | ||
|
||
- `<a>` 标签的 `download` 属性只能用于**同源**文件。对于跨域的资源,如图片、音视频等,浏览器会默认进行预览而不是下载。 | ||
|
||
- 可以通过 JavaScript 动态创建 `<a>` 标签来触发下载: | ||
|
||
```javascript | ||
const a = document.createElement('a'); | ||
a.href = 'http://www.example.com/sample.pdf'; | ||
a.download = 'SampleFile.pdf'; | ||
a.click(); | ||
``` | ||
|
||
## 2. 使用 `window.open()` | ||
|
||
`window.open()` 方法也可以用于触发文件下载,但其行为类似于在新标签页中打开资源。 | ||
|
||
### 示例代码 | ||
|
||
```js | ||
window.open('http://www.example.com/sample.pdf', '_blank'); | ||
``` | ||
|
||
### 注意事项 | ||
|
||
- 不能下载 HTML、XML 等会被浏览器当作文档解析的文件类型,因为这些文件会在新标签页中直接打开。 | ||
- 与 `<a>` 标签类似,不能下载跨域文件。 | ||
|
||
## 3. 使用 `location.href` | ||
|
||
直接通过修改 `location.href` 也可以触发下载,但这种方法会导致当前页面跳转。 | ||
|
||
### 示例代码 | ||
|
||
```js | ||
location.href = 'http://www.example.com/sample.pdf'; | ||
``` | ||
|
||
## 4. 使用 `XMLHttpRequest` 或 Fetch API | ||
|
||
通过 AJAX 请求文件内容,然后使用 JavaScript 创建一个可下载的链接。 | ||
|
||
### 示例代码 | ||
|
||
``` | ||
javascriptCopy codeconst xhr = new XMLHttpRequest(); | ||
xhr.open('GET', 'http://www.example.com/sample.pdf', true); | ||
xhr.responseType = 'blob'; // 重要:设置响应类型为 Blob | ||
xhr.onload = function () { | ||
if (this.status === 200) { | ||
const blob = new Blob([this.response], { type: 'application/pdf' }); | ||
const downloadUrl = URL.createObjectURL(blob); | ||
const a = document.createElement('a'); | ||
a.href = downloadUrl; | ||
a.download = 'SampleFile.pdf'; | ||
document.body.appendChild(a); | ||
a.click(); | ||
URL.revokeObjectURL(downloadUrl); // 清理资源 | ||
} | ||
}; | ||
xhr.send(); | ||
``` | ||
|
||
### 注意事项 | ||
|
||
- 使用 `Blob` 和 `URL.createObjectURL()` 可以处理任意类型的文件,并允许设置自定义文件名。 | ||
- 需要在下载完成后使用 `URL.revokeObjectURL()` 来释放由 `URL.createObjectURL()` 创建的对象 URL。 | ||
|
||
## 总结 | ||
|
||
虽然有多种实现文件下载的方法,但大多数情况下,最终都依赖于浏览器的内置下载功能。选择哪种方法取决于具体的应用场景和需求。 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,7 @@ | ||
# 更新日志 | ||
|
||
- `2024-03-21` - Git保存修改并提交 | ||
|
||
- `2024-03-19` - 节流防抖、es6 | ||
|
||
- `2024-03-17` - 网络基础知识、内存泄漏 | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -103,8 +103,6 @@ const setNewEndTime = useRunInJS(() => { | |
}, [endTime]); | ||
``` | ||
|
||
|
||
|
||
## 实例Demo | ||
|
||
```tsx | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters