feat: md

package.json

@@ -14,7 +14,6 @@
     "docker-save": "docker save -o ./docker_output/chuneng-web.tar chuneng-web"
   },
   "dependencies": {
-
     "@element-plus/icons-vue": "^2.3.1",
     "@iconify-json/ep": "^1.1.12",
     "@iconify/json": "^2.2.217",
@@ -32,6 +31,9 @@
     "cropperjs": "^1.6.2",
     "crypto-js": "^4.2.0",
     "dayjs": "^1.11.11",
+    "html2canvas": "^1.4.1",
+    "jspdf": "^2.5.2",
+    "jspdf-html2canvas": "^1.5.2",
     "jszmq": "^0.1.2",
     "lodash": "^4.17.21",
     "mitt": "^3.0.1",

src/pages/fileDoc/components/markdownDrawer.vue

@@ -29,7 +29,8 @@
 
 <script setup lang="ts">
 import { isResError, useMessage } from '@/hooks/useMessage'
-import { cloneDeep } from 'lodash'
+import html2canvas from 'html2canvas'
+import jsPDF from 'jspdf'
 import EDFSButton from '@/components/dashboard/Edfs-button/index.vue'
 import Vditor from 'vditor'
 import { createImage, type ContentType } from '@/api/module/eam/device/document'
@@ -84,12 +85,61 @@ function initEditor() {
       enable: false,
     },
     after: () => {
-      // document.getElementById('exportButton').addEventListener('click', () => {
-      //   const content = vditor.getValue() // 获取编辑器内容
-      //   const filename = 'my-exported-document.md' // 定义文件名
-      //   vditor.export(filename, content) // 调用原生导出方法
-      // })
-      // console.log('dwad=>', contentEditor.value?.vditor.toolbar?.elements?.export)
+      const exportMdBtn = document.querySelector(
+        ".vditor-hint button[data-type='markdown']"
+      ) as HTMLElement
+      const exportPdfBtn = document.querySelector(
+        ".vditor-hint button[data-type='pdf']"
+      ) as HTMLElement
+      const exportHtmlBtn = document.querySelector(
+        ".vditor-hint button[data-type='html']"
+      ) as HTMLElement
+      // const fileName = props.data.fileName.split(//)
+      // fileName 吧 .md 去掉
+      const fileName = /(.*)\.md/.exec(props.data.fileName)?.[1] ?? '未命名'
+      console.log(fileName)
+      if (exportMdBtn) {
+        exportMdBtn.onclick = event => {
+          event.preventDefault()
+          event.stopPropagation()
+          exportMarkdown(contentEditor.value as Vditor, `${fileName}.md`)
+        }
+      }
+
+      if (exportPdfBtn) {
+        exportPdfBtn.onclick = event => {
+          event.preventDefault()
+          // event.stopPropagation()
+          // exportToPDF(contentEditor.value as Vditor, `${fileName}.pdf`)
+        }
+      }
+
+      if (exportHtmlBtn) {
+        exportHtmlBtn.onclick = event => {
+          event.preventDefault()
+          event.stopPropagation()
+          exportHTML(contentEditor.value as Vditor, `${fileName}.html`)
+        }
+      }
+
+      // if (
+      //   contentEditor.value?.vditor.toolbar &&
+      //   contentEditor.value.vditor.toolbar.elements
+      // ) {
+      //   const el = contentEditor.value.vditor.toolbar.elements.export?.lastElementChild
+      //   el?.dispatchEvent(
+      //     new CustomEvent('click', { detail: { message: 'Hello, World!' } })
+      //   ) // 触发自定义事件
+
+      //   // 监听自定义事件，并执行自己的逻辑
+      //   el?.addEventListener('click', event => {
+      //     console.log('object :>> ', event)
+      //     if (event.type === 'click' && event.detail) {
+      //       console.log('事件触发！', event.detail.message) // 输出自定义事件传递的数据
+      //     }
+      //   })
+      // }
+
       contentEditor.value?.setValue(props?.data?.content ?? '')
     },
     upload: {
@@ -123,6 +173,108 @@ function initEditor() {
   })
 }
 
+function exportMarkdown(vditor: Vditor, filename: string) {
+  const content = vditor.getValue()
+  const blob = new Blob([content], { type: 'text/markdown;charset=utf-8' })
+  triggerDownload(blob, filename)
+}
+function exportHTML(vditor: Vditor, filename: string) {
+  const content = vditor.getHTML() // 获取 HTML 内容
+  const blob = new Blob([content], { type: 'text/html;charset=utf-8' })
+  triggerDownload(blob, filename)
+}
+
+async function exportToPDF(vditor: Vditor, filename: string) {
+  const content = vditor.getHTML()
+
+  const tempDiv = document.createElement('div')
+  tempDiv.style.backgroundColor = 'white'
+  tempDiv.innerHTML = content
+
+  document.body.appendChild(tempDiv)
+  const canvas = await html2canvas(tempDiv, {
+    scale: window.devicePixelRatio * 2,
+  })
+
+  const canvasWidth = canvas.width
+  const canvasHeight = canvas.height
+
+  const imgData = canvas.toDataURL('image/jpeg', 1.0)
+
+  const pdf = new jsPDF('p', 'mm', 'a4')
+  const pdfWidth = pdf.internal.pageSize.getWidth()
+  const pdfHeight = pdf.internal.pageSize.getHeight()
+  pdf.setFontSize(12)
+  pdf.setFont('YaHei')
+
+  const headerHeight = 10 // Header 高度
+  const footerHeight = 10 // Footer 高度
+  const leftMargin = 8 // 左边距
+  const rightMargin = 8 // 右边距
+  const contentWidth = pdfWidth - leftMargin - rightMargin // 内容区域宽度
+  const contentHeight = pdfHeight - headerHeight - footerHeight // 内容区域高度
+
+  // 计算 PDF 中图片的等比例高度
+  const imgHeight = (canvasHeight * contentWidth) / canvasWidth
+  if (imgHeight <= contentHeight) {
+    pdf.addImage(imgData, 'JPEG', leftMargin, headerHeight, contentWidth, imgHeight)
+  } else {
+    // 分页逻辑
+    let position = 0 // 当前绘制的起始位置
+    let page = 1 // 当前页数
+    while (position < canvasHeight) {
+      const pageCanvas = document.createElement('canvas')
+      pageCanvas.width = canvasWidth
+      pageCanvas.height = (contentHeight * canvasWidth) / contentWidth
+
+      const pageCtx = pageCanvas.getContext('2d')
+      pageCtx?.drawImage(
+        canvas,
+        0,
+        position, // 从 Canvas 的哪部分开始截取
+        canvasWidth,
+        pageCanvas.height,
+        0,
+        0,
+        canvasWidth,
+        pageCanvas.height
+      )
+
+      const pageImgData = pageCanvas.toDataURL('image/jpeg', 1.0)
+
+      // 添加当前页到 PDF，左右边距调整
+      pdf.addImage(
+        pageImgData,
+        'JPEG',
+        leftMargin,
+        headerHeight,
+        contentWidth,
+        contentHeight
+      )
+
+      position += pageCanvas.height // 更新绘制起点
+
+      // 如果还有内容未绘制，添加新页
+      if (position < canvasHeight) {
+        page += 1
+        pdf.addPage()
+      }
+    }
+  }
+
+  pdf.save(filename)
+}
+
+function triggerDownload(blob: Blob, filename: string) {
+  const link = document.createElement('a')
+  link.href = URL.createObjectURL(blob)
+  link.download = filename
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+  URL.revokeObjectURL(link.href)
+}
+
 function onSave(isDraft: 0 | 1) {
   emits('on-save', isDraft, contentEditor.value?.getValue())
 }