Generate pdf with jspdf and Vue.js

javascript pdf vuejs2 jspdf
Carlos Uriel Santiago picture Carlos Uriel Santiago · Dec 6, 2017 · Viewed 59.1k times · Source

I am new with Vue.js, and I am trying to generate a PDF, but I have no idea how to do it.

This is what I have:

import * as jsPDF  from "jspdf"

export default {

  props: ['id'],


  methods: {
    pdf () {
      const doc = new jsPDF()
    }
  }

}

Error:

Property or method "pdf" is not defined on the instance but referenced during render

Answer

samayo picture samayo · Dec 6, 2017

First import the PDF library as:

import jsPDF from 'jspdf'

Then simply instantiate the object and give it the contents: 

methods: {
  createPDF () {
    let pdfName = 'test'; 
    var doc = new jsPDF();
    doc.text("Hello World", 10, 10);
    doc.save(pdfName + '.pdf');
  }
}

Make sure to read the documentation for more

Related questions

Generating PDF files with JavaScript

I’m trying to convert XML data into PDF files from a web page and I was hoping I could do this entirely within JavaScript. I need to be able to draw text, images and simple shapes. I would love …

Read More
Download and open PDF file using Ajax

I have an action class that generates a PDF. The contentType is set appropriately. public class MyAction extends ActionSupport { public String execute() { ... ... File report = signedPdfExporter.generateReport(xyzData, props); inputStream = new FileInputStream(report); contentDisposition = "attachment=\"" + report.getName() + "\""; contentType = "application/pdf"; return …

Read More
Print PDF directly from JavaScript

I am building a list of PDFs in HTML. In the list I'd like to include a download link and a print button/link. Is there some way to directly open the Print dialog for the PDF without the user …

Read More