用JavaScript列印指定div
阿新 • • 發佈：2021-10-14
首先上程式碼:
function PrintDiv(ID) { var needPrint = document.getElementById(ID); var win = window.open(""); win.document.write('<html><head><link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />' + '<link href="css/app.css" rel="stylesheet" />' + '<link href="PWA.styles.css" rel="stylesheet" /></head><body>' + needPrint.outerHTML + '</body>' + "</html>"); win.document.close(); //Chrome if (navigator.userAgent.indexOf("Chrome") != -1) { win.onload = function () { win.document.execCommand('print'); win.close(); } } //Firefox else { win.print(); win.close(); } }
列印div的幾種寫法
法一: 替換當前頁面
function PrintDiv(ID){
var needPrint = document.getElementById(ID).innerHTML;
var old = document.body.innerHTML;
document.body.innerHTML=needPrint;
window.print();
document.body.innerHTML=old;
}
此法能很好的保留樣式, 但是在Blazor中存在一個問題: 呼叫以後頁面中所有的按鈕都會失效.
問題的產生應該與Blazor框架的底層機制有關, 在此不深究.
法二: 在新頁面中列印
此法需要注意一點: 如果需要保留樣式, 需要將CSS引用一併寫入新頁面, 需要等待頁面載入完成後才能開始列印, 否則列印結果不帶樣式.
等待頁面載入完成在 Firefox 和 Chrome 中的寫法不一樣, 具體請看程式碼.