index.vue 1.8 KB

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