xuyue/webpreview
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

add download

Browse Source
This commit is contained in:
yuetsh
2025-03-05 19:04:52 +08:00
parent 20bf212152
commit ea5393242a
1 changed files with 20 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/Preview.vue
View File

@@ -4,6 +4,7 @@
<Icon icon="noto:eyes" :width="20"></Icon> <Icon icon="noto:eyes" :width="20"></Icon>
<n-text class="titleText">预览</n-text> <n-text class="titleText">预览</n-text>
</n-flex> </n-flex>
<n-button quaternary @click="download">下载</n-button>
</n-flex> </n-flex>
<iframe class="iframe" ref="iframe"></iframe> <iframe class="iframe" ref="iframe"></iframe>
</template> </template>
@@ -16,10 +17,8 @@ import { Icon } from "@iconify/vue"
const iframe = useTemplateRef<HTMLIFrameElement>("iframe") const iframe = useTemplateRef<HTMLIFrameElement>("iframe")
function preview() { function getContent() {
if (!iframe.value) return return `<!DOCTYPE html>
const doc = iframe.value.contentDocument!
const content = `<!DOCTYPE html>
<html lang="zh-Hans-CN"> <html lang="zh-Hans-CN">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
@@ -34,11 +33,27 @@ function preview() {
<script type="module">${js.value}<\/script> <script type="module">${js.value}<\/script>
</body> </body>
</html>` </html>`
}
function preview() {
if (!iframe.value) return
const doc = iframe.value.contentDocument!
doc.open() doc.open()
doc.write(content) doc.write(getContent())
doc.close() 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 }) watchDebounced([html, css, js], preview, { debounce: 500, maxWait: 1000 })
onMounted(preview) onMounted(preview)
</script> </script>