Vue PDF

Vue renderer for creating PDF files on the browser and server

Installation

npm install @ceereals/vue-pdf

Usage

Web

<script setup>
import { Document, Page, Text, View, PDFViewer } from "@ceereals/vue-pdf";
import { reactive } from "vue";
const viewStyle = reactive({
  flexDirection: "row",
  justifyContent: "center",
  alignItems: "center",
  height: "100%",
});

const textStyle = reactive({
  fontSize: 24,
});
</script>
<template>
  <PDFViewer>
    <Document>
      <Page size="A4">
        <View :style="viewStyle">
          <Text :style="textStyle">Hello, Vue PDF!</Text>
        </View>
      </Page>
    </Document>
  </PDFViewer>
</template>

Node

import { Document, Page, Text, View, renderToFile } from "@ceereals/vue-pdf";
import { defineComponent, h } from "@vue/runtime-core";
import fs from "fs";

const DocumentTemplate = defineComponent(() => {
    return () => (
      h(Document, [
        h(Page, { size: "A4" }, [
          h(
            View, { style: viewStyle },
            [
              h(
                Text, { style: textStyle },
                "Hello, Vue PDF!",
              ),
            ],
          ),
        ]),
      ])
    )
})

const stream = renderToFile(DocumentTemplate,'document.pdf');

Documentation

For more information, check out the documentation.

License

MIT © Riccardo Romoli