Create or Generate PDF file in Vue application

11 Jun 20263 minutes to read

The Syncfusion^® JavaScript PDF library is used to create, read, and edit PDF documents. This library also offers functionality to merge, split, stamp, fill forms, and secure PDF files.

This guide explains how to integrate the JavaScript PDF library into an Vue application.

Integrate the PDF library into an Vue application

Step1: To generate a Vue 2 project using Vue-CLI, use the Vue create command. Follow these steps to install Vue CLI and create a new project:

npm install -g @vue/cli
vue create quickstart
cd quickstart

or

yarn global add @vue/cli
vue create quickstart
cd quickstart

When creating a new project, choose the option Default ([Vue 2] babel, es-lint) from the menu.

Once the quick start project is set up with default settings, proceed to add Syncfusion^® components to the project.

Step2: All Syncfusion JS 2 packages are published in npmjs.com registry.

• To install the PDF library, use the following command.

npm install @syncfusion/ej2-pdf --save

or

yarn add @syncfusion/ej2-pdf

NOTE

For image and data extraction features, you need to install the @syncfusion/ej2-pdf-data-extract package as an add-on.

• Copy the ej2-pdf-lib folder from the @syncfusion/ej2-pdf-data-extract package into your project’s public, dist, or assets directory (where your static files are served).
• Make sure the ej2-pdf-lib folder exists in your final build output if you need to extract images or data from PDF files.
• Ensure your server serves .wasm files with the Content-Type: application/wasm MIME type.
• This setup is not required for basic PDF creation.

Step3: To Create a PDF document, Add the script in App.vue by creating a button and attaching a click event that uses the JavaScript PDF API to generate a PDF document.

~/App.vue

<script>
export default {
  name: 'App',
  methods: {
    createPdf() {
    // Create a new PDF document
    const pdf = new ej.pdf.PdfDocument();
    // Add a new page
    const page: ej.pdf.PdfPage = pdf.addPage();
    // Get graphics from the page
    const graphics: ej.pdf.PdfGraphics = page.graphics;
    // Set font
    const font: ej.pdf.PdfStandardFont = pdf.embedFont(ej.pdf.PdfFontFamily.helvetica, 36, ej.pdf.PdfFontStyle.regular);
    // Create a new black brush
    const brush = new ej.pdf.PdfBrush({r: 0, g: 0, b: 0});
    // Draw text
    graphics.drawString('Hello World!!!', font, {x: 20, y: 20, width: graphics.clientSize.width - 20, height: 60}, brush);
    // Save and download PDF
    pdf.save('Output.pdf');
    // Destroy the PDF document instance
    pdf.destroy();

    }
  }
};
</script>

Step4: To run the project, use the following command:

npm run serve

or

yarn run serve

By executing the program, you will generate the following PDF document.

Click here to explore the rich set of Syncfusion^® PDF library features.

An online sample link to create PDF document in Vue.