index.vue 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  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. const res = await DbDocApi.exportHtmlApi()
  47. if (type === 'HTML') {
  48. download.html(res, '数据库文档.html')
  49. }
  50. if (type === 'Word') {
  51. download.word(res, '数据库文档.doc')
  52. }
  53. if (type === 'Markdown') {
  54. download.markdown(res, '数据库文档.md')
  55. }
  56. }
  57. onMounted(async () => {
  58. await init()
  59. })
  60. </script>