2012-01-18 94 views
-1

我在使用JavaScript更改模態頁面的內容時,無法讓Google Chrome瀏覽器打印正確的內容。這是我的代碼:Window.print在Google Chrome中打印錯誤的內容

的Javascript:

function printCoupon(couponID) 
{ 
    var originalContents = document.body.innerHTML; 
    var printable = document.getElementById(couponID); 
    var printContents = printable.innerHTML; 

    document.body.innerHTML = printContents; 

    window.print(); 

    document.body.innerHTML = originalContents; 
} 

HTML:

<body> 
    <div id="coupon1"><p>Coupon 1 contents</p></div> 
    <div><a href="javascript:void(0)" onclick="printCoupon('coupon1');return false;">Print Coupon</a></div> 
    <div id="coupon2"><p>Coupon 2 contents</p></div> 
    <div><a href="javascript:void(0)" onclick="printCoupon('coupon2');return false;">Print Coupon</a></div> 
</body> 

這個工程在IE8和FF 3.6,而Chrome 16版畫原創內容,而不是打印內容。

更新:我剛剛發現了另一個問題。在IE9中,父頁面與模態(模態看起來透明)一起打印,而不僅僅是模態。

回答

-1

我已經找到了答案,我的兩個問題。解決方案是將腳本分成三個腳本(打印之前,打印期間和打印之後),並在第二個腳本中使用setTimeout。它現在完美運作。

2

我猜想當您重新分配原始的innerHTML時,打印作業還沒有被髮送。

我希望能有一個CSS的解決方案:

CSS:

@media print{ 
body > div{display:none;} 
.printable{display:block !important} 
} 

JS:

function printCoupon(couponID) 
{ 
    if(window['printable']) 
    { 
    window['printable'].className=''; 
    } 
    window['printable']=document.getElementById(couponID); 
    window['printable'].className='printable'; 
    window.print(); 
} 
+0

感謝您的回答。不幸的是,這有幾個問題。首先,我需要用div的內容替換body中的所有內容。這只是給這個div一個新的類名,並將其他所有內容留下。其次,現在在Chrome中打印預覽失敗。 – gr8dane 2012-01-19 01:08:50

+0

爲什麼你需要更換一切? – 2012-01-19 01:26:35

+0

以便只打印選定的優惠券。網頁上列出了很多優惠券。 – gr8dane 2012-01-19 02:50:02