index.vue 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. <template>
  2. <ContentWrap title="数据库文档">
  3. <!-- 操作工具栏 -->
  4. <div class="mb-10px">
  5. <XButton
  6. type="primary"
  7. preIcon="ep:download"
  8. :title="t('action.export') + ' HTML'"
  9. @click="handleExport('HTML')"
  10. />
  11. <XButton
  12. type="primary"
  13. preIcon="ep:download"
  14. :title="t('action.export') + ' Word'"
  15. @click="handleExport('Word')"
  16. />
  17. <XButton
  18. type="primary"
  19. preIcon="ep:download"
  20. :title="t('action.export') + ' Markdown'"
  21. @click="handleExport('Markdown')"
  22. />
  23. </div>
  24. <IFrame v-if="!loding" v-loading="loding" :src="src" />
  25. </ContentWrap>
  26. </template>
  27. <script setup lang="ts">
  28. import { onMounted, ref } from 'vue'
  29. import download from '@/utils/download'
  30. import { useI18n } from '@/hooks/web/useI18n'
  31. import { IFrame } from '@/components/IFrame'
  32. import * as DbDocApi from '@/api/infra/dbDoc'
  33. const { t } = useI18n() // 国际化
  34. const src = ref('')
  35. const loding = ref(true)
  36. /** 页面加载 */
  37. const init = async () => {
  38. const res = await DbDocApi.exportHtmlApi()
  39. let blob = new Blob([res], { type: 'text/html' })
  40. let blobUrl = window.URL.createObjectURL(blob)
  41. src.value = blobUrl
  42. loding.value = false
  43. }
  44. /** 处理导出 */
  45. const handleExport = async (type: string) => {
  46. if (type === 'HTML') {
  47. const res = await DbDocApi.exportHtmlApi()
  48. download.html(res, '数据库文档.html')
  49. }
  50. if (type === 'Word') {
  51. const res = await DbDocApi.exportWordApi()
  52. download.word(res, '数据库文档.doc')
  53. }
  54. if (type === 'Markdown') {
  55. const res = await DbDocApi.exportMarkdownApi()
  56. download.markdown(res, '数据库文档.md')
  57. }
  58. }
  59. onMounted(async () => {
  60. await init()
  61. })
  62. </script>