70 lines
2.1 KiB
Plaintext
70 lines
2.1 KiB
Plaintext
<template>
|
||
<div>
|
||
<div class="n-layout-page-header">
|
||
<a-card :bordered="false" title="文件下载">
|
||
文件下载示例，用于各种场景下载文件或者图片
|
||
</a-card>
|
||
</div>
|
||
<a-card :bordered="false" class="mt-4 proCard">
|
||
<a-alert :show-icon="false" message="后台接口文件流下载" type="info">
|
||
<template #description>
|
||
<a-button class="mt-2" type="primary" @click="downloadFile">文件流下载</a-button>
|
||
</template>
|
||
</a-alert>
|
||
<a-divider />
|
||
<a-alert :show-icon="false" message="文件地址下载" type="info">
|
||
<template #description>
|
||
<a-button class="mt-2" type="primary" @click="downloadFileUrl">文件地址下载</a-button>
|
||
</template>
|
||
</a-alert>
|
||
<a-divider />
|
||
<a-alert :show-icon="false" message="base64流下载" type="info">
|
||
<template #description>
|
||
<a-button class="mt-2" type="primary" @click="downloadFileBase64">base64流下载</a-button>
|
||
</template>
|
||
</a-alert>
|
||
<a-divider />
|
||
<a-alert
|
||
:show-icon="false"
|
||
message="图片Url下载，如果有跨域问题，需要先处理图片跨域，才能下载"
|
||
type="info"
|
||
>
|
||
<template #description>
|
||
<a-button class="mt-2" type="primary" @click="downloadFileImgUrl">图片Url下载</a-button>
|
||
</template>
|
||
</a-alert>
|
||
</a-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import {
|
||
downloadByUrl,
|
||
downloadByData,
|
||
downloadByBase64,
|
||
downloadByOnlineUrl,
|
||
} from '@/utils/file/download';
|
||
import imgBase64 from './imgBase64';
|
||
|
||
const getName = new Date().valueOf();
|
||
|
||
function downloadFile() {
|
||
downloadByData('测试下载文件流', `${getName}-file.txt`);
|
||
}
|
||
|
||
function downloadFileUrl() {
|
||
downloadByUrl({
|
||
url: 'https://naive-ui-admin-docs.vercel.app/logo.png',
|
||
target: '_self',
|
||
});
|
||
}
|
||
|
||
function downloadFileBase64() {
|
||
downloadByBase64(imgBase64, `${getName}.png`);
|
||
}
|
||
|
||
function downloadFileImgUrl() {
|
||
downloadByOnlineUrl('https://naive-ui-admin-docs.vercel.app/logo.png', `${getName}.png`);
|
||
}
|
||
</script>
|