feat: add one-click download function

新增一键下载功能
doocs · Dec 19, 2019 · feeab44 · feeab44
1 parent 997db36
commit feeab44
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -28,6 +28,7 @@ Markdown 文档自动即时渲染为微信图文，让你不再为微信文章
 - [x] 支持链接微信图文，外链自动转为文末索引
 - [x] 支持一键复制并粘贴到公众号后台
 - [x] 支持多图上传并将 URL 插入编辑器光标定位处
+- [x] 支持一键下载 Markdown 文档到本地
 - [x] 支持自定义 CSS 样式并实时渲染
 - [x] 支持一键恢复至默认内容及样式
 - [x] 支持打开或关闭引用链接的选项

diff --git a/assets/scripts/editor.js b/assets/scripts/editor.js
@@ -202,13 +202,27 @@ let app = new Vue({
         localStorage.removeItem(name);
       }
     },
+    // 下载编辑器内容到本地
+    downloadEditorContent() {
+      let downLink = document.createElement('a');
+      downLink.download = 'content.md';
+      downLink.style.display = 'none';
+      let blob = new Blob([this.editor.getValue(0)]);
+      downLink.href = URL.createObjectURL(blob);
+      console.log(downLink);
+      document.body.appendChild(downLink);
+      downLink.click();
+      document.body.removeChild(downLink);
+    },
+    // 自定义CSS样式
     async customStyle() {
       this.showBox = !this.showBox;
       let flag = await localStorage.getItem("__css_content")
       if (!flag) {
         this.cssEditor.setValue(DEFAULT_CSS_CONTENT);
       }
     },
+    // 复制渲染后的内容到剪贴板
     copy() {
       let clipboardDiv = document.getElementById('output');
       clipboardDiv.focus();

diff --git a/index.html b/index.html
@@ -50,6 +50,10 @@
             <i class="el-icon-upload" size="medium">&nbsp;</i>
           </el-tooltip>
         </el-upload>
+        <!-- 下载文本文档 -->
+        <el-tooltip class="item" effect="dark" content="点击下载编辑框Markdown文档" placement="bottom-start">
+          <i class="el-icon-download" size="medium" @click="downloadEditorContent">&nbsp;</i>
+        </el-tooltip>
         <!-- 页面重置 -->
         <el-tooltip class="item" effect="dark" content="点击重置页面" placement="bottom-start">
           <i class="el-icon-refresh" size="medium" @click="reset">&nbsp;</i>