Styjun

How do campaign rallies gain candidates votes?

What to do when you reach a conclusion and find out later on that someone else already did?

What should I say when a company asks you why someone (a friend) who was fired left?

Can GPL and BSD licensed applications be used for government work?

No-cloning theorem does not seem precise

Problem loading expl3 in plain TeX

Area of parallelogram = Area of square. Shear transform

Is the apartment I want to rent a scam?

Can two figures have the same area, perimeter, and same number of segments have different shape?

How did C64 games handle music during gameplay?

Terence Tao - type books in other fields?

Why is chess failing to attract big name sponsors?

What is a reasonable time for modern human society to adapt to dungeons?

A planet illuminated by a black hole?

Should I leave my PhD after 3 years with a Masters?

Marketing Cloud Query Activity is not pulling in data for newly added fields to target Data Extension

Passing lines from the text file of a list of files to or as arguments

Sextortion with actual password not found in leaks

Why do people say "I am broke" instead of "I am broken"?

How to optimize IN query on indexed column

Grid/table with lots of buttons

How can I make sure my players' decisions have consequences?

How do professional electronic musicians/sound engineers combat listening fatigue?

"I you already know": is this proper English?

Printing an iframe to a PDF - how to get content from the page using VueJS

SecurityError: Blocked a frame with origin from accessing a cross-origin frameRemove border from IFrameResizing an iframe based on contentHow to apply CSS to iframe?Invoking JavaScript code in an iframe from the parent pageHow to identify if a webpage is being loaded inside an iframe or directly into the browser window?jQuery/JavaScript: accessing contents of an iframehow to access iFrame parent page using jquery?Adjust width and height of iframe to fit with content in itMake iframe automatically adjust height according to the contents without using scrollbar?How can I set the default filename for the Chrome print dialog from within an iframe?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

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.

vue.js iframe jspdf

share|improve this question

asked Mar 26 at 16:10

floyd.pepperfloyd.pepper

1644 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  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 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.
  
  – floyd.pepper
  Mar 26 at 16:45
  

  
  
  
  

add a comment | 

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.

vue.js iframe jspdf

share|improve this question

asked Mar 26 at 16:10

floyd.pepperfloyd.pepper

1644 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  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 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.
  
  – floyd.pepper
  Mar 26 at 16:45
  

  
  
  
  

add a comment | 

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.

vue.js iframe jspdf

share|improve this question

asked Mar 26 at 16:10

floyd.pepperfloyd.pepper

1644 bronze badges

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

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")
 

 

share|improve this question

asked Mar 26 at 16:10

floyd.pepperfloyd.pepper

1644 bronze badges

share|improve this question

asked Mar 26 at 16:10

floyd.pepperfloyd.pepper

1644 bronze badges

asked Mar 26 at 16:10

floyd.pepperfloyd.pepper

1644 bronze badges

asked Mar 26 at 16:10

floyd.pepperfloyd.pepper

1644 bronze badges

1 Answer
1

active

oldest

votes

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.

2. However, as explained very well in this solution, I ran into a same-origin-policy issue. This is what @hammerbot referred in his comment.

share|improve this answer

answered Mar 26 at 17:23

floyd.pepperfloyd.pepper

1644 bronze badges

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55361635%2fprinting-an-iframe-to-a-pdf-how-to-get-content-from-the-page-using-vuejs%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

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.

2. However, as explained very well in this solution, I ran into a same-origin-policy issue. This is what @hammerbot referred in his comment.

share|improve this answer

answered Mar 26 at 17:23

floyd.pepperfloyd.pepper

1644 bronze badges

add a comment | 

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.

2. However, as explained very well in this solution, I ran into a same-origin-policy issue. This is what @hammerbot referred in his comment.

share|improve this answer

answered Mar 26 at 17:23

floyd.pepperfloyd.pepper

1644 bronze badges

add a comment | 

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.

2. However, as explained very well in this solution, I ran into a same-origin-policy issue. This is what @hammerbot referred in his comment.

share|improve this answer

answered Mar 26 at 17:23

floyd.pepperfloyd.pepper

1644 bronze badges

var iFrameBody = document.getElementById('myiframe')

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

share|improve this answer

answered Mar 26 at 17:23

floyd.pepperfloyd.pepper

1644 bronze badges

answered Mar 26 at 17:23

floyd.pepperfloyd.pepper

1644 bronze badges

answered Mar 26 at 17:23

floyd.pepperfloyd.pepper

1644 bronze badges