feat: use browser feature to print preview a pdf (#61)

components/Preview.vue

@@ -39,12 +39,13 @@ const component: Component = computed(() => templateMapper[template.value]);
 </script>
 
 <template>
-  <aside class="lg:overflow-y-auto">
+  <aside class="lg:overflow-y-auto print:hidden">
     <section
       class="w-[210mm] h-[297mm] bg-white shadow origin-top-center m-auto after:content-[''] after:block after:left-0 after:right-0 after:border-b-2 after:border-black after:border-dotted"
       :style="`transform: scale(${zoomLevel / 100})`"
     >
       <component :is="component" />
     </section>
   </aside>
+  <component class="hidden print:block" :is="component" />
 </template>

components/TheHeader.vue

@@ -26,6 +26,10 @@ const resume = storeToRefs(useResumeStore());
 
 const isImportError = ref(false);
 
+function downloadPdf() {
+  window.print();
+}
+
 function exportToJson() {
   const toExport = {
     ...letter,
@@ -93,7 +97,7 @@ function importFromJson(event: Event) {
 
 <template>
   <header
-    class="sticky top-0 z-10 h-[100px] flex justify-between items-center gap-2 px-10 bg-white text-pink-500 shadow-lg"
+    class="print:hidden sticky top-0 z-10 h-[100px] flex justify-between items-center gap-2 px-10 bg-white text-pink-500 shadow-lg"
   >
     <NuxtLink to="/">
       <h1
@@ -166,6 +170,14 @@ function importFromJson(event: Event) {
           </option>
         </select>
       </label>
+
+      <button
+        class="text-blue-500 flex items-center gap-1"
+        @click="downloadPdf"
+      >
+        <ArrowDownOnSquareIcon class="h-6" />
+        Download
+      </button>
     </div>
   </header>
 </template>

pages/editor.vue

@@ -16,7 +16,7 @@ const title = ref("Nice resume");
   <section
     class="flex flex-col bg-gradient-to-br from-blue-700 to-pink-500 backdrop-contrast-200 lg:h-[calc(100svh-100px)] lg:flex-row"
   >
-    <Editor class="flex-1" />
+    <Editor class="print:hidden flex-1" />
     <!-- <div class="bg-white h:2 w-full lg:h-full lg:w-2" /> -->
     <Preview />
   </section>

tailwind.config.js

@@ -8,7 +8,12 @@ export default {
     "./app.vue",
   ],
   theme: {
-    extend: {},
+    extend: {
+      screens: {
+        print: { raw: "print" },
+        screen: { raw: "screen" },
+      },
+    },
   },
   plugins: [],
 };