javascript - 打印从服务器加载的内容

Question

我在加载整个页面后通过 JS 从服务器加载一些图片。意味着通过用户点击我正在加载一些图像并将其插入到 DOM 中。

这张图片有唯一ID，现在我只想通过JS帮助打印出这张图片。我为打印目的做了样式文件

* {
    display:none;
    visibility: none;
}
html, body, #out_image_1 {
    background: none;
    display: block !important;
    left: 0px;
    margin: 0px;
    padding: 0px;
    position: relative;
    top: 0px;
}

并调用打印这样的

$("#print-button2").click(function() {
    window.print();
    return false;
})

但是页面是空白的(空的)我哪里错了？

谢谢

Answer 1

有几个原因可能无法打印。

• 您的图像可能包含在另一个元素中，但根据您的 CSS，父元素仍然是 display:none

  只有当 #out_image_1 是 body 的直接子元素时，您的 CSS 才会起作用:
  http://jsfiddle.net/RXMx8/

  但如果 #out_image_1 具有除 body 和 html 之外的任何父元素:
  http://jsfiddle.net/RXMx8/1/

我敢打赌这就是问题所在，但其他原因可能是:

• 默认情况下，您的浏览器未设置为打印图像。使用 window.print() 可能会跳过“打印预览”，这样您就可以打开此设置。

• 您的 HTML 没问题，但您定位的元素错误。

• 你的墨水用完了； )

即使您使用 javascript 添加元素，您仍然应该能够打印它。为了调试，删除 * { display:none; 看看会发生什么。

^{* 对了，应该是visibility: hidden;; “none”不是有效值，但无论如何它对于 display:none 都是多余的，因此您根本不需要它。}