Question

这是我的打印功能。

 function printContent() {
        var myWindow = window.open('', '', 'width=600,height=700')
        var headstr = "<html><head><title></title></head><body>";
        var footstr = "</body>";
        var newstr = some text;
        myWindow.document.body.innerHTML = newstr;
        myWindow.print();
        myWindow.close();
}

HTML：

<div>
<div id="text"> </div>
<div id="images"></div>
</div>

我尝试仅在页面上打印“文本”而不是整个页面，但在预览后，动态加载的图像到“图像”div消失。我无法用更新面板解决这个问题。你有什么想法？感谢。

Answer 1

使用图片作为其外部div的背景，而不是使用图片标签。希望这可以帮助。请检查以下代码以供参考。

.bg__image {
  background: url('./images/dummy_image.png') center center no-repeat;
  background-size: 100%;
  height: 100px;
  width: 100px;
  float: left;
}

<div class="bg__image"></div>

Answer 2

我尝试仅打印页面上的“文字”而非整页...

如果您想从打印版本中取出页面的特定部分，请使用@media print CSS规则：

@media print {
    #images {
        display: none;
    }
}

打印预览后，动态加载的图像消失

2 个答案: