什么是打印DIV内容的最佳方式？

对早期版本的轻微更改 - 在CHROME上测试

function PrintElem(elem)
{
    var mywindow = window.open('', 'PRINT', 'height=400,);

    mywindow.document.write('');
    mywindow.document.write('');
    mywindow.document.write('
' + document.title  + '
');
    mywindow.document.write(document.getElementById(elem).innerHTML);
    mywindow.document.write('');

    mywindow.document.close(); // necessary for IE >= 10
    mywindow.focus(); // necessary for IE >= 10*/

    mywindow.print();
    mywindow.close();

    return true;
}

您的打印按钮将如下所示:

Print

编辑:如果您有需要保留的表单数据,克隆将不会复制该表单数据,因此您只需要获取所有表单数据并在还原后将其替换为:

从这里http://forums.asp.net/t/1261525.aspx

//HTML Page
//Other content you wouldn't like to print






The Div content which you want to print



//Other content you wouldn't like to print
//Other content you wouldn't like to print

我使用Bill Paetzke答案打印div包含图像,但它不适用于谷歌浏览器

我只需添加此行myWindow.onload=function(){以使其工作,这里是完整的代码

    


    

        This will be printed.
        
    
    

        This will not be printed.
    
    

        Nor will this.
    
    

我希望这可以帮助别人

function printdiv(printdivname)
{
var headstr = "";
var footstr = "";
var newstr = document.getElementById(printdivname).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr+newstr+footstr;
window.print();
document.body.innerHTML = oldstr;
return false;
}

这将打印您想要的div区域并将内容设置回原样.printdivname是要打印的div.

创建一个单独的打印样式表,隐藏除要打印的内容之外的所有其他元素.'media="print"加载时标记它:

这允许您为打印输出加载完全不同的样式表.

如果要强制为页面显示浏览器的打印对话框,可以使用JQuery在加载时执行此操作:

$(function() { window.print(); });

或触发您想要的任何其他事件,例如用户单击按钮.

我创作了一个插件来解决这个问题.我对那里的插件不满意,并着手制作更广泛/可配置的内容.

https://github.com/jasonday/printThis

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

CSS媒体查询解决方案假设只有一个div可以打印.

javascript解决方案仅适用于某些浏览器.

销毁父窗口内容并重新创建它会造成混乱.

我对上述解决方案进行了改进.以下是我测试过的具有以下优点的方法.

适用于所有浏览器,包括IE,Chrome,Safari和Firefox.

不破坏并重新加载父窗口.

可以在页面中打印任意数量的DIV.

使用html模板以避免容易出错的字符串连接.

要点:

必须在新创建的窗口上有一个onload ="window.print()".

不要从父级调用targetwindow.close()或targetwindow.print().

确保你做targetwindow.document.close()和target.focus()

我正在使用jquery,但你也可以使用普通的javascript做同样的技术.

你可以在这里看到这个http://math.tools/table/multiplication.您可以通过单击框标题上的打印按钮单独打印每个表.

 Print Para 1
 Print Para 2
  

  Para 1 : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  


  Para 2 : Lorem 2 ipsum 2 dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  

    function printDiv(divName) {

        var printContents = document.getElementById(divName).innerHTML;
        w = window.open();

        w.document.write(printContents);
        w.document.write('' + 'window.onload = function() { window.print(); window.close(); };' + '');

        w.document.close(); // necessary for IE >= 10
        w.focus(); // necessary for IE >= 10

        return true;
    }