更新下载相关

onresize · May 24, 2024 · 891a108 · 891a108
1 parent 8e1ceb1
commit 891a108
Show file tree

Hide file tree

Showing 4 changed files with 205 additions and 0 deletions.
diff --git a/docs/.vuepress/config/silder.js b/docs/.vuepress/config/silder.js
@@ -51,6 +51,7 @@ export default [
       '/技术总结/踩坑总结/移动端适配布局',
       '/技术总结/踩坑总结/link标签几个优化性能的使用方法',
       '/技术总结/踩坑总结/大文件上传分片断点续传',
+      '/技术总结/踩坑总结/下载相关',
       '/技术总结/踩坑总结/base64相关',
       '/技术总结/踩坑总结/微前端',
       '/技术总结/踩坑总结/iframe有什么问题',

diff --git a/docs/.vuepress/public/AA_mdPics/file-change.min.png b/docs/.vuepress/public/AA_mdPics/file-change.min.png
diff --git a/docs/.vuepress/public/AA_mdPics/file.min.png b/docs/.vuepress/public/AA_mdPics/file.min.png
diff --git a/docs/技术总结/踩坑总结/下载相关.md b/docs/技术总结/踩坑总结/下载相关.md
@@ -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>