通过JavaScript为不同的滚动位置打印多个页面

我有一个HTML页面，它是某个程序的输出。 该程序被大量用于产生证据，将这些证据导出为PDF格式将很有帮助

HTML被分成两列。 我需要打印（到PDF）多个页面，以便每页显示两列，其中列的不同部分对齐

我依靠浏览器的能力将文件打印成PDF格式，而不是打印到打印机上。 我尝试使用，但它不支持

<div id="printzone">
    <div class="page">
        <div class="col"> col1 section1 </div>
        <div class="col"> col2 section1 </div>
    </div>
    <div class="page">
        <div class="col"> col1 section2 </div>
        <div class="col"> col2 section2 </div>
    </div>
    ....
</div>


很多文字。。。
很多文字。。。
很多文字。。。
很多文字。。。
一些文本。
很多文字。。。
一些文本。
一些文本。
很多文字。。。
很多文字。。。
很多文字。。。
使用JS，我会构建一个新的版块以供打印，然后将内容移动到其中

目标是生成合理的DOM，如下所示：


col1第1节
col2第1节
col1第2节
col2第2节
....

第一部分很简单，但很明显，原始DOM不适合第二个任务。您可能需要使用原始源代码来完成第二步

也许是这样的：

//获取源代码
var col1Source=$（'#0'）.innerHTML；
//将“”视为分隔符--轰！
var col1Sections=col1Source.split（/]+>/）；
//对col2也这样做
对于（var i=0，
iMax=Math.max（col1Sections.length，col2Sections.length）；
i

完成打印区域的构建后，打开开发工具，（1）删除原始的
#0
和
#1
DOM节点，然后（2）使用CSS直到打印布局令人满意。
@mplungjan我确实将其另存为PDF。但我还是要一个接一个地做。为什么不从服务器上发送PDF呢？@mplungjan这不是一个服务器应用程序。那里没有后端。那么到底是什么问题呢？如果你能呈现一页，你就能呈现两页？这是你的观点。大多数读者希望看到我添加了一个代码示例。我希望有帮助。只有两个
div
s。对齐方式只会改变两种方式中滚动条的位置。我以前考虑过你的方法。复制整个文档几次，然后通过CSS强制分页符一个接一个地放置它们。然而，我想知道是否有一个更简单的解决办法。没有人说要复制任何东西。只需将每对列包装在
中，然后编写
.page{page break before:always；}
或类似内容。如果你擅长CSS，你可以跳过JS，用第n个类型选择器来处理它。只有一对列。打印布局之间的区别在于滚动条的位置。我想我明白了问题所在，因为你的文章包含了页面标记。您有两个巨大的柱，并且希望在几个任意点上垂直对齐它们。除非DOM在相关的地方给你钩子，否则你就完蛋了。将内容复制到布局应用程序中，然后完成。对不起，朋友(
// grab source
var col1Source = $('#0').innerHTML;
// treat '<span id="mark##" />' as a delimiter -- BOOM!
var col1Sections = col1Source.split(/<span id='mark\d+'[^>]+>/);
// do same for col2

for(var i = 0,
    iMax = Math.max(col1Sections.length, col2Sections.length);
    i < iMax;
    i++
) {
    var newPage = $('<div class="page">');
    newPage.append('<div class="col">' + col1Sections[i] + '</div>');
    newPage.append('<div class="col">' + col2Sections[i] + '</div>');
    $('#printzone').append(newPage);
}