У меня есть небольшая html форма, которая экспортируется в PDF. Файл PDF будет очень длинным, и мне нужно иметь возможность создавать закладки внутри HTML, чтобы каждая закладка могла ссылаться на раздел. Например, я хотел бы иметь закладку в PDF-документе с пометкой «раздел 6», которая будет ссылаться на раздел 6, когда пользователь нажимает на нее в PDF-файле. Я пробовал разные способы достижения этой цели, включая импорт XML.
Вот моя js скрипка. Надеюсь, я понял!
https://jsfiddle.net/3g59L4cv/2/
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<div id="tab">
<h3>Section 1</h3>
<p> Lorem ipsum dolor sit amet, lectus metus nibh pretium, neque amet nibh dignissim mauris luctus sit, platea ultrices diam interdum lacinia leo at, ante vitae curabitur auctor eget. Ligula purus accumsan nibh dolor, a blandit quisque, feugiat leo condimentum. Pellentesque est adipiscing turpis lacus interdum, enim eros sapien leo diam fermentum, tincidunt magna, integer id pulvinar curabitur et, tortor pellentesque habitasse sit id penatibus. Sed tristique neque diam conubia id, mollis etiam hendrerit libero fringilla nulla, aliquet eget egestas hendrerit non lectus, quos integer lobortis ipsum eu vitae morbi. Mi sed quis dapibus. In turpis ligula fringilla erat tellus, libero ridiculus, donec quis diam, lorem ante consequat a tellus, quae id phasellus mauris suscipit nec nascetur. Convallis cursus neque nec, facilisi sollicitudin donec ante, neque quidem praesent est aenean nisl wisi, eget vestibulum eu, ut ipsum egestas non arcu ea fermentum. Quis pharetra id ut ultricies consectetuer, pretium turpis a arcu, fringilla neque a varius, fermentum duis dolor a fusce molestie morbi, sit nec. Quis et vitae ac sodales lobortis, maecenas mauris dolor ut pede vulputate metus, lacinia mauris eget rhoncus erat pede, luctus ligula augue sodales mauris euismod ut, est est.
</p>
<h3>Section 2</h3>
<p>Ut bibendum volutpat ac ligula tempus, tristique ac ac rhoncus etiam tincidunt, quis blandit dolor habitant tellus curabitur, amet pede. Donec nascetur, pulvinar elementum fermentum aliquet massa. Tortor quis wisi, tortor non. Vel in. Accumsan phasellus consectetuer tortor pede lorem, pharetra mauris ut et porta, posuere quis, amet lacus tellus vel ac nunc. Integer ut eu dolor arcu nullam, vulputate felis fames leo, vitae lacus dui bibendum est, nam eget. At mi et donec cras, mattis eros in ut, condimentum dolor. Urna elementum vel, nec vivamus, egestas amet ac ultricies, a velit et risus lectus ut, mi turpis dui pharetra massa ligula. Commodo cras quisquam mattis. Orci proin, id vehicula pellentesque proin ligula malesuada, phasellus lorem accusamus nascetur sed. Nisl leo assumenda convallis ut tortor a, libero eu sit nunc augue cras a, justo porta et et mauris, elit laoreet metus placerat lectus feugiat gravida, in eu sed mattis tincidunt magna.</p>
<h3>Section 3</h3>
<p>Ut bibendum volutpat ac ligula tempus, tristique ac ac rhoncus etiam tincidunt, quis blandit dolor habitant tellus curabitur, amet pede. Donec nascetur, pulvinar elementum fermentum aliquet massa. Tortor quis wisi, tortor non. Vel in. Accumsan phasellus consectetuer tortor pede lorem, pharetra mauris ut et porta, posuere quis, amet lacus tellus vel ac nunc. Integer ut eu dolor arcu nullam, vulputate felis fames leo, vitae lacus dui bibendum est, nam eget. At mi et donec cras, mattis eros in ut, condimentum dolor. Urna elementum vel, nec vivamus, egestas amet ac ultricies, a velit et risus lectus ut, mi turpis dui pharetra massa ligula. Commodo cras quisquam mattis. Orci proin, id vehicula pellentesque proin ligula malesuada, phasellus lorem accusamus nascetur sed. Nisl leo assumenda convallis ut tortor a, libero eu sit nunc augue cras a, justo porta et et mauris, elit laoreet metus placerat lectus feugiat gravida, in eu sed mattis tincidunt magna.</p>
<h3>Section 4</h3>
<p>Ut bibendum volutpat ac ligula tempus, tristique ac ac rhoncus etiam tincidunt, quis blandit dolor habitant tellus curabitur, amet pede. Donec nascetur, pulvinar elementum fermentum aliquet massa. Tortor quis wisi, tortor non. Vel in. Accumsan phasellus consectetuer tortor pede lorem, pharetra mauris ut et porta, posuere quis, amet lacus tellus vel ac nunc. Integer ut eu dolor arcu nullam, vulputate felis fames leo, vitae lacus dui bibendum est, nam eget. At mi et donec cras, mattis eros in ut, condimentum dolor. Urna elementum vel, nec vivamus, egestas amet ac ultricies, a velit et risus lectus ut, mi turpis dui pharetra massa ligula. Commodo cras quisquam mattis. Orci proin, id vehicula pellentesque proin ligula malesuada, phasellus lorem accusamus nascetur sed. Nisl leo assumenda convallis ut tortor a, libero eu sit nunc augue cras a, justo porta et et mauris, elit laoreet metus placerat lectus feugiat gravida, in eu sed mattis tincidunt magna.</p>
<h3>Section 5</h3>
<p>Ut bibendum volutpat ac ligula tempus, tristique ac ac rhoncus etiam tincidunt, quis blandit dolor habitant tellus curabitur, amet pede. Donec nascetur, pulvinar elementum fermentum aliquet massa. Tortor quis wisi, tortor non. Vel in. Accumsan phasellus consectetuer tortor pede lorem, pharetra mauris ut et porta, posuere quis, amet lacus tellus vel ac nunc. Integer ut eu dolor arcu nullam, vulputate felis fames leo, vitae lacus dui bibendum est, nam eget. At mi et donec cras, mattis eros in ut, condimentum dolor. Urna elementum vel, nec vivamus, egestas amet ac ultricies, a velit et risus lectus ut, mi turpis dui pharetra massa ligula. Commodo cras quisquam mattis. Orci proin, id vehicula pellentesque proin ligula malesuada, phasellus lorem accusamus nascetur sed. Nisl leo assumenda convallis ut tortor a, libero eu sit nunc augue cras a, justo porta et et mauris, elit laoreet metus placerat lectus feugiat gravida, in eu sed mattis tincidunt magna.</p>
<h3>Section 6</h3>
<p>Ut bibendum volutpat ac ligula tempus, tristique ac ac rhoncus etiam tincidunt, quis blandit dolor habitant tellus curabitur, amet pede. Donec nascetur, pulvinar elementum fermentum aliquet massa. Tortor quis wisi, tortor non. Vel in. Accumsan phasellus consectetuer tortor pede lorem, pharetra mauris ut et porta, posuere quis, amet lacus tellus vel ac nunc. Integer ut eu dolor arcu nullam, vulputate felis fames leo, vitae lacus dui bibendum est, nam eget. At mi et donec cras, mattis eros in ut, condimentum dolor. Urna elementum vel, nec vivamus, egestas amet ac ultricies, a velit et risus lectus ut, mi turpis dui pharetra massa ligula. Commodo cras quisquam mattis. Orci proin, id vehicula pellentesque proin ligula malesuada, phasellus lorem accusamus nascetur sed. Nisl leo assumenda convallis ut tortor a, libero eu sit nunc augue cras a, justo porta et et mauris, elit laoreet metus placerat lectus feugiat gravida, in eu sed mattis tincidunt magna.</p></div>
<input type="button" value="Create PDF"
id="btPrint" onclick="createPDF()" />
<script>
function createPDF() {
var sTable = document.getElementById('tab').innerHTML;
var style = "<style>";
style = style + "table {width: 100%;font: 17px Calibri;}";
style = style + "table, th, td {border: solid 1px #DDD; border-collapse: collapse;";
style = style + "padding: 2px 3px;text-align: center;}";
style = style + "</style>";
// CREATE A WINDOW OBJECT.
var win = window.open('', '', 'height=700,width=700');
win.document.write('<html><head>');
win.document.write('<title>Profile</title>'); // <title> FOR PDF HEADER.
win.document.write(style); // ADD STYLE INSIDE THE HEAD TAG.
win.document.write('</head>');
win.document.write('<body>');
win.document.write(sTable); // THE TABLE CONTENTS INSIDE THE BODY TAG.
win.document.write('</body></html>');
win.document.close(); // CLOSE THE CURRENT WINDOW.
win.print(); // PRINT THE CONTENTS.
}
</script>
</body>
</html>