Question

我有一个HTML页面，它是某个程序的输出。该程序经常用于产生证据，将此证据导出为PDF将会很有帮助。

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

我依靠浏览器能力打印到PDF而不是打印机。我尝试使用jsPDF，但它不能正确支持<pre>标记，这些标记在我的文字中很常见。

该文档是一个给定的HTML，其中两个<div>与滚动条并排。

我已经有了成功对齐所需位置的两列的代码，以及一个使用window.print()打印它的按钮。它看起来像这样：

function align(loc) {
  $('#1').scrollTop($("#mark0"+loc).offset().top);
  $('#2').scrollTop($("#mark1"+loc).offset().top);
}

function print() {
  window.print();
}

// All locations are known in advance
function printAll() {
  for (i=1; i<=3; i++) {
    align(i);
    print();
  }
}

<div id=0 style='left:0; overflow:scroll; height:100%; width:50%'>
    A lot of text...
    <span id='mark01' />
    A lot of text...
    <span id='mark02' />
    A lot of text...
    <span id='mark03' />
    A lot of text...
</div>

<div id=1 style='right:0; overflow:scroll; height:100%; width:50%'>
    <pre>
        Some text.
        <b>
            A lot of text...
            <span id='mark11' />
            Some text.
        </b>
        Some text.
        <b>
            A lot of text...
        </b>
        <span id='mark12' />
        A lot of text...
        <span id='mark13' />
        <b>
            A lot of text...
        </b>
    </pre>
</div>

目前，我必须使用脚本对齐列（用户选择其中一个对齐），然后打印到PDF（用户单击打印按钮），然后对齐到不同的位置，然后再次打印，依此类推

有没有办法让这个过程自动化？我想创建一个javascript脚本，它会多次调用align()，然后调用print()，它将打印在一个PDF中。

printAll()示例显然不起作用。

Answer 1

使用JS，我构建了一个用于打印的新部分，然后将内容移入其中。

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

<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>

第一部分很简单，但很明显原始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);
}

完成构建打印区域后，打开开发工具并（1）删除原始#0和#1 DOM节点，然后（2）使用CSS直到打印布局很满意。

通过JavaScript

1 个答案: