Getting Started
Installation
Prerequisites
To start using vue-pdf
, you need to install the package. Run one of the following commands in your terminal:
$ npm add -D @ceereals/vue-pdf
$ pnpm add -D @ceereals/vue-pdf
$ yarn add -D @ceereals/vue-pdf
$ yarn add -D @ceereals/vue-pdf
$ bun add -D @ceereals/vue-pdf
Document component
Here's an example of how to write a simple PDF document template using the components provided by vue-pdf
:
<script setup>
import { Document, Page, Text, View } 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>
<Document>
<Page size="A4">
<View :style="viewStyle">
<Text :style="textStyle">Hello, Vue PDF!</Text>
</View>
</Page>
</Document>
</template>
import { Document, Page, Text, View } from "@ceereals/vue-pdf";
import { defineComponent, h, reactive } from "vue";
export default defineComponent(() => {
const viewStyle = reactive({
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
height: "100%",
});
const textStyle = reactive({
fontSize: 24,
});
return () =>
h(Document, [
h(Page, { size: "A4" }, [
h(
View,
{
style: viewStyle,
},
[
h(
Text,
{
style: textStyle,
},
"Hello, Vue PDF!",
),
],
),
]),
]);
});
import { Document, Page, Text, View } from "@ceereals/vue-pdf";
import { defineComponent, reactive } from "vue";
export default defineComponent(() => {
const viewStyle = reactive({
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
height: "100%",
});
const textStyle = reactive({
fontSize: 24,
});
return () => (
<Document>
<Page size="A4">
<View style={viewStyle}>
<Text style={textStyle}>Hello, Vue PDF!</Text>
</View>
</Page>
</Document>
);
});
WARNING
The Document
component must be the root of your tree element structure, and under no circumstances should it be used as a child of another vue-pdf
component. In addition, it should only have children of type Page
. For more information, see the API Reference for Document.
Browser Usage
Rendering
We have more options to render the PDF document:
- Render the document in the browser using the
PDFViewer
component. - Render the PDF document to a
Blob
usingusePdf
composable. - Generate a PDF file using
Node.js
.
For more information about the rendering process, see the Rendering process section in the @react-pdf
documentation.
Using PDFViewer
component
To render the document in the browser with PDFViewer
component do the following:
<script setup>
import { PDFViewer } from "@ceereals/vue-pdf";
import HelloWorldDocument from "./HelloWorldDocument.vue";
</script>
<template>
<PDFViewer>
<HelloWorldDocument />
</PDFViewer>
</template>
<script setup>
import { PDFViewer } from "@ceereals/vue-pdf";
import HelloWorldDocument from "./HelloWorldDocument.vue";
</script>
<template>
<PDFViewer :queryParams="{ toolbar: 1, view: 'fit' }">
<HelloWorldDocument />
</PDFViewer>
</template>
PDFViewer
is a web-only component that renders the PDF document in an iframe. It is useful for client-side generated documents. You can control the toolbar visibility and other query parameters with the queryParams
prop. More information at Chromium.
Using usePdf
composable
To render the document in the browser on your own, you can use the usePdf
composable:
<script setup>
import { h } from "vue";
import { usePdf } from "@ceereals/vue-pdf";
import HelloWorldDocument from "./HelloWorldDocument.vue";
const { url } = usePdf(h(HelloWorldDocument, /* props */));
</script>
<template>
<iframe :src="url"/>
</template>
<script setup>
import { usePdf } from "@ceereals/vue-pdf";
import HelloWorldDocument from "./HelloWorldDocument.vue";
const { url } = usePdf(HelloWorldDocument);
</script>
<template>
<iframe :src="url" />
</template>
Node Usage
Render to File
To generate a PDF file using Node.js
, you can use the renderToFile
function from the @ceereals/vue-pdf
package. This function returns a Promise
that resolves to a Stream.Readable
object containing the PDF document when has been succesfully writte to the filesystem.
import { renderToFile } from "@ceereals/vue-pdf";
import HelloWorldDocument from "./HelloWorldDocument.ts";
await renderToFile(HelloWorldDocument, "hello-world.pdf");
import { h } from "vue";
import { renderToFile } from "@ceereals/vue-pdf";
import HelloWorldDocument from "./HelloWorldDocument.ts";
await renderToFile(h(HelloWorldDocument, /** props */), "hello-world.pdf");
Node API also includes a renderToStream
and renderToBuffer
, for more information see the Node API Reference.