¿Cómo se imprimen iframes?

Question

Creé una versión imprimible de mis datos usando múltiples iframes para mostrar los detalles de la línea de pedido. Sin embargo, si el contenido de mi iframe es más grande que una página, se cortan al imprimir (se muestran bien en la pantalla). Todos mis iframes apuntan al mismo dominio y estoy usando la función Archivo-> Imprimir del navegador para hacer mi impresión. No creo que sea un error específico del navegador ya que obtengo los mismos resultados en IE & FF.

¿Qué debo hacer para imprimir un documento HTML que contenga múltiples iframes?

Answer 1

encontré una respuesta here. Si bien es menos que ideal, me permitirá imprimir primero el registro maestro y luego, opcionalmente, imprimir cada elemento de línea como un trabajo de impresión independiente al imprimir cada uno de los marcos flotantes de forma individual.

Answer 2

No creo que haya una manera fácil de hacerlo. Si todos están en el mismo dominio, ¿por qué estás usando IFRAME? ¿Por qué no poner los datos directamente en la página? Si está buscando un desplazamiento, div con height: ###px; overflow: auto; lo permitiría sin tener que usar IFRAMEs, y una hoja de estilo de impresión CSS le permitiría quitar el CSS de desbordamiento/altura cuando el usuario acceda a la impresión.

Answer 3

intente lo siguiente (sólo una suposición) en la parte inferior de tu CSS:

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

Answer 4

Existen diferentes respuestas a este problema según el motor del navegador. Para resolver estos problemas de una manera simple entre navegadores, creé https://github.com/noderaider/print.

Ofrezco dos paquetes NGP:

• print-utils - Genérico biblioteca JavaScript
• react-focus - Reaccionar componente iframe

uso sin reaccionar

Instalar través 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() 

---

uso con Reaccionar

npm i -S react-focus

Uso:

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