feat: add print button

components.d.ts

@@ -128,6 +128,7 @@ declare module '@vue/runtime-core' {
     MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']
     MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
     NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
+    NButton: typeof import('naive-ui')['NButton']
     NCode: typeof import('naive-ui')['NCode']
     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']

src/tools/markdown-to-html/index.ts

@@ -2,11 +2,11 @@ import { Markdown } from '@vicons/tabler';
 import { defineTool } from '../tool';
 
 export const tool = defineTool({
-  name: 'Markdown to html',
+  name: 'Markdown to Html',
   path: '/markdown-to-html',
-  description: '',
+  description: 'Convert Markdown to Html and allow to print (as PDF)',
-  keywords: ['markdown', 'html', 'converter'],
+  keywords: ['markdown', 'html', 'converter', 'pdf'],
   component: () => import('./markdown-to-html.vue'),
   icon: Markdown,
-  createdAt: new Date('2024-02-25'),
+  createdAt: new Date('2024-08-15'),
 });

src/tools/markdown-to-html/markdown-to-html.vue

@@ -7,6 +7,15 @@ const outputHtml = computed(() => {
   const md = markdownit();
   return md.render(inputMarkdown.value);
 });
+
+function printHtml() {
+  const w = window.open();
+  if (w === null) {
+    return;
+  }
+  w.document.body.innerHTML = outputHtml.value;
+  w.print();
+}
 </script>
 
 <template>
@@ -25,5 +34,11 @@ const outputHtml = computed(() => {
     <n-form-item label="Output HTML:">
       <TextareaCopyable :value="outputHtml" :word-wrap="true" language="html" />
     </n-form-item>
+
+    <div flex justify-center>
+      <n-button @click="printHtml">
+        Print (ie, use a PDF Printer to get a PDF file)
+      </n-button>
+    </div>
   </div>
 </template>