0

I have a website with a permanent button for people to download a pdf document (my CV). Permanent meaning that it's present on the nav-bar of the website at all times for people to download it.

But I want to control what is included in the pdf, so I decided to create a new component, named MyCV and use json documents to dynamically build the html that will be eventually extracted to pdf.

So I approached this problem like so:

  • Add the new component MyCV to App.vue
  • Hide the component with v-show="false" because I don't ever want it to be seen
  • On click on the Download button, trigger a custom event exportpdf, which will be picked up by MyCV component and which will trigger the actual export to pdf function.

It sounds very simple and logical in theory, but in practice it's not working (or I may be very rusty when it comes to Vue.js).

The code:

App.vue

<template>
...
   <v-btn small v-on:click="emitExtractPDFEvent()">Download CV</v-btn>

...

   <MyCV
       v-show="false"
       v-on:extractpdf="printToPDF()"
   ></MyCV>
</template>

<script>

      emitExtractPDFEvent: function() {
          this.$emit('extractpdf');
      },
      printToPDF: function() {
        console.log('MAGIC! I'm ready to export the pdf!!!');
      }
</script>

This is definitely not caused by html2canvas or jspdf, as I stripped the method of any html2canvas/ jspdf code just to make sure I got everything right with the whole custom event first.

Thanks in advance!

Iulia Mihet
  • 650
  • 1
  • 10
  • 34

2 Answers2

0

I ended up trying to rephrase the problem and got to this question and answer: How to call function on child component on parent events

I gave up the whole custom event solution and simply ended up triggering the print to pdf method present in the child component from the parent, when the click event is fired.

Iulia Mihet
  • 650
  • 1
  • 10
  • 34
0

You can only generate PDF (printable) of the content that is being displayed on the page. What actually happens is chrome converts the view to an image that can be printed this can be done by using the window.print() function but it will not work until the content is displayed on the screen.

For generating PDF out of json data and without showing it to user, i will recoment you to check some third party libraries like jsreport

Arish Khan
  • 720
  • 1
  • 6
  • 16