add download

2025-03-05 19:04:52 +08:00
parent 20bf212152
commit ea5393242a
1 changed files with 20 additions and 5 deletions
--- a/src/components/Preview.vue
+++ b/src/components/Preview.vue
@@ -4,6 +4,7 @@
      <Icon icon="noto:eyes" :width="20"></Icon>
      <n-text class="titleText">预览</n-text>
    </n-flex>
+    <n-button quaternary @click="download">下载</n-button>
  </n-flex>
  <iframe class="iframe" ref="iframe"></iframe>
 </template>
@@ -16,10 +17,8 @@ import { Icon } from "@iconify/vue"

 const iframe = useTemplateRef<HTMLIFrameElement>("iframe")

-function preview() {
-  if (!iframe.value) return
-  const doc = iframe.value.contentDocument!
-  const content = `<!DOCTYPE html>
+function getContent() {
+  return `<!DOCTYPE html>
 <html lang="zh-Hans-CN">
  <head>
    <meta charset="UTF-8" />
@@ -34,11 +33,27 @@ function preview() {
    <script type="module">${js.value}<\/script>
  </body>
 </html>`
+}
+
+function preview() {
+  if (!iframe.value) return
+  const doc = iframe.value.contentDocument!
  doc.open()
-  doc.write(content)
+  doc.write(getContent())
  doc.close()
 }

+function download() {
+  const content = getContent()
+  const blob = new Blob([content], { type: "text/html" })
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement("a")
+  a.href = url
+  a.download = "index.html"
+  a.click()
+  URL.revokeObjectURL(url)
+}
+
 watchDebounced([html, css, js], preview, { debounce: 500, maxWait: 1000 })
 onMounted(preview)
 </script>