Vue.js Tutorial to Integrate jsPDF Library to Edit PDF in Browser

Learn how to integrate jsPDF with Vue.js to create and generate PDF documents directly in the browser without any server-side processing.

Installation

Install jsPDF in your Vue project:

npm install jspdf

For converting HTML to PDF, also install html2canvas:

npm install html2canvas

Basic PDF Generator Component

Create a simple Vue component that generates PDFs:

<template>
  <div class="pdf-generator">
    <h2>PDF Generator</h2>
    <button @click="generatePDF">Download PDF</button>
  </div>
</template>

<script>
import jsPDF from 'jspdf';

export default {
  name: 'PDFGenerator',
  methods: {
    generatePDF() {
      const doc = new jsPDF();
      doc.text('Hello from Vue.js!', 20, 20);
      doc.save('document.pdf');
    }
  }
}
</script>

Vue 3 Composition API

Using the modern Composition API:

<template>
  <div>
    <button @click="generatePDF">Generate PDF</button>
  </div>
</template>

<script setup>
import jsPDF from 'jspdf';

const generatePDF = () => {
  const doc = new jsPDF();
  doc.text('Hello from Vue 3!', 20, 20);
  doc.save('document.pdf');
};
</script>

Dynamic Content from Vue Data

Generate PDFs using reactive data:

<template>
  <div class="pdf-form">
    <h2>Create Your PDF</h2>

    <input
      v-model="title"
      placeholder="Enter title"
      class="input"
    />

    <textarea
      v-model="content"
      placeholder="Enter content"
      rows="5"
      class="textarea"
    ></textarea>

    <button @click="createPDF" class="btn">
      Create PDF
    </button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import jsPDF from 'jspdf';

const title = ref('');
const content = ref('');

const createPDF = () => {
  const doc = new jsPDF();

  doc.setFontSize(18);
  doc.text(title.value || 'Untitled', 20, 20);

  doc.setFontSize(12);
  const lines = doc.splitTextToSize(content.value, 170);
  doc.text(lines, 20, 35);

  doc.save(`${title.value || 'document'}.pdf`);
};
</script>

<style scoped>
.pdf-form {
  max-width: 600px;
  margin: 0 auto;
}

.input, .textarea {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.btn {
  background: #42b883;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

Styled PDF with Formatting

Add professional styling to your PDFs:

<template>
  <button @click="generateStyledPDF">
    Generate Styled PDF
  </button>
</template>

<script setup>
import jsPDF from 'jspdf';

const generateStyledPDF = () => {
  const doc = new jsPDF();

  // Title
  doc.setFontSize(24);
  doc.setFont(undefined, 'bold');
  doc.text('Professional Document', 105, 20, { align: 'center' });

  // Subtitle
  doc.setFontSize(14);
  doc.setFont(undefined, 'italic');
  doc.setTextColor(100, 100, 100);
  doc.text('Generated with Vue.js', 105, 30, { align: 'center' });

  // Reset to normal
  doc.setTextColor(0, 0, 0);
  doc.setFont(undefined, 'normal');
  doc.setFontSize(12);

  // Content
  let y = 50;
  const content = [
    'This PDF demonstrates:',
    '',
    '• Multiple font sizes and styles',
    '• Text alignment and colors',
    '• Shapes and graphics',
    '• Professional formatting'
  ];

  content.forEach(line => {
    doc.text(line, 20, y);
    y += 8;
  });

  // Colored box
  y += 10;
  doc.setFillColor(66, 184, 131);
  doc.rect(20, y, 170, 20, 'F');
  doc.setTextColor(255, 255, 255);
  doc.setFontSize(13);
  doc.text('Vue.js + jsPDF', 105, y + 12, { align: 'center' });

  doc.save('styled-document.pdf');
};
</script>

Convert Vue Component to PDF

Capture a Vue component and export it as PDF:

<template>
  <div>
    <div ref="contentRef" class="content">
      <h1>{{ heading }}</h1>
      <p>{{ description }}</p>
      <ul>
        <li v-for="item in items" :key="item">{{ item }}</li>
      </ul>
    </div>

    <button @click="exportToPDF">Export to PDF</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';

const contentRef = ref(null);

const heading = ref('My Content');
const description = ref('This content will be exported to PDF');
const items = ref(['Item 1', 'Item 2', 'Item 3']);

const exportToPDF = async () => {
  const element = contentRef.value;
  const canvas = await html2canvas(element);
  const imgData = canvas.toDataURL('image/png');

  const pdf = new jsPDF();
  const imgWidth = 190;
  const imgHeight = (canvas.height * imgWidth) / canvas.width;

  pdf.addImage(imgData, 'PNG', 10, 10, imgWidth, imgHeight);
  pdf.save('export.pdf');
};
</script>

<style scoped>
.content {
  padding: 20px;
  background: white;
}
</style>

Invoice Generator with Vue

Complete invoice generator example:

<template>
  <div class="invoice-generator">
    <h2>Invoice Generator</h2>

    <form @submit.prevent="generateInvoice">
      <div class="form-group">
        <label>Client Name</label>
        <input v-model="invoice.clientName" required />
      </div>

      <div class="form-group">
        <label>Email</label>
        <input v-model="invoice.email" type="email" required />
      </div>

      <div class="form-group">
        <label>Invoice Number</label>
        <input v-model="invoice.invoiceNumber" required />
      </div>

      <div class="form-group">
        <label>Amount</label>
        <input v-model="invoice.amount" type="number" required />
      </div>

      <div class="form-group">
        <label>Date</label>
        <input v-model="invoice.date" type="date" required />
      </div>

      <button type="submit" class="btn-primary">
        Generate Invoice
      </button>
    </form>
  </div>
</template>

<script setup>
import { reactive } from 'vue';
import jsPDF from 'jspdf';

const invoice = reactive({
  clientName: '',
  email: '',
  invoiceNumber: '',
  amount: '',
  date: ''
});

const generateInvoice = () => {
  const doc = new jsPDF();
  let y = 20;

  // Company header
  doc.setFontSize(22);
  doc.setFont(undefined, 'bold');
  doc.text('YOUR COMPANY', 20, y);

  doc.setFontSize(10);
  doc.setFont(undefined, 'normal');
  y += 10;
  doc.text('123 Business Street', 20, y);
  y += 5;
  doc.text('contact@company.com', 20, y);

  // Invoice title
  y += 15;
  doc.setFontSize(20);
  doc.setFont(undefined, 'bold');
  doc.text('INVOICE', 20, y);

  // Invoice details
  y += 12;
  doc.setFontSize(11);
  doc.setFont(undefined, 'normal');
  doc.text(`Invoice #: ${invoice.invoiceNumber}`, 20, y);
  doc.text(`Date: ${invoice.date}`, 150, y, { align: 'right' });

  // Client info
  y += 15;
  doc.setFont(undefined, 'bold');
  doc.text('BILL TO:', 20, y);
  y += 6;
  doc.setFont(undefined, 'normal');
  doc.text(invoice.clientName, 20, y);
  y += 5;
  doc.text(invoice.email, 20, y);

  // Amount table
  y += 20;
  doc.setFillColor(240, 240, 240);
  doc.rect(20, y - 5, 170, 8, 'F');
  doc.setFont(undefined, 'bold');
  doc.text('Description', 22, y);
  doc.text('Amount', 170, y);

  y += 10;
  doc.setFont(undefined, 'normal');
  doc.text('Services Rendered', 22, y);
  doc.text(`$${invoice.amount}`, 170, y);

  // Total
  y += 15;
  doc.line(115, y, 190, y);
  y += 8;
  doc.setFont(undefined, 'bold');
  doc.setFontSize(13);
  doc.text('TOTAL:', 140, y);
  doc.text(`$${invoice.amount}`, 170, y);

  // Footer
  const pageHeight = doc.internal.pageSize.height;
  doc.setFontSize(9);
  doc.setFont(undefined, 'italic');
  doc.text('Thank you for your business!', 105, pageHeight - 20, { align: 'center' });

  doc.save(`invoice-${invoice.invoiceNumber}.pdf`);
};
</script>

<style scoped>
.invoice-generator {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.btn-primary {
  background: #42b883;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.btn-primary:hover {
  background: #35a372;
}
</style>

Multi-Page Documents

Handle documents with multiple pages:

<template>
  <button @click="generateMultiPagePDF">
    Generate Multi-Page PDF
  </button>
</template>

<script setup>
import jsPDF from 'jspdf';

const generateMultiPagePDF = () => {
  const doc = new jsPDF();

  // Page 1
  doc.setFontSize(20);
  doc.text('Page 1', 20, 20);
  doc.setFontSize(12);
  doc.text('This is the first page content.', 20, 35);

  // Page 2
  doc.addPage();
  doc.setFontSize(20);
  doc.text('Page 2', 20, 20);
  doc.setFontSize(12);
  doc.text('This is the second page content.', 20, 35);

  // Page 3
  doc.addPage();
  doc.setFontSize(20);
  doc.text('Page 3', 20, 20);
  doc.setFontSize(12);
  doc.text('This is the third page content.', 20, 35);

  doc.save('multi-page.pdf');
};
</script>

Reusable PDF Service

Create a composable for PDF generation:

// composables/usePDF.js
import jsPDF from 'jspdf';

export function usePDF() {
  const createBasicPDF = (title, content) => {
    const doc = new jsPDF();

    doc.setFontSize(18);
    doc.text(title, 20, 20);

    doc.setFontSize(12);
    const lines = doc.splitTextToSize(content, 170);
    doc.text(lines, 20, 35);

    return doc;
  };

  const downloadPDF = (doc, filename) => {
    doc.save(filename);
  };

  const previewPDF = (doc) => {
    const blob = doc.output('blob');
    const url = URL.createObjectURL(blob);
    window.open(url, '_blank');
  };

  return {
    createBasicPDF,
    downloadPDF,
    previewPDF
  };
}

Use the composable in your component:

<template>
  <div>
    <input v-model="title" placeholder="Title" />
    <textarea v-model="content" placeholder="Content"></textarea>

    <button @click="download">Download</button>
    <button @click="preview">Preview</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { usePDF } from '@/composables/usePDF';

const title = ref('My Document');
const content = ref('Document content goes here...');

const { createBasicPDF, downloadPDF, previewPDF } = usePDF();

const download = () => {
  const doc = createBasicPDF(title.value, content.value);
  downloadPDF(doc, `${title.value}.pdf`);
};

const preview = () => {
  const doc = createBasicPDF(title.value, content.value);
  previewPDF(doc);
};
</script>

Adding Images

Include images in your PDFs:

<template>
  <div>
    <input type="file" @change="handleFileUpload" accept="image/*" />
    <button @click="generatePDFWithImage">Generate PDF with Image</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import jsPDF from 'jspdf';

const imageData = ref(null);

const handleFileUpload = (event) => {
  const file = event.target.files[0];
  const reader = new FileReader();

  reader.onload = (e) => {
    imageData.value = e.target.result;
  };

  reader.readAsDataURL(file);
};

const generatePDFWithImage = () => {
  if (!imageData.value) {
    alert('Please select an image first');
    return;
  }

  const doc = new jsPDF();

  doc.text('Document with Image', 20, 20);
  doc.addImage(imageData.value, 'PNG', 15, 40, 180, 160);

  doc.save('with-image.pdf');
};
</script>

Key Methods Reference

Common jsPDF methods for Vue:

• new jsPDF() - Create new document
• doc.text(text, x, y) - Add text
• doc.setFontSize(size) - Set font size
• doc.setFont(undefined, style) - Set font style (bold/italic)
• doc.setTextColor(r, g, b) - Set text color
• doc.addPage() - Add new page
• doc.addImage(data, format, x, y, width, height) - Add image
• doc.rect(x, y, width, height, style) - Draw rectangle
• doc.line(x1, y1, x2, y2) - Draw line
• doc.save(filename) - Download PDF

Tips for Vue Integration

1. Use ref() for template refs when capturing DOM elements
2. Use reactive() for form data objects
3. Create composables for reusable PDF logic
4. Handle async operations with async/await
5. Add loading states during PDF generation
6. Validate form data before generating PDFs
7. Use computed properties for dynamic calculations

Performance Tips

• Generate PDFs only on user action
• Show loading indicators for large documents
• Optimize images before adding to PDFs
• Use pagination for long content
• Cache reusable PDF templates

Browser Compatibility

jsPDF works in all modern browsers with Vue.js:

• Chrome 60+
• Firefox 55+
• Safari 11+
• Edge 79+

You now have everything you need to generate professional PDFs in your Vue.js applications!