Как печатать фреймы?

Question

Я создал версию своих данных для печати, используя несколько фреймов для отображения деталей позиции. Однако, если какой-либо из моих файлов iframe больше страницы, они обрезаются при печати (они хорошо отображаются на экране). Все мои фреймы указывают на один и тот же домен, и я использую функцию браузера File-> Print для печати. Я не думаю, что это ошибка браузера, поскольку я получаю те же результаты в IE & FF.

Что мне нужно сделать, чтобы напечатать документ HTML, содержащий несколько фреймов?

Answer 1

Я не верю, что есть простой способ сделать это. Если они все в одном домене, почему вы используете IFRAME? Почему бы не поместить данные непосредственно на страницу? Если вам нужна прокрутка, то div с height: ###px; overflow: auto; позволит использовать ее без использования IFRAME, а таблица стилей печати CSS позволит вам отключить CSS переполнения / высоты, когда пользователь нажмет на печать.

Answer 2

Я нашел ответ здесь . Хотя это и не идеально, это позволит мне сначала распечатать основную запись, а затем при необходимости распечатать каждую позицию как отдельное задание на печать, печатая каждый iframe отдельно.

Answer 3

Есть разные ответы на эту проблему в зависимости от движка браузера. Чтобы решить эти проблемы простым кросс-браузерным способом, я создал https://github.com/noderaider/print.

Я предлагаю два пакета npm:

• print-utils - Универсальная библиотека JavaScript
• реагирующий фокус - Реактивный компонент iframe

Использование без реакции

Установка через 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()

---

Использование с React

npm i -S react-focus

Использование:

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

Answer 4

Попробуйте следующее (просто предположение) внизу вашего CSS:

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