使用Javascript動態生成HTML頁面

Question

我有一個元素列表，我希望用戶能夠僅打印所單擊的元素，而不打印整個周圍的頁面。 元素如下所示：

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

然后，將clicked元素的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的頁面上使用。

謝謝！

Answer 1

我永遠不會理解為什么人們會花很多精力來獲取元素的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到其中）。

使用Javascript動態生成HTML頁面

問題描述

1 個解決方案

解決方案1
2 已采納 2015-12-21 16:39:03

使用Javascript動態生成HTML頁面

問題描述

1 個解決方案

解決方案1 2 已采納 2015-12-21 16:39:03

解決方案1
2 已采納 2015-12-21 16:39:03