Printable link directory for an HTML page

The core of this project is a JavaScript routine created by tollwerk which — when applied on an HTML page — extracts all links on the page and appends a printable link directory to the end of the page. The links are numbered and a tiny footnote reference is inserted right after the occurrence on the page.

When there are multiple references to the same URL within the page, it will only be added once to the link directory (which is why the tollwerk website is contained twice on this demo page 😉).
Relative URLs will be resolved to absolute URLs.
If there's a link directory on the page already, it will be deleted first (along with the references).

In addition, each link in the directory will be decorated with a small QR code encoding the link URL so that you can use a QR code scanner to visit the link. QR codes are created with this library.

Usage

To build a link directory, please include the script in your page and call the printlinks() function:

<script src="https://cdn.jsdelivr.net/gh/tollwerk/printlinks/dist/printlinks.min.js"></script>
<script>
    printlinks();
</script>

By default, the method uses the selector a[href]:not([href^="javascript:"]) to detect links in the page (= will detect each and every link pointing to a regular URL). If you want to customize the selector (e.g. for excluding navigations), you may provide a custom selector:

<script src="https://cdn.jsdelivr.net/gh/tollwerk/printlinks/dist/printlinks.min.js"></script>
<script>
    printlinks('main a[href]:not([href^="javascript:"])');
</script>

You can use the printlinks() function with the onbeforeprint event to always build the link directory right before printing:

<script src="https://cdn.jsdelivr.net/gh/tollwerk/printlinks/dist/printlinks.min.js"></script>
<script>
    window.addEventListener('beforeprint', printlinks);
</script>

You might want to combine this with a print stylesheet to only display the link directory and references when printing:

.tw-linklist, .tw-linkref {
    display: none;
}
@media print {
    .tw-linklist { display: block; }
    .tw-linkref { display: inline; }
}

Installation as bookmarklet

To install the script as a bookmarklet, drag the following link to your browser bookmarks:

Printable Link Directory

You may also click on the link to test the script on this very page. Be aware that the bookmarklet uses the default selector for links, i.e. it processes every link on the page (including menus etc.).