Question

我正在尝试使用按钮打印文档，但每次尝试按钮都不起作用。

        var printContents = document.getElementById("test").innerHTML;
        var originalContents = document.body.innerHTML;

        document.body.innerHTML = printContents;

        window.print();

        document.body.innerHTML = originalContents;

当这不起作用时，我打开控制台尝试它，但后来我得到了这个

TypeError：无法读取null

的属性'innerHTML'

我正在创建一个没有任何内容的空html页面，而是一个运行代码的短语和按钮。

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

但这也没有做任何事情。

编辑：只有JavaScript才有办法吗？这是我为学校项目做的最后一件事，但我不知道Jquery：s，老师说用Javascript可以做到这一点。

Answer 1

在尝试访问页面上的任何元素之前，您需要等待文档准备就绪。

在SO和其他地方有很多页面可以处理这个主题。这是一个：

$(document).ready equivalent without jQuery

Answer 2

看起来你在文档准备好之前访问元素 - 你可以包含像jQuery这样的东西吗？

见这里：http://jsbin.com/edeNIPE/1/

但是，这不是打印内容的最佳方式，您是否考虑过使用打印样式表（http://coding.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/）来隐藏节目元素？

@media print {
   .some-class{
       display:none;
   }
}

如果您不想使用JQuery，请按照要求：http://jsbin.com/edeNIPE/1/

function init(){
  var printContents = document.getElementById("test").innerHTML;
  var originalContents = document.body.innerHTML;
  document.body.innerHTML = printContents;

  window.print();
  document.body.innerHTML = originalContents;
 };

window.onLoad = init();

Answer 3

在此尝试：好的，这是：Fiddle

<强> HTML

<button onclick="myFunction()">Click me</button>
<div id="test">This is supposed to print</div>

<强> CSS

#test
{
   display:none;
}
 @media print {
    #test
   {
       display:block;
   }

 }

JS - 虽然我不确定你为什么要尝试使用innerHTML - 你应该只调用函数并执行window.print(); - 应该这样做。

function myFunction ()
{
    var printContents = document.getElementById("test").innerHTML;
    var originalContents = document.body.innerHTML;

    document.body.innerHTML = printContents;

    window.print();

    document.body.innerHTML = originalContents;
}

window.print（）不起作用

3 个答案: