feat: add print button

This commit is contained in:
ShareVB 2024-08-25 22:31:54 +02:00
parent 916a6fb913
commit 95722a6469
3 changed files with 20 additions and 4 deletions

View file

@ -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: '',
keywords: ['markdown', 'html', 'converter'],
description: 'Convert Markdown to Html and allow to print (as PDF)',
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'),
});

View file

@ -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>