I have a MS Office 365 worksheet that I’ve embedded into my Wix website as an iframe element. The worksheet works as intended, however, it can’t be printed. It used to be that if someone printed the webpage just using the browser’s print function, the iframe element would print, too. But, now that method omits the iframe altogether–it’s just blank. So, I’m looking for a way to print either 1) the entire page with the iframe element, or 2) just the iframe element. Any ideas or guidance would be greatly appreciated.
You can try using the “Print” button within the embedded MS Office 365 worksheet to print the content within the iframe element. Alternatively, you can try using JavaScript to open a new window and print the iframe element content from there. Here are the steps to achieve this:
Add an id attribute to the iframe element in your HTML code, e.g. id=“myFrame”.
Add a “Print” button to your webpage that will trigger the print function using JavaScript.
Add a JavaScript function that will open a new window, load the content of the iframe element into it, and trigger the print function for that window.
Here is an example code snippet for the JavaScript function:
function printIframe() {
var iframe = document.getElementById(“myFrame”);
var iframeWindow = iframe.contentWindow;
var printWindow = window.open(‘’, ‘_blank’, ‘height=600,width=800’);
printWindow.document.write(iframeWindow.document.documentElement.outerHTML);
printWindow.document.close();
printWindow.focus();
printWindow.print();
printWindow.close();
}
You can call this function when the “Print” button is clicked by adding an onclick attribute to the button, e.g. onclick=“printIframe();”. This should open a new window containing the content of the iframe element and trigger the print function for that window, allowing the user to print the iframe content .
Thank you very much for your reply. So, to be clear, because I am a novice to HTML coding, I place the the following code inside the print button:
Print CalculatorAnd, then place the following code inside the webpage’s Page Code Tab (and I substitute “myiFrame” for my actual iframe’s ID):
< html >
< head >
< title > My iFrame </ title >
</ head >
< body >
< script >
function printIframe ( ) {
var iframe = document . getElementById ( “myiFrame” );
var iframeWindow = iframe . contentWindow ;
var printWindow = window . open ( ‘’ , ‘_blank’ , ‘height=600,width=800’ ); printWindow . document . write ( iframeWindow . document . documentElement . outerHTML );
printWindow . document . close ();
printWindow . focus ();
printWindow . print ();
printWindow . close ();
}
</ script >
</ body >
</ html >
This is what I did, but it’s not working. I suspect I’m missing something in my coding. I’m wondering if I need to include the source of my iframe’s contents (the MS Office 365 spreadsheet). Thanks again for any more help/guidance.
<title>Test</title>
Without some explanation or context for this supplied code, this is of no help to me. And from what I can tell, it has nothing to do with printing an iFrame element.
Hi David, that is the code I used to print an iFrame element on wix website is the right code and its working, I will send you the picture, that explain you how to do it step by step but first to make that all of this work your site needs to be upgrade and have a domain as well. See Pic
Eulapro, I do have a Premium Plan and I do have Dev Mode turned on. But, I’m having trouble with your very first step “Add JavaScript”. I can’t find “Dashboard → Settings → Tracking & Analytics”. I’ve looked all over–can you direct me where to find this? Thanks, David
let me send you the picture
First log out and login, when you login you will see your project click on SELECT not on EDIT. another window will be open that is your DASHBOARD at the left side you will see this , See Pic Then just go to setting and follow the step I send to you before.
Eulapro, I think I’ve found it now. It’s under Dashboard → Settings → “Custom Code”, not “Tracking & Analytics”. Step 1 done!
Eulapro, now I’m having problems with Step 2: Add a button. I got to the point where I added a button, but when I right click on it, “Properties” is not an option.
ok let me show stay there
Hi, you do not have to change properties or follow that step, its optional, you going to properties only to change the ID name but you don’t have to, keep going and let me know
Got it. Ok, I completed Step 2. Now I’m on to your Step 3. My iFrame already exists and it already has this code:
](src="https://URL&action=embedview&wdAllowInteractivity=False&ActiveCell='Calculator'!E3&AllowTyping=True&wdHideGridlines=True&wdHideHeaders=True&wdDownloadButton=True&wdInConfigurator=True">) where "URL" is the location of my MS365 Office Excel worksheet that I'm embedding into my website. So, my question is how do I marry this existing code with the code you supplied for this iFrame?Hi, That is different I just show you how to print, what its going to be print with the code I send you, its what you have on your website screen, you have to put both code together on the iframe, but you have to figure out that part, I think what I gave you was helpful, you can print now, what I think , what you have to do, see that you can print with all the codes I gave you then you figure out how to add that excel or new code but at least you can print that is how I can help you
Print iframePrint iframe
This code adds an iframe element to the page with an id of “myIframe”, and a button that, when clicked, calls the printIframe() function. Inside the function, we first get a reference to the iframe element using document.getElementById() . Then, we get a reference to the window object of the iframe using the contentWindow property. Finally, we call the focus() method to give the window focus, and then the print() method to print its contents.
My Sanford Chart
I do appreciate your reply, as I am still trying to make this work. I am struggling to understand the code placed in the webpage vs. the code placed in the iframe itself. I assume this code you supplied is added to the page code–correct? But, do I also need some code to add to my iframe’s code? Right now my iframe code is essentially this: [<iframe ](<iframeid="myIframe"src=“https://www.example.com”>.) [id](<iframeid="myIframe"src=“https://www.example.com”>.) [=](<iframeid="myIframe"src=“https://www.example.com”>.) [“myIframe” ](<iframeid="myIframe"src=“https://www.example.com”>.) [src](<iframeid="myIframe"src=“https://www.example.com”>.) [=](<iframeid="myIframe"src=“https://www.example.com”>.) [“https://www.example.com”](<iframeid="myIframe"src=“https://www.example.com”>.) [>.](<iframeid="myIframe"src=“https://www.example.com”>.) Again, the iframe shows and functions within the webpage as the spreadsheet that it is; my problem is that it just won’t print.
Hi David
I’m trying to achieve the same goal. Right now, it just opens a blank windows.
What about you ?
Thanks
Gaston
I have not resolved this issue yet. My iframe shows and functions as it should on my website, it just won’t print. I used to print the entire webpage (including the iframe) by simply using my browser’s (Chrome) print function, but now that results in a blank space where the iframe should be.
Thanks David
Here is my actual coding (“URL” is replaced by the real link). It opens a blank page when I click the button “Print IFrame”.
<iframe frameborder="1" height="1090" id="bitume" scrolling="no" src="URL
&action=embedview
&wdAllowInteractivity=False
&AllowTyping=True
&Item='Version%20ouverte'!A1%3AE33
&ActiveCell=C8
&wdDownloadButton=False
&wdHideGridlines=True
&wdInConfigurator=True
&edesNext=false
&ejss=false" width="640"></iframe>
<button onclick="printIframe()">Print iframe</button><script>
function printIframe() {
var iframe = document.getElementById("bitume");
var iframeWindow = iframe.contentWindow;
var printWindow = window.open('', '_blank', 'height=600,width=800');
printWindow.document.write(iframeWindow.document.documentElement.outerHTML);
printWindow.document.close();
printWindow.focus();
printWindow.print();
printWindow.close();
}
</script></div>
Right now, it opens a blank window, probably because of
var printWindow = window.open('', '_blank', 'height=600,width=800');
Starting from there, could someone more knowledgeable than I tell me what is wrong and what should be changed to print the spreadsheet?
Thanks
Gaston