| 提交 | 用户 | age | ||
| db3092 | 1 | <template> |
| V | 2 | <div class="m-5 demo-box"> |
| 3 | <a-alert message="根据后台接口文件流下载" /> | |
| 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> | |
| db3092 | 16 | </div> |
| V | 17 | </template> |
| 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'; |
| db3092 | 27 | export default defineComponent({ |
| V | 28 | setup() { |
| 29 | function handleDownByData() { | |
| 30 | downloadByData('text content', 'testName.txt'); | |
| 31 | } | |
| 32 | function handleDownloadByUrl() { | |
| 33 | downloadByUrl({ | |
| 34 | url: 'https://codeload.github.com/anncwb/vue-vben-admin-doc/zip/master', | |
| 35 | target: '_self', | |
| 36 | }); | |
| 661db0 | 37 | |
| V | 38 | downloadByUrl({ |
| 39 | url: 'https://vebn.oss-cn-beijing.aliyuncs.com/vben/logo.png', | |
| 40 | target: '_self', | |
| 41 | }); | |
| db3092 | 42 | } |
| a161bf | 43 | |
| V | 44 | function handleDownloadByBase64() { |
| 45 | downloadByBase64(imgBase64, 'logo.png'); | |
| 46 | } | |
| 661db0 | 47 | |
| V | 48 | function handleDownloadByOnlineUrl() { |
| 49 | downloadByOnlineUrl( | |
| 50 | 'https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5944817f47b8408e9f1442ece49d68ca~tplv-k3u1fbpfcp-watermark.image', | |
| 51 | 'logo.png' | |
| 52 | ); | |
| 53 | } | |
| db3092 | 54 | return { |
| V | 55 | handleDownloadByUrl, |
| 56 | handleDownByData, | |
| a161bf | 57 | handleDownloadByBase64, |
| 661db0 | 58 | handleDownloadByOnlineUrl, |
| db3092 | 59 | }; |
| V | 60 | }, |
| 61 | }); | |
| 62 | </script> | |
