1

I am trying to print a dashboard from my app. The dashboard has embedded iFrame graphs and I want to include them on the PDF.

I am using JSPDF. I am able to generate a PDF of text elements so the plugin is working correctly.

My question is how do I get the content from the iFrame. Here's where I am so far:

In my html file:

<iframe class="myiframe" v-bind:src="iframe_url"></iframe>

and my vuejs script:

import jsPDF from 'jspdf'
export default {
    methods: {
        downloadPDF() {
           const doc = new jsPDF();
          // some code...          
          // iFrames
          vOffset + 10
          doc.text(25, vOffset, 'Data Flows')
          var iFrameBody = document.getElementById('myiframe')
          doc.fromHTML(iFrameBody, 15, vOffset)
          doc.save("sample.pdf")
    }

    }

}

The PDF prints correctly but is blank where the iFrame should appear.

I've searched the github repo for jsPDF and also stackoverflow for solutions but haven't found anything that works.

Any tips would be great.

mick.lynch
  • 21
  • 6
  • I'm not sure of what I'm saying here, but it seems quite normal to me. Imagine if you included an iframe from facebook and that you could access to it from the parent you created yourself. That would be some kind of a huge security flaw, wouldn't it? – Hammerbot Mar 26 '19 at 16:22
  • That's true @Hammerbot, but I don't want to alter or edit the content. I just need the element that's rendered on my page as HTML. – mick.lynch Mar 26 '19 at 16:45

1 Answers1

1

Looks like I was running into two issues.

  1. Firstly, I wasn't getting the content from the iFrame correctly. Changing this line
var iFrameBody = document.getElementById('myiframe')

to this 

var iFrameBody = this.$refs.myiframe.contentWindow.document

..gave me access to the iframe document.

  1. However, as explained very well in this solution, I ran into a same-origin-policy issue. This is what @hammerbot referred in his comment.
mick.lynch
  • 21
  • 6