使用Javascript動態生成HTML頁面

我有一個元素列表，我希望用戶能夠只打印點擊的元素，而不是整個周圍的頁面。元素看起來如下：使用Javascript動態生成HTML頁面

<div class="element" id="#element1">Element 1</div> 
<div class="element" id="#element2">Element 2</div> 
<div class="element" id="#element3">Element 3</div>

爲了能夠只打印該元素的用戶點擊，我使用此代碼來獲取點擊的任何元素：

jQuery(document).ready(function($) { 
    $('.element').click(function() { 
     var clickedEl = $(this).attr('id'); 
     printDiv(clickedEl); 
     return false; 
    }); 
});

的點擊的元素的ID然後傳遞給一個函數，用於打印創建一個非常簡單的HTML頁：

function printDiv(id) {  
    var printContents = document.getElementById(id).innerHTML; 
    var printContentsBefore = '<html><head>\ 
    <link rel="stylesheet" href="/css/blabla_print.css" type="text/css" />\ 
    </head><body><table><tr>'; 
    var printContentsAfter = '</tr></table></body></html>'; 
    var originalContents = document.body.innerHTML; 
    document.body.innerHTML = printContentsBefore + printContents + printContentsAfter; 
    //document.body.innerHTML = printContents; 
    window.print(); 
    document.body.innerHTML = originalContents; 
}

代碼排序的作品，但我有兩個問題：

彈出的打印窗口包含大約一半時間點擊元素的數據。窗戶的另一半是空的。這怎麼可能，我該如何解決它？
在生成的頁面中，我試圖加載一個CSS文件來格式化內容的外觀，但沒有任何運氣。我想盡可能在這裏做什麼，如果是的話，怎麼樣？

並且萬一它是相關的;該代碼正在基於WordPress的頁面上使用。

謝謝！

來源

2015-12-21 danjah

我永遠無法理解爲什麼人們浪費這麼多的努力得到一個元素的ID，只能再使用getElementById得到元素，他們已經有了再次...

$(".element").on("click",function() { 
    printDiv(this); 
}); 

function printDiv(elem) { 
    var before = '...', 
     after = '...', 
     result = before + elem.innerHTML + after; 
    // now do stuff 
}

值得一提的是，window.print()不一定立即開火。它不同步。它只是告訴瀏覽器它應該打開打印框。因此，重新設置originalContents可能會或可能不會弄亂它，正如你所看到的。

您可能希望有一個「取消」按鈕，風格與

@media print { 
    .cancelbutton {display:none} 
}

來完成實際的復位。

另一個需要注意的是，您正在審覈該頁面的innerHTML。除了body元素本身之外，您可能擁有的任何事件處理程序都將被徹底殲滅。請注意這一點。我個人會建議一種不同的方法，一種方法是打開一個新的窗口/標籤，其中只包含要打印的內容（例如，您可以打開一個窗口，然後打開一個窗口，然後選擇document.write）。

來源

2015-12-21 16:39:03

謝謝您的回答和一般反饋。我嘗試刪除重置爲原始內容，但問題仍然存在。儘管如此，我認爲這是我的一個解決方案。看起來window.print（）在很多時候很早就開始了。你是否對我的第二個問題有評論？ – danjah

使用Javascript動態生成HTML頁面

回答

相關問題