| 提交 | 用户 | age | ||
| db3092 | 1 | <template> |
| 31ff05 | 2 | <PageWrapper title="文件下载示例"> |
| db3092 | 3 | <a-alert message="根据后台接口文件流下载" /> |
| V | 4 | <a-button type="primary" class="my-4" @click="handleDownByData"> 文件流下载 </a-button> |
| 5 | ||
| 6 | <a-alert message="根据文件地址下载文件" /> | |
| 7 | <a-button type="primary" class="my-4" @click="handleDownloadByUrl"> 文件地址下载 </a-button> | |
| a161bf | 8 | |
| V | 9 | <a-alert message="base64流下载" /> |
| 10 | <a-button type="primary" class="my-4" @click="handleDownloadByBase64"> base64流下载 </a-button> | |
| 661db0 | 11 | |
| V | 12 | <a-alert message="图片Url下载,如果有跨域问题，需要处理图片跨域" /> |
| 13 | <a-button type="primary" class="my-4" @click="handleDownloadByOnlineUrl"> | |
| 14 | 图片Url下载 | |
| 15 | </a-button> | |
| 31ff05 | 16 | </PageWrapper> |
| db3092 | 17 | </template> |
| V | 18 | <script lang="ts"> |
| 19 | import { defineComponent } from 'vue'; | |
| 661db0 | 20 | import { |
| V | 21 | downloadByUrl, |
| 22 | downloadByData, | |
| 23 | downloadByBase64, | |
| 24 | downloadByOnlineUrl, | |
| 25 | } from '/@/utils/file/download'; | |
| a161bf | 26 | import imgBase64 from './imgBase64'; |
| 31ff05 | 27 | import { PageWrapper } from '/@/components/Page'; |
| 6392b7 | 28 | import { Alert } from 'ant-design-vue'; |
| 31ff05 | 29 | |
| db3092 | 30 | export default defineComponent({ |
| 6392b7 | 31 | components: { PageWrapper, [Alert.name]: Alert }, |
| db3092 | 32 | setup() { |
| V | 33 | function handleDownByData() { |
| 34 | downloadByData('text content', 'testName.txt'); | |
| 35 | } | |
| 36 | function handleDownloadByUrl() { | |
| 37 | downloadByUrl({ | |
| 38 | url: 'https://codeload.github.com/anncwb/vue-vben-admin-doc/zip/master', | |
| 39 | target: '_self', | |
| 40 | }); | |
| 661db0 | 41 | |
| V | 42 | downloadByUrl({ |
| 43 | url: 'https://vebn.oss-cn-beijing.aliyuncs.com/vben/logo.png', | |
| 44 | target: '_self', | |
| 45 | }); | |
| db3092 | 46 | } |
| a161bf | 47 | |
| V | 48 | function handleDownloadByBase64() { |
| 49 | downloadByBase64(imgBase64, 'logo.png'); | |
| 50 | } | |
| 661db0 | 51 | |
| V | 52 | function handleDownloadByOnlineUrl() { |
| 53 | downloadByOnlineUrl( | |
| 54 | 'https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5944817f47b8408e9f1442ece49d68ca~tplv-k3u1fbpfcp-watermark.image', | |
| 56a966 | 55 | 'logo.png', |
| 661db0 | 56 | ); |
| V | 57 | } |
| db3092 | 58 | return { |
| V | 59 | handleDownloadByUrl, |
| 60 | handleDownByData, | |
| a161bf | 61 | handleDownloadByBase64, |
| 661db0 | 62 | handleDownloadByOnlineUrl, |
| db3092 | 63 | }; |
| V | 64 | }, |
| 65 | }); | |
| 66 | </script> | |
