-
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
4 changed files
with
205 additions
and
0 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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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,204 @@ | ||
--- | ||
title: 下载相关 | ||
lang: zh-CN | ||
feed: | ||
enable: true | ||
description: 下载相关 | ||
--- | ||
|
||
# 下载相关 | ||
|
||
> 本文作者:[onresize](https://github.com/onresize) | ||
<p align="center"> | ||
<img src="/AA_mdPics/file.min.png" /> | ||
</p> | ||
|
||
### `URL.createObjectURL()` | ||
- 参数:用于创建 `URL` 的 `File` 对象、`Blob` 对象或者 `MediaSource` 对象 | ||
- 静态方法创建一个 `DOMString`、返回一个表示参数中给出的对象的URL、这个URL的什么周期和创建他的窗口的document绑定、这个URL指向 `File` 对象或 `Blob` 对象 | ||
|
||
```html | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
<title>Document</title> | ||
</head> | ||
<body> | ||
<button id="btn">获取文件</button> | ||
</body> | ||
</html> | ||
|
||
<script> | ||
btn.onclick = async function () { | ||
const [fileHandle] = await window?.showOpenFilePicker({ | ||
types: [ | ||
{ | ||
description: '图片类型', | ||
accept: { | ||
'image/*': ['.png', '.gif', '.jpeg', '.jpg'], | ||
'application/*': ['.xls'] | ||
}, | ||
}, | ||
], | ||
}) | ||
// 获取文件File对象 | ||
const file = await fileHandle?.getFile() | ||
const blobUrl = URL.createObjectURL(file) | ||
// 生成预览图片地址:通过js将文件信息在本地电脑内存中变成一个预览地址临时拿去使用显示 | ||
console.log('---\n', blobUrl) | ||
} | ||
</script> | ||
``` | ||
### `URL.revokeObjectURL()` | ||
- 每次使用 URL.createObjectURL() 方法时、都会创建一个新的URL对象、当不再需要这写URL对象时、通过 URL.revokeObjectURL(url) 方法来释放、浏览器在document卸载时、会自动释放 | ||
```js | ||
let url = URL.createObjectURL(file) | ||
let a = document.createElement("a") | ||
a.style = "display: none" | ||
a.target = "_blank" | ||
a.download = fileName | ||
a.href = url | ||
document.body.appendChild(a) | ||
a.click() | ||
document.body.removeChild(a) | ||
URL.revokeObjectURL(url) | ||
``` | ||
### `将File类型转换为Blob类型` | ||
- File是Blob的子类、利用 `Blob.slice` 方法切片、也可以直接用 `File.slice` 方法切片 | ||
```js | ||
// html代码 | ||
<input type="file" id="file"> | ||
// js代码 | ||
document.querySelector('#file').onchange = function (e) { | ||
const file = e.target.files[0] | ||
console.log(new Blob([file])) | ||
} | ||
``` | ||
### `FileReader()将文件转成base64编码` | ||
1.读取并显示文件 | ||
- `readAsText()`:将文件中的数据读取成文本数据 | ||
- `readAsBinaryString()`:读取为二进制字符串 | ||
- `readAsDataURL()`:读取为DataURL字符串 | ||
- `readAsArrayBuffer()`:读取为一个ArrayBuffer对象 | ||
- `abort()`:终端读取操作 | ||
2.检测读取事件 | ||
- `onabort`:数据读取中断时触发 | ||
- `onprogress`:数据读取中触发 | ||
- `onerror`:数据读取出错时触发 | ||
- `onload`:数据读取完成并成功时触发 | ||
- `onloadstart`:数据开始读取时触发 | ||
- `onloadend`:数据读取完成时触发,不论成功还是失败 | ||
```js | ||
const fr = new FileReader() | ||
fr.readAsDataURL(file) | ||
fr.onload = () => { | ||
console.log('base64:',fr.result) | ||
} | ||
``` | ||
### `显示图片部分略缩图效果` | ||
```js | ||
function iptChange(e) { | ||
const file = e.target.files[0] | ||
const _sliceBlob = new Blob([file]).slice(0, 5000) | ||
const _sliceFile = new File([_sliceBlob], 'yzw.png') | ||
const fr = new FileReader() | ||
fr.readAsDataURL(_sliceFile) | ||
fr.onload = () => { | ||
console.log(fr.result) | ||
} | ||
} | ||
``` | ||
### `jszip实现多文件压缩包下载` | ||
```vue | ||
<template> | ||
<el-button @click="downloadByZip">批量下载zip</el-button> | ||
</template> | ||
<script setup> | ||
import "/public/js/jszip.min.js"; | ||
const download = ["../../assets/img/wx.jpg", "../../assets/img/zfb.jpg"]; | ||
const downloadByZip = async () => { | ||
const zip = new JSZip(); | ||
for (let i = 0; i < download.length; i++) { | ||
const blob = await getImgBlob(download[i]); | ||
console.log(blob); | ||
zip.file(`${i}.png`, blob, { | ||
base64: true, | ||
}); | ||
} | ||
zip | ||
.generateAsync({ | ||
type: "blob", | ||
}) | ||
.then((content) => { | ||
console.log(content); | ||
location.href = URL.createObjectURL(content); | ||
}); | ||
}; | ||
const getImgBlob = (url) => { | ||
return new Promise((resolve) => { | ||
const xhr = new XMLHttpRequest(); | ||
xhr.open("get", url, true); | ||
xhr.responseType = "blob"; | ||
xhr.onload = () => { | ||
resolve(xhr.response); | ||
}; | ||
xhr.send(); | ||
}); | ||
}; | ||
</script> | ||
``` | ||
### `常用的下载方法` | ||
```js | ||
function downLoadFile(file) { | ||
let url = URL.createObjectURL(file) | ||
let a = document.createElement("a") | ||
a.style = "display: none" | ||
a.target = "_blank" | ||
a.download = true | ||
a.href = url | ||
document.body.appendChild(a) | ||
a.click() | ||
document.body.removeChild(a) | ||
URL.revokeObjectURL(url) | ||
} | ||
function linkFile(url, fileName, data = {}) { | ||
let a = document.createElement("a") | ||
a.style = "display: none" | ||
a.target = "_blank" | ||
//a.download = fileName | ||
a.href = url | ||
document.body.appendChild(a) | ||
a.click() | ||
document.body.removeChild(a) | ||
} | ||
``` | ||
### `文件url在浏览器是预览还是下载取决什么` | ||
- [更多参考](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Disposition) | ||
- 文件url在浏览器是预览还是下载取决后端返回这个url的响应头 | ||
- 响应头设置 `Content-Disposition: inline` 为浏览器打开 `预览` | ||
- 响应头设置 `Content-Disposition: attachment` 为浏览器打开 `下载` | ||
### `文件传给后端的转化关系图` | ||
<p align="center"> | ||
<img src="/AA_mdPics/file-change.min.png" /> | ||
</p> |