我使用多個iframe構建了我的數據的可打印版本，以顯示訂單項詳細信息。但是，如果我的任何iframe內容大於一頁，它們在打印時會被切斷（它們在屏幕上顯示的很好）。我所有的iframe指向相同的域，我使用瀏覽器的文件 - >打印功能來完成我的打印。我不認爲這是一個瀏覽器特定的錯誤，因爲我在IE & FF中得到了相同的結果。如何打印iframe？

如何打印包含多個iframe的HTML文檔需要做些什麼？

來源

2010-02-15 William Jens

我找到了答案here。雖然不太理想，但它會允許我先打印主記錄，然後通過單獨打印每個iframe將每個行項目打印爲單獨的打印作業。

來源

2010-02-17 17:27:55

我不相信有這樣做的簡單方法。如果他們都在同一個域中，爲什麼使用IFRAME？爲什麼不直接將數據放在頁面中？如果你正在尋找滾動，div與height: ###px; overflow: auto;將允許它，而不必使用IFRAMEs和CSS打印樣式表將允許您在用戶打印時取消溢出/高度CSS。

來源

2010-02-15 23:23:39 ceejayoz

每個行項目中的HTML有它自己的腳本和不保證跨多個行項目唯一的ID。試圖將它們放在一個頁面上將導致命名空間問題和腳本顯示/隱藏它們不應該的字段。 – 2010-02-16 15:01:42

聽起來就像你已經得到了自己的應用程序設計問題，然後。 – ceejayoz 2010-02-16 16:13:50

不，我還有一個瀏覽器不打印它在屏幕上顯示的問題。 – 2010-02-17 17:25:42

-1

在你的CSS底部試試下面的（只是猜測）：

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

來源

2010-02-15 23:27:56 Anthony

IFRAME不會像那樣溢出。他們有一個高度和寬度。 – ceejayoz 2010-02-16 02:36:32

根據瀏覽器引擎，這個問題有不同的答案。爲了以簡單的跨瀏覽器方式解決這些問題，我創建了https://github.com/noderaider/print。

我提供了兩個NPM包：

print-utils - 通用JavaScript庫
react-focus - 陣營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()

用法與之反應

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

來源

2016-11-07 15:42:52 cchamberlain

如何打印iframe？

回答

用法不作出反應

用法與之反應

相關問題