amass/md
1
0
Fork 0
mirror of https://github.com/doocs/md.git synced 2024-11-28 13:36:32 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: export html page (#68)

Browse Source
This commit is contained in:
小树 2021-10-14 20:12:19 +08:00 committed by GitHub
parent e14a03c79b
commit 6e8763ff75
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 43 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/assets/scripts/util.js
View File

@ -235,6 +235,23 @@ export function downloadMD(doc) {
document.body.removeChild(downLink); document.body.removeChild(downLink);
} }
/**
* 导出 HTML 生成内容
* @param {HTML生成内容} htmlStr
*/
export function exportHTML(htmlStr) {
const downLink = document.createElement('a')
downLink.download = 'content.html';
downLink.style.display = "none";
let blob = new Blob([`<html><body>${htmlStr}</body></html>`])
downLink.href = URL.createObjectURL(blob);
document.body.appendChild(downLink);
downLink.click();
document.body.removeChild(downLink);
}
/** /**
* 生成列表字符串 * 生成列表字符串
* @param {*} data 对应内容集合 * @param {*} data 对应内容集合

13
src/components/CodemirrorEditor/header.vue
View File

@ -22,6 +22,19 @@
@click="$emit('download')" @click="$emit('download')"
></i> ></i>
</el-tooltip> </el-tooltip>
<!-- 导出 HTML -->
<el-tooltip
class="header__item"
:effect="effect"
content="导出 HTML"
placement="bottom-start"
>
<i
class="el-icon-document"
size="medium"
@click="$emit('export')"
></i>
</el-tooltip>
<!-- 页面重置 --> <!-- 页面重置 -->
<el-tooltip <el-tooltip
class="header__item" class="header__item"

4
src/components/CodemirrorEditor/rightClickMenu.vue
View File

@ -56,6 +56,10 @@ export default {
text: "下载 Markdown 文档", text: "下载 Markdown 文档",
key: "download", key: "download",
}, },
{
text: "导出 HTML",
key: "export",
},
{ {
text: "格式化 Markdown 文档", text: "格式化 Markdown 文档",
key: "formatMarkdown", key: "formatMarkdown",

9
src/pages/index/view/CodemirrorEditor.vue
View File

@ -7,6 +7,7 @@
@refresh="onEditorRefresh" @refresh="onEditorRefresh"
@cssChanged="cssChanged" @cssChanged="cssChanged"
@download="downloadEditorContent" @download="downloadEditorContent"
@export="exportEditorContent"
@showCssEditor="showCssEditor = !showCssEditor" @showCssEditor="showCssEditor = !showCssEditor"
@show-about-dialog="aboutDialogVisible = true" @show-about-dialog="aboutDialogVisible = true"
@show-dialog-form="dialogFormVisible = true" @show-dialog-form="dialogFormVisible = true"
@ -101,6 +102,7 @@ import uploadImgDialog from "../../../components/CodemirrorEditor/uploadImgDialo
import { import {
css2json, css2json,
downloadMD, downloadMD,
exportHTML,
formatDoc, formatDoc,
setFontSize, setFontSize,
saveEditorContent, saveEditorContent,
@ -330,6 +332,10 @@ export default {
downloadEditorContent() { downloadEditorContent() {
downloadMD(this.editor.getValue(0)); downloadMD(this.editor.getValue(0));
}, },
// 导出编辑器内容为 HTML，并且下载到本地
exportEditorContent() {
exportHTML(this.output);
},
// 格式化文档 // 格式化文档
formatContent() { formatContent() {
const doc = formatDoc(this.editor.getValue(0)); const doc = formatDoc(this.editor.getValue(0));
@ -361,6 +367,9 @@ export default {
case "download": case "download":
this.downloadEditorContent(); this.downloadEditorContent();
break; break;
case "export":
this.exportEditorContent();
break;
case "insertTable": case "insertTable":
this.dialogFormVisible = true; this.dialogFormVisible = true;
break; break;