Geek Answers Handbook

How to print frames?

I built a printed version of my data using several frames to display position data. However, if any of my iframe content is larger than the page, they are cut off when printed (they display well on the screen). All my frames point to the same domain, and I use the "File-> Print" function of my browser to print. I do not think this is a browser error, as I get the same results in IE and FF.

What do I need to do to print an HTML document containing multiple frames?

+6
html printing iframe
source share
4 answers

I found the answer here . While it is less than ideal, it will allow me to first print the master record, and then additionally print each position as a separate print job, printing each iframe individually.

+1
source share

I do not believe that there is an easy way to do this. If they are all in the same domain, why are you using IFRAME? Why not put the data right on the page? If you are looking for scrolling, div with height: ###px; overflow: auto; height: ###px; overflow: auto; will allow it without using IFRAME, and the CSS print stylesheet will allow you to remove the overflow / height CSS when the user clicks on the print.

+2
source share

Depending on the browser mechanism, there are different answers to this problem. To solve these problems in a simple cross-browser way, I created https://github.com/noderaider/print .

I suggest two npm packages:

Use without reaction

Install via npm :

npm i -S print-utils

HTML:

 <iframe id="print-content" src="/frame.html"></iframe>

JavaScript (ES2015)

 import { usePrintFrame } from 'print-utils' /** Start cross browser print frame */ const disposePrintFrame = usePrintFrame(document.getElementById('print-frame')) /** Stop using print frame */ disposePrintFrame()

Use with React

npm i -S react-focus

Application:

 import React, { Component } from 'react' import reactFocus from 'react-focus' /** Create Focus Component */ const Focus = reactFocus(React) /** * Use the component within your application just like an iframe * it will automatically be printable across all major browsers (IE10+) */ export default class App extends Component { render() { return ( <div> <div> <h2>Welcome to react-focus</h2> </div> <div> <Focus src={`?d=${Date.now()}`} /> </div> </div> ) } }
0
source share

Try the following (just a hunch) at the bottom of your CSS:

 @media print { iframe { overflow: visible; } }
-one
source share

More articles:


All Articles