William Jens
William Jens

Reputation: 442

How does one print iframes?

I built a printable version of my data using multiple iframes to display line item details. However, if any of my iframe content is larger than a page they get cut off when printing (they display fine on the screen). All of my iframes point back to the same domain and I'm using the browser's File->Print function to do my printing. I don't think it's a browser specific bug as I get the same results in IE & FF.

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

Upvotes: 6

Views: 11570

Answers (4)

cchamberlain
cchamberlain

Reputation: 17956

There are different answers to this problem depending on the browser engine. To solve these issues in a simple cross-browser way I created https://github.com/noderaider/print.

I offer two npm packages:

Usage without React

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

Usage with React

npm i -S react-focus

Usage:

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

Upvotes: 0

William Jens
William Jens

Reputation: 442

I found an answer here. While less than ideal, it'll allow me to print the master record first and then optionally print each line item as a seperate print job by printing each iframe individually.

Upvotes: 1

Anthony
Anthony

Reputation: 37045

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

@media print {
    iframe {
       overflow: visible;
    }
}

Upvotes: -2

ceejayoz
ceejayoz

Reputation: 179994

I don't believe there's an easy way of doing this. If they're all on the same domain, why are you using IFRAMEs? Why not put the data directly in the page? If you're looking for scrolling, a div with height: ###px; overflow: auto; would allow it without having to use IFRAMEs, and a CSS print stylesheet would allow you to take the overflow/height CSS off when the user hits print.

Upvotes: 2

Related Questions