Packages

Vue and Nuxt

Show an mbingpdf document on screen in a Vue or Nuxt app, and make the PDF file from the same definition.

npm install mbingpdf @mbingpdf/vue

Needs Vue 3.5 or later.

#Preview

<script setup lang="ts">
import { computed } from "vue";
import { Document, Page, Text } from "mbingpdf";
import { PdfPreview } from "@mbingpdf/vue";

const props = defineProps<{ invoice: { number: string } }>();
const document = computed(() =>
  Document(Page({ size: "A4", margin: 36 }, Text(`Invoice ${props.invoice.number}`))),
);
</script>

<template>
  <PdfPreview :document="document" />
</template>

PdfPreview draws the pages exactly as the PDF will have them: the same line breaks, the same page breaks. Pages take the width of the element around them, so the preview is readable on a phone. Each page is drawn only when it comes near the screen, so long documents open at once. Links work, both to the web and within the document.

The document is laid out again whenever the document prop changes. Build it in a computed, as above, so that happens only when the data changes.

The error slot replaces the message shown in place: <template #error="{ error }">…</template>.

#The file

<script setup lang="ts">
import { usePdf } from "@mbingpdf/vue";

const pdf = usePdf(document);
</script>

<template>
  <button :disabled="pdf.loading.value" @click="pdf.download('invoice.pdf')">Download</button>
</template>

usePdf(document, options?) takes a ref, a computed or a function, and returns { bytes, url, error, loading, make, download }; all but download are refs. url can be the href of a link or the src of an <iframe>; bytes can be uploaded to a server. The options are those of render().

To make a file without the composable, call render() from mbingpdf and pass the bytes to downloadPdf(bytes, filename).

With usePdf(document, { lazy: true }) nothing is made until pdf.download(name) or pdf.make() is called: for a large document that should not be rendered again on every change. make() gives the bytes.

#Notes

• Text in embedded fonts is drawn as shapes, so the preview needs no web fonts. Text in the 14 standard PDF fonts uses the closest font on the device and may differ slightly from the PDF.
• Text in the preview cannot be selected; the PDF's text can. Screen readers are given each page's text.
• Layout happens in the browser. During server rendering (Nuxt) the component gives an empty element, and usePdf waits until the page is in the browser.

MIT licence.

Edit this page on GitHub