Làm cách nào để in iframe?

Question

Tôi đã tạo phiên bản có thể in dữ liệu của mình bằng nhiều iframe để hiển thị chi tiết đơn hàng. Tuy nhiên, nếu bất kỳ nội dung iframe nào của tôi lớn hơn một trang, chúng sẽ bị cắt khi in (chúng hiển thị tốt trên màn hình). Tất cả các iframe của tôi đều quay trở lại cùng một miền và tôi đang sử dụng chức năng File-> Print của trình duyệt để in. Tôi không nghĩ rằng đó là một lỗi cụ thể của trình duyệt khi tôi nhận được kết quả tương tự trong IE & FF.

Tôi cần làm gì để in tài liệu HTML có chứa nhiều iframe?

Answer 1

Tôi tìm thấy một câu trả lời here. Mặc dù ít hơn lý tưởng, nó sẽ cho phép tôi in bản ghi chủ đầu tiên và sau đó tùy chọn in từng mục hàng dưới dạng công việc in riêng biệt bằng cách in từng khung nội tuyến riêng lẻ.

Answer 2

Tôi không tin rằng có một cách dễ dàng để thực hiện việc này. Nếu tất cả chúng trên cùng một tên miền, tại sao bạn lại sử dụng IFRAME? Tại sao không đưa dữ liệu trực tiếp vào trang? Nếu bạn đang tìm kiếm cuộn, một div với height: ###px; overflow: auto; sẽ cho phép nó mà không cần phải sử dụng IFRAME và bản định kiểu in CSS sẽ cho phép bạn lấy CSS tràn/chiều cao khi người dùng truy cập in.

Answer 3

Hãy thử như sau (chỉ là một phỏng đoán) ở dưới cùng của CSS của bạn:

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

Answer 4

Có nhiều câu trả lời khác nhau cho vấn đề này tùy thuộc vào công cụ trình duyệt. Để giải quyết những vấn đề này theo cách đơn giản trên nhiều trình duyệt, tôi đã tạo ra https://github.com/noderaider/print.

tôi cung cấp hai gói NPM:

• print-utils - Generic thư viện JavaScript
• react-focus - Phản ứng thành phần iframe

Cách sử dụng mà không cần Phản ứng

Cài đặt qua 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() 

---

sử dụng cho phép Phản ứng

npm i -S react-focus

Cách sử dụng:

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