:art: #325 pdf

src/ts/export/index.ts

@@ -0,0 +1,52 @@
+import {i18n} from "../i18n";
+import {getMarkdown} from "../util/getMarkdown";
+
+export const download = (vditor: IVditor, content: string, filename: string) => {
+    const aElement = document.createElement("a");
+    if ("download" in aElement) {
+        aElement.download = filename;
+        aElement.style.display = "none";
+        aElement.href = URL.createObjectURL(new Blob([content]));
+
+        document.body.appendChild(aElement);
+        aElement.click();
+        aElement.remove();
+    } else {
+        vditor.tip.show(i18n[vditor.options.lang].downloadTip, 0);
+    }
+};
+
+export const exportMarkdown = (vditor: IVditor, content: string) => {
+    download(vditor, content, content.substr(0, 10) + ".md");
+};
+
+export const exportPDF = (vditor: IVditor, content: string) => {
+    vditor.tip.show(i18n[vditor.options.lang].generate, 3800);
+    const iframe = document.querySelector("iframe");
+    iframe.contentDocument.open();
+    iframe.contentDocument.write(`<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.css"/>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/method.min.js"></script>
+<div id="preview"></div>
+<script>
+window.addEventListener("message", (e) => {
+  if(!e.data) {
+    return;
+  }
+  Vditor.preview(document.getElementById('preview'), e.data, {
+    markdown: {
+      theme: "${vditor.options.preview.markdown.theme}"
+    },
+    hljs: {
+      style: "${vditor.options.preview.hljs.style}"
+    }
+  });
+  setTimeout(() => {
+        window.print();
+    }, 3600);
+}, false);
+</script>`);
+    iframe.contentDocument.close();
+    setTimeout(() => {
+        iframe.contentWindow.postMessage(getMarkdown(vditor), "*");
+    }, 200);
+};

src/ts/export/markdown.ts

@@ -1,14 +0,0 @@
-export const download = (content: string, filename: string) => {
-    const aElement = document.createElement("a");
-    aElement.download = filename;
-    aElement.style.display = "none";
-    aElement.href = URL.createObjectURL(new Blob([content]));
-
-    document.body.appendChild(aElement);
-    aElement.click();
-    aElement.remove();
-};
-
-export const exportMarkdown = (content: string) => {
-    download(content, content.substr(0, 10) + ".md");
-};

src/ts/i18n/index.ts

@@ -16,6 +16,7 @@ export const i18n: II18n = {
         "copy": "Copy",
         "devtools": "DevTools",
         "down": "Down",
+        "downloadTip": "The browser does not support the download function",
         "edit": "Edit",
         "edit-mode": "Toggle Edit Mode",
         "emoji": "Emoji",
@@ -24,6 +25,7 @@ export const i18n: II18n = {
         "footnoteRef": "Footnote Ref",
         "format": "Format",
         "fullscreen": "Toggle Fullscreen",
+        "generate": "Generating",
         "headings": "Headings",
         "help": "Help",
         "imageURL": "image URL",
@@ -84,6 +86,7 @@ export const i18n: II18n = {
         "copy": "복사",
         "devtools": "DevTools",
         "down": "다운",
+        "downloadTip": "브라우저가 다운로드 기능을 지원하지 않습니다",
         "edit": "수정",
         "edit-mode": "편집 모드 전환",
         "emoji": "이모지",
@@ -92,6 +95,7 @@ export const i18n: II18n = {
         "footnoteRef": "각주 참조",
         "format": "형식",
         "fullscreen": "전체화면 토글",
+        "generate": "생성",
         "headings": "제목크기",
         "help": "도움말",
         "imageURL": "이미지 URL",
@@ -152,6 +156,7 @@ export const i18n: II18n = {
         "copy": "复制",
         "devtools": "开发者工具",
         "down": "下",
+        "downloadTip": "该浏览器不支持下载功能",
         "edit": "编辑",
         "edit-mode": "切换编辑模式",
         "emoji": "表情",
@@ -160,6 +165,7 @@ export const i18n: II18n = {
         "footnoteRef": "脚注标识",
         "format": "格式化",
         "fullscreen": "全屏切换",
+        "generate": "生成中",
         "headings": "标题",
         "help": "帮助",
         "imageURL": "图片地址",

src/ts/toolbar/Export.ts

@@ -1,4 +1,4 @@
-import {exportMarkdown} from "../export/markdown";
+import {exportMarkdown, exportPDF} from "../export";
 import {getEventName} from "../util/compatibility";
 import {getMarkdown} from "../util/getMarkdown";
 import {MenuItem} from "./MenuItem";
@@ -9,18 +9,20 @@ export class Export extends MenuItem {
 
     constructor(vditor: IVditor, menuItem: IMenuItem) {
         super(vditor, menuItem);
-
         const actionBtn = this.element.children[0] as HTMLElement;
-
         const panelElement = document.createElement("div");
         panelElement.className = `vditor-hint${menuItem.level === 2 ? "" : " vditor-panel--arrow"}`;
-        panelElement.innerHTML = `<button data-type="markdown">Markdown</button>`;
+        panelElement.innerHTML = `<button data-type="markdown">Markdown</button>
+<button data-type="pdf">PDF</button>`;
         panelElement.addEventListener(getEventName(), (event: MouseEvent & { target: HTMLElement }) => {
             const btnElement = event.target;
             if (btnElement.tagName === "BUTTON") {
                 switch (btnElement.getAttribute("data-type")) {
                     case "markdown":
-                        exportMarkdown(getMarkdown(vditor));
+                        exportMarkdown(vditor, getMarkdown(vditor));
+                        break;
+                    case "pdf":
+                        exportPDF(vditor, getMarkdown(vditor));
                         break;
                     default:
                         break;

src/ts/ui/initUI.ts

@@ -68,6 +68,12 @@ export const initUI = (vditor: IVditor) => {
 
     vditor.element.appendChild(contentElement);
 
+    if (vditor.toolbar.elements.export) {
+        // for export pdf
+        vditor.element.insertAdjacentHTML("beforeend",
+            '<iframe style="width: 100%;height: 0;border: 0"></iframe>');
+    }
+
     setEditMode(vditor, vditor.options.mode, afterRender(vditor, contentElement));
 };