檢測來自iFrame的打印事件

我正在嘗試構建打印解決方案，該解決方案以編程方式使用URL打印PDF文檔並在打印後激發事件。檢測來自iFrame的打印事件

我正在使用下面的「matchMedia」事件偵聽器來使用Chrome（v54）進行測試。對於IE和Firefox，我打算收聽同一個iframe contentWindow對象的「onbeforeprint」和「onafterprint」。

下面是我如何調用打印。 dojo函數只是一個xhr包裝器。

   dojoRequest(url, { 
        handleAs: 'blob' 
       }).then(function (blob) { 
        var src = URL.createObjectURL(blob); 

        printFrame = document.createElement('iframe'); 
        printFrame.id = 'print-frame'; 
        // printFrame.style.display = 'none'; 
        printFrame.src = src; 
        document.body.appendChild(printFrame); 

        var mediaQueryList = printFrame.contentWindow.matchMedia('print'); 
        mediaQueryList.addListener(function (mql) { 
         console.log('print event', mql); 
         debugger; 
        }); 

        setTimeout(function() { 
         printFrame.contentWindow.print(); 
        }, 0); 
       });

除了「打印事件」事件從不觸發，這很適用。我希望它在顯示「打印預覽」窗口時觸發一次，並在點擊「打印」按鈕後再次觸發。

我試着註冊主「窗口」對象相同的事件偵聽器。它在手動啓動打印時（從「文件」菜單中）觸發，但不是在使用上述方法以編程方式啓動打印時觸發。

來源

2016-12-07 Frederic Fortier

要獲得事件，必須包裝你的代碼的iframe的onload裏面，像這樣：

printFrame.onload = function() { 
    var mediaQueryList = printFrame.contentWindow.matchMedia('print'); 
    mediaQueryList.addListener(function (mql) { 
    console.log('print event', mql); 
    }); 

    setTimeout(function() { 
    printFrame.contentWindow.print(); 
    }, 0); 
};

不過，我仍然認爲，這種做法是非常複雜的，而不是爲企業應用程序不夠穩定。

UPDATE：

的jsfiddle鏈接顯示它適用於Chrome 54：https://jsfiddle.net/anhhnt/nj851e52/

來源

2016-12-07 11:14:38 ntahoang

謝謝！我會嘗試。你有沒有更簡單的「企業級」方法？我從pdf.js中獲得了這個：https://github.com/mozilla/pdf.js/issues/5397 –

如上所述，將邏輯放在onload（）函數中似乎沒有什麼不同。 –

我創建了一個小提琴，你可以再次檢查@FredericFortier – ntahoang

檢測來自iFrame的打印事件

回答

相關問題