I have created an HTML page through a program that generates evidence. Exporting this evidence to a PDF format would be beneficial in many situations.
This HTML document is divided into two columns, and I need to print multiple pages to PDF where each page displays the aligned content from both columns.
Instead of printing to a physical printer, I prefer utilizing the browser's capability to print directly to PDF. Although I attempted to use jsPDF, it does not handle <pre>
tags effectively, which are crucial in my text.
The structure of the document consists of two <div>
s placed next to each other with a scrollbar.
I have successfully written the code that aligns the columns as required and added a button to initiate the printing process using window.print()
. The script looks something like this:
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>
Currently, I have to manually align the columns, print to PDF, realign to a different position, print again, and repeat the process.
Is there a way to automate this process? I aim to develop a JavaScript script that will execute align()
, followed by print()
multiple times to generate a single PDF file.
Unfortunately, the example provided in printAll()
does not produce the desired outcome.