初始版本提交
This commit is contained in:
66
src/views/demo/feat/download/index.vue
Normal file
66
src/views/demo/feat/download/index.vue
Normal file
@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<PageWrapper title="文件下载示例">
|
||||
<a-alert message="根据后台接口文件流下载" />
|
||||
<a-button type="primary" class="my-4" @click="handleDownByData"> 文件流下载 </a-button>
|
||||
|
||||
<a-alert message="根据文件地址下载文件" />
|
||||
<a-button type="primary" class="my-4" @click="handleDownloadByUrl"> 文件地址下载 </a-button>
|
||||
|
||||
<a-alert message="base64流下载" />
|
||||
<a-button type="primary" class="my-4" @click="handleDownloadByBase64"> base64流下载 </a-button>
|
||||
|
||||
<a-alert message="图片Url下载,如果有跨域问题,需要处理图片跨域" />
|
||||
<a-button type="primary" class="my-4" @click="handleDownloadByOnlineUrl">
|
||||
图片Url下载
|
||||
</a-button>
|
||||
</PageWrapper>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import {
|
||||
downloadByUrl,
|
||||
downloadByData,
|
||||
downloadByBase64,
|
||||
downloadByOnlineUrl,
|
||||
} from '/@/utils/file/download';
|
||||
import imgBase64 from './imgBase64';
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
import { Alert } from 'ant-design-vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: { PageWrapper, [Alert.name]: Alert },
|
||||
setup() {
|
||||
function handleDownByData() {
|
||||
downloadByData('text content', 'testName.txt');
|
||||
}
|
||||
function handleDownloadByUrl() {
|
||||
downloadByUrl({
|
||||
url: 'https://codeload.github.com/anncwb/vue-vben-admin-doc/zip/master',
|
||||
target: '_self',
|
||||
});
|
||||
|
||||
downloadByUrl({
|
||||
url: 'https://vebn.oss-cn-beijing.aliyuncs.com/vben/logo.png',
|
||||
target: '_self',
|
||||
});
|
||||
}
|
||||
|
||||
function handleDownloadByBase64() {
|
||||
downloadByBase64(imgBase64, 'logo.png');
|
||||
}
|
||||
|
||||
function handleDownloadByOnlineUrl() {
|
||||
downloadByOnlineUrl(
|
||||
'https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5944817f47b8408e9f1442ece49d68ca~tplv-k3u1fbpfcp-watermark.image',
|
||||
'logo.png',
|
||||
);
|
||||
}
|
||||
return {
|
||||
handleDownloadByUrl,
|
||||
handleDownByData,
|
||||
handleDownloadByBase64,
|
||||
handleDownloadByOnlineUrl,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user