打印DIV的内容

打印DIV内容的最佳方法是什么?

当前回答

我认为目前提出的解决方案有以下缺点:

CSS媒体查询解决方案假设只有一个div要打印。 javascript解决方案只适用于特定的浏览器。破坏父窗口内容并重新创建会造成混乱。

我改进了上面的解决方案。下面是我测试过的一种方法，效果非常好，有以下好处。

适用于所有浏览器，包括IE, Chrome, Safari和firefox。不会破坏和重载父窗口。可以在页面上打印任意数量的DIV。使用HTML模板避免容易出错的字符串连接。

注意事项:

必须在新创建的窗口上有一个onload="window.print()"。不要从父类调用targetwindow.close()或targetwindow.print()。确保执行targetwindow.document.close()和target.focus() 我使用的是jquery，但你也可以使用简单的javascript做同样的技术。你可以在这里看到它的行动https://math.tools/table/multiplication。通过单击框头上的打印按钮，可以分别打印每个表。

2015-10-20 15:57:18

其他回答

如果你想拥有原始文档的所有样式(包括内联样式)，你可以使用这种方法。

复制完整的文档将body替换为要打印的元素。

实现:

class PrintUtil {
  static printDiv(elementId) {
    let printElement = document.getElementById(elementId);
    var printWindow = window.open('', 'PRINT');
    printWindow.document.write(document.documentElement.innerHTML);
    setTimeout(() => { // Needed for large documents
      printWindow.document.body.style.margin = '0 0';
      printWindow.document.body.innerHTML = printElement.outerHTML;
      printWindow.document.close(); // necessary for IE >= 10
      printWindow.focus(); // necessary for IE >= 10*/
      printWindow.print();
      printWindow.close();
    }, 1000)
  }   
}

2018-03-15 14:26:05

下面是一个适用于IE和Chrome的IFrame解决方案:

function printHTML(htmlString) {
    var newIframe = document.createElement('iframe');
    newIframe.width = '1px';
    newIframe.height = '1px';
    newIframe.src = 'about:blank';

    // for IE wait for the IFrame to load so we can access contentWindow.document.body
    newIframe.onload = function() {
        var script_tag = newIframe.contentWindow.document.createElement("script");
        script_tag.type = "text/javascript";
        var script = newIframe.contentWindow.document.createTextNode('function Print(){ window.focus(); window.print(); }');
        script_tag.appendChild(script);

        newIframe.contentWindow.document.body.innerHTML = htmlString;
        newIframe.contentWindow.document.body.appendChild(script_tag);

        // for chrome, a timeout for loading large amounts of content
        setTimeout(function() {
            newIframe.contentWindow.Print();
            newIframe.contentWindow.document.body.removeChild(script_tag);
            newIframe.parentElement.removeChild(newIframe);
        }, 200);
    };
    document.body.appendChild(newIframe);
}

2014-05-19 00:04:09

虽然@BC的答案最好打印一页。

但要打印多页A4大小的同时按ctrl+P以下解决方案可能会有所帮助。

@media print{
html *{
    height:0px!important;
    width:0px !important;
    margin: 0px !important;
    padding: 0px !important;
    min-height: 0px !important;
    line-height: 0px !important;
    overflow: visible !important;
    visibility: hidden ;


}


/*assing myPagesClass to every div you want to print on single separate A4 page*/

 body .myPagesClass {
    z-index: 100 !important;
    visibility: visible !important;
    position: relative !important;
    display: block !important;
    background-color: lightgray !important;
    height: 297mm !important;
    width: 211mm !important;
    position: relative !important;

    padding: 0px;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    orphans: 0!important;
    widows: 0!important;
    overflow: visible !important;
    page-break-after: always;

}
@page{
    size: A4;
    margin: 0mm ;
    orphans: 0!important;
    widows: 0!important;
}}

2014-01-19 06:55:16

在Opera中，试试:

    print_win.document.write('</body></html>');
    print_win.document.close(); // This bit is important
    print_win.print();
    print_win.close();

2013-02-19 18:02:05

只需使用PrintJS

let printjs = document.createElement("script");
printjs.src = "https://printjs-4de6.kxcdn.com/print.min.js";
document.body.appendChild(printjs);

printjs.onload = function (){
    printJS('id_of_div_you_want_to_print', 'html');
}

2021-01-29 10:25:58

打印DIV的内容

推荐文章

最新文章

标签