From 9133a8c8e4d35b729ba205d1d2a65697ef7d3956 Mon Sep 17 00:00:00 2001
From: bunny <1319900154@qq.com>
Date: Thu, 1 Aug 2024 16:57:39 +0800
Subject: [PATCH] =?UTF-8?q?page:=20=F0=9F=93=84=20=E4=B8=8B=E8=BD=BD?=
 =?UTF-8?q?=E6=96=87=E6=9C=AC=E3=80=81=E5=9B=BE=E7=89=87=E3=80=81=E8=A7=86?=
 =?UTF-8?q?=E9=A2=91demo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/test/download/downloadUtil.ts | 27 +++++++++++++
 src/views/test/download/index.vue       | 52 +++++++++++++++++++++++++
 2 files changed, 79 insertions(+)
 create mode 100644 src/views/test/download/downloadUtil.ts
 create mode 100644 src/views/test/download/index.vue

diff --git a/src/views/test/download/downloadUtil.ts b/src/views/test/download/downloadUtil.ts
new file mode 100644
index 0000000..c0abc67
--- /dev/null
+++ b/src/views/test/download/downloadUtil.ts
@@ -0,0 +1,27 @@
+export const downloadBlob = (blob: Blob, name: string) => {
+	// 创建一个下载链接并模拟点击
+	const url = URL.createObjectURL(blob);
+	const a = document.createElement('a');
+	a.href = url;
+	a.download = name;
+	document.body.appendChild(a);
+	a.click();
+
+	// 清理
+	document.body.removeChild(a);
+	URL.revokeObjectURL(url);
+};
+
+/**
+ * 导出图像
+ * @param uri
+ * @param name
+ */
+export function downloadURI(uri: string, name: string) {
+	const link = document.createElement('a');
+	link.download = name;
+	link.href = uri;
+	document.body.appendChild(link);
+	link.click();
+	document.body.removeChild(link);
+}
diff --git a/src/views/test/download/index.vue b/src/views/test/download/index.vue
new file mode 100644
index 0000000..be9df3f
--- /dev/null
+++ b/src/views/test/download/index.vue
@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { downloadBlob, downloadURI } from '@/views/test/download/downloadUtil.ts';
+
+const text = ref('文本内容...');
+const image = 'https://gips2.baidu.com/it/u=1651586290,17201034&fm=3028&app=3028&f=JPEG&fmt=auto&q=100&size=f600_800';
+const video = ref('https://videos.pexels.com/video-files/26806984/12011233_360_640_24fps.mp4');
+/**
+ * * 下载文本
+ */
+const onDownloadText = () => {
+	const blob = new Blob([text.value], { type: 'text/plain;charset=utf-8' });
+	downloadBlob(blob, '下载文本.txt');
+};
+
+/**
+ * * 下载图片
+ */
+const onDownloadImage = () => {
+	const imageBlob = fetch(image).then(res => res.blob());
+	imageBlob.then(blob => downloadBlob(blob, 'blob图片.png'));
+
+	// 如果浏览器返回的不是图片格式会跳转到图片页面
+	downloadURI(image, 'a标签图片.png');
+};
+
+/**
+ * * 下载视频
+ */
+const onDownloadVideo = () => {
+	const imageBlob = fetch(video.value).then(res => res.blob());
+	imageBlob.then(blob => downloadBlob(blob, 'blob视频.mp4'));
+
+	downloadURI(video.value, 'a标签视频.mp4');
+};
+</script>
+
+<template>
+	<div class="contain-layout">
+		<div>
+			<button class="btn btn-primary" @click="onDownloadText">下载文本</button>
+			<button class="btn btn-primary" @click="onDownloadImage">下载图片</button>
+			<button class="btn btn-primary" @click="onDownloadVideo">下载视频</button>
+		</div>
+
+		<div class="row mt-3">
+			<textarea :value="text" class="w-[400px]" />
+			<img :src="image" alt="" class="w-[150px] h-[150px]" />
+			<video :src="video" alt="" class="w-[300px] h-[300px]" />
+		</div>
+	</div>
+</template>