add export to PDF,JPEG

#4

Author: barelyhuman

package.json

@@ -10,16 +10,17 @@
   "dependencies": {
     "codejar": "^3.5.0",
     "highlight.js": "^11.2.0",
+    "html2pdf.js": "0.9.3",
     "marked": "^3.0.2",
     "vue": "^3.0.5"
   },
   "devDependencies": {
-    "tailwindcss": "^2.2.7",
     "@vitejs/plugin-vue": "^1.3.0",
     "@vue/compiler-sfc": "^3.0.5",
     "autoprefixer": "^10.3.2",
     "cssnano": "^5.0.8",
     "postcss": "^8.3.6",
+    "tailwindcss": "^2.2.7",
     "vite": "^2.4.4"
   }
 }

src/lib/marked/index.js

@@ -4,7 +4,6 @@ import hljs from "highlight.js";
 
 marked.setOptions({
   highlight: function (code, lang, callback) {
-    console.log({ code, lang, callback });
     const highlightedCode = hljs.highlight(code, {
       language: lang || "plaintext",
     }).value;

src/pages/Home.vue

@@ -32,6 +32,8 @@
           modifier="⌘ + ⇧ + s "
           @click="handleSaveAsHTML"
         />
+        <MenuItem label="Save File as PDF" @click="handleSaveAsPDF" />
+        <MenuItem label="Save File as Image" @click="handleSaveAsImage" />
       </Menu>
 
       <Button
@@ -66,6 +68,7 @@ import { copy } from "../lib/copy";
 import { defaultMarkdownText } from "../resources/default-md";
 import { reactive, onMounted, ref, onUnmounted } from "vue";
 import marked from "../lib/marked";
+import html2pdf from "html2pdf.js";
 
 const toastRef = ref(null);
 
@@ -148,14 +151,78 @@ function handleSaveFile() {
   exportFile(fileNameWithExt, file);
 }
 
+async function handleSaveAsPDF() {
+  try {
+    const fileName = prompt("Name your file", "mark.pdf");
+    if (!fileName) {
+      return;
+    }
+    state.showPreview = true;
+    const htmlString = marked(state.code);
+    const options = {
+      margin: 0.25,
+      filename: fileName,
+      jsPDF: { unit: "in", format: "a4", orientation: "portrait" },
+    };
+    setTimeout(() => {
+      html2pdf()
+        .set(options)
+        .from(htmlString, "string")
+        .to("pdf")
+        .save()
+        .then(() => {
+          state.showPreview = false;
+        });
+    }, 250);
+  } catch (err) {
+    console.error(err);
+  }
+}
+async function handleSaveAsImage() {
+  try {
+    const fileName = prompt("Name your file", "mark.jpeg");
+    if (!fileName) {
+      return;
+    }
+    state.showPreview = true;
+    const htmlString = marked(state.code);
+    const options = {
+      margin: 0.25,
+      filename: fileName,
+      image: { type: "jpeg", quality: 0.98 },
+    };
+
+    setTimeout(() => {
+      html2pdf()
+        .set(options)
+        .from(htmlString, "string")
+        .to("container")
+        .toImg()
+        .outputImg("datauri")
+        .then((dataURL) => {
+          exportFile(fileName,dataURL,false)
+          state.showPreview = false;
+        })
+    }, 250);
+  } catch (err) {
+    console.error(err);
+  }
+}
+
 function createFile(data) {
   return new Blob([data], { type: "text/plain" });
 }
 
-function exportFile(filename, file) {
+function exportFile(filename, file, generateDataURI = true) {
   const a = document.createElement("a");
   document.body.appendChild(a);
-  a.href = window.URL.createObjectURL(file);
+  let uri;
+  if (generateDataURI) {
+    uri = window.URL.createObjectURL(file);
+  } else {
+    uri = file;
+  }
+  a.href = uri;
   a.download = filename;
   a.click();
   document.body.removeChild(a);