将水平滚动内容打印到下一页,是否可能?

3

我一直在试图打印水平滚动的内容,但一直不成功。我已经到了不想再搜索的地步,觉得是时候求助了。

以下是我想要打印的内容的简化版本:

HTML 代码

<div id="printingDiv">

    <div class='filterRow'>Something long to print#1 Something long to print#2 Something long to print#3 Something long to print#4 Something long to print#5 Something long to print#6 Something long to print#7 Something long to print#8 Something long to print#9 Something long to print#10</div><br/>

    <div class='filterRow'>Something long to print#1 Something long to print#2 Something long to print#3 Something long to print#4 Something long to print#5 Something long to print#6 Something long to print#7 Something long to print#8 Something long to print#9 Something long to print#10</div><br/>

    <div class='filterRow'>Something long to print#1 Something long to print#2 Something long to print#3 Something long to print#4 Something long to print#5 Something long to print#6 Something long to print#7 Something long to print#8 Something long to print#9 Something long to print#10</div><br/>

    <div class='filterRow'>Something long to print#1 Something long to print#2 Something long to print#3 Something long to print#4 Something long to print#5 Something long to print#6 Something long to print#7 Something long to print#8 Something long to print#9 Something long to print#10</div><br/>

</div>

The CSS

.printDiv {
     font-size: 12pt; //else the content adjusts its font-size just to fit the print page
     width: auto;
}

.filterRow {
     white-space: no-wrap; //just for the sake of this example, to make sure the content overflows
     width: auto;
}

The Javascript

$("#printingDiv").show();
window.print();

输出

在打印输出中,我只能看到大约“Something long to print#5”的内容和“Something long to print#6”的一部分。

我想要看到的是从“Something long to print#6”的其余部分到“Something long to print#10”的内容打印在下一页上。

总之,我想要能够打印水平滚动的内容,如果无法适应第一页,则打印在另一页上。这真的可能吗?

我参考了一些链接:

http://alistapart.com/article/goingtoprint

http://meyerweb.com/eric/articles/webrev/200001.html

Print Stylesheets for pages with long horizontal tables - (此链接还有其他选项,这是唯一的方法吗?)

2个回答

3

简单明了:没有...

使用JavaScript无法完全控制打印的方式。最好的方法是将“要打印的长内容#6+”换到下一行。


1
经过数日尝试了各种方法,我必须同意你的看法。 - neuDev33

1
理论上,如果您知道将被剪切的复制文本,并在屏幕上隐藏但打印时可见的块中包含该文本,则可以实现这一点。
<div class="noWrapContent">This is a long piece of text that stops here. This is the text that would be cut off.</div>
<div class="forPrint">This is the text that would be cut off.</div>

然后在 CSS 中:
.forPrint { display: none; }

@media print { display: block;}

总的来说,当你打印时,应该让它自动换行。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接