Comment imprimer des iframes?

Question

J'ai construit une version imprimable de mes données en utilisant plusieurs iframes pour afficher les détails des éléments de ligne. Cependant, si l'un de mes contenus iframe est plus grand qu'une page, ils sont coupés lors de l'impression (ils s'affichent bien sur l'écran). Toutes mes iframes pointent vers le même domaine et j'utilise la fonction File-> Print du navigateur pour imprimer. Je ne pense pas que ce soit un bug spécifique au navigateur car j'obtiens les mêmes résultats dans IE & FF.

Que dois-je faire pour imprimer un document HTML contenant plusieurs iframes?

Answer 1

Je trouve une réponse here. Bien qu'inférieur à l'idéal, cela me permettra d'imprimer la fiche en premier, puis d'imprimer chaque élément de campagne en tant que travail d'impression séparé en imprimant chaque cadre individuellement.

Answer 2

Je ne crois pas qu'il existe un moyen facile de le faire. S'ils sont tous sur le même domaine, pourquoi utilisez-vous IFRAME? Pourquoi ne pas mettre les données directement dans la page? Si vous recherchez un défilement, un div avec height: ###px; overflow: auto; le permet sans avoir à utiliser les IFRAME, et une feuille de style d'impression CSS vous permet d'enlever le CSS overflow/height lorsque l'utilisateur frappe l'impression.

Answer 3

Effectuez les opérations suivantes (juste une supposition) au bas de votre CSS:

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

Answer 4

Il existe différentes réponses à ce problème selon le moteur du navigateur. Pour résoudre ces problèmes d'une manière simple par navigateur, j'ai créé https://github.com/noderaider/print.

J'offre deux forfaits NPM:

• print-utils - bibliothèque JavaScript générique
• react-focus - React composant iframe

Utilisation sans React

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

---

Utilisation avec React

npm i -S react-focus

Utilisation:

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