Einbetten von angehängten .pdf-Dokumenten in Bookstack //wp

Die Wiki-Software Bookstack bietet nur die Funktion, .pdf-Dateien anzuhängen. Die folgende Anleitung zeigt, wie die .pdf-Dateien auch in die entsprechende Wiki-Seite eingebettet werden können.

Einmalige Vorarbeit:

Sich als Administrator einloggen, in den Einstellungen den Punkt Personalisierung aufrufen und folgende Einstellung suchen: "Benutzerdefinierter HTML <head> Inhalt"

Folgendes Script in das vorgesehene Feld kopieren:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.466/pdf.min.js"></script>
<style>
canvas[data-pdfurl] {
  background-color: lightgrey;
   width: 100%;
}
.page-content a {
 color: #39f;
text-decoration: underline;
}
.pdf-wrapper {
position: relative;
height: 80vh;
width: 100%;
}
.pdf-wrapper .download-link {
position: absolute;
top: -2em; 
right: 0;
z-index: 50;
}
.pdf-wrapper .pdf-scroller {
height: 100%;
overflow: auto;
}
</style>
<script type="text/javascript">
window.addEventListener('load', function () {
var renderPdf=function(canvas) {
  var url = canvas.dataset.pdfurl;
  var pdf = null;
  // wrap canvas in div
  var wrapper = document.createElement('div');
  wrapper.className='pdf-wrapper';
  var scroller = document.createElement('div');
  scroller.className='pdf-scroller';
  wrapper.appendChild(scroller);
  canvas.parentNode.insertBefore(wrapper, canvas.nextSibling);
  scroller.insertBefore(canvas, null);

  var downloadLink  = document.createElement('a');
  downloadLink.href = url;
  downloadLink.className="download-link";
  downloadLink.innerText = 'Download PDF now ↓';
  wrapper.appendChild(downloadLink);

  var renderPage = function(page) {
    var scale = 1.5;
    var viewport = page.getViewport(scale);
    // Fetch canvas' 2d context
    var context = canvas.getContext('2d');
    // Set dimensions to Canvas
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    canvas.style.maxWidth='100%';
    // Prepare object needed by render method
    var renderContext = {
      canvasContext: context,
      viewport: viewport
    };
    // Render PDF page
    page.render(renderContext);
    if (currentPage < pdf.numPages) {
      currentPage++;
      var newCanvas = document.createElement('canvas');
      scroller.insertBefore(newCanvas, canvas.nextSibling);
      scroller.insertBefore(document.createElement('hr'), canvas.nextSibling);
      canvas=newCanvas;
      pdf.getPage(currentPage).then(renderPage);
    }
  };
  var currentPage = 1;
  pdfjsLib.getDocument(url)
  .then(function(pdfLocal) {
    pdf = pdfLocal;
    return pdf.getPage(1);
  })
  .then(renderPage);
}
Array.prototype.forEach.call(
  document.querySelectorAll('canvas[data-pdfurl]'),
  renderPdf);
});
</script>

Mit "Einstellungen speichern bestätigen"

So können die PDFs nun angehängt werden:

Das PDF muss zunächst als Anhang hochgeladen werden.

In den Anhängen erscheint nun die hochgeladene .pdf-Datei. Wenn man den Mauszeiger darauf bewegt (nicht klicken), sieht man unten links im Browserfenster einen Link der immer gleich aufgebaut ist: https://domain.net/attachments/X. Das X steht hier für die ID des Attachments und wird im weiteren Verlauf sehr wichtig.

Als nächstes wird der Quellcode des Wiki-Eintrages über die Navigationsleiste geöffnet:

An der gewünschten Stelle, wo das PDF erscheinen soll, wird folgende Zeile eingefügt:

<p>&nbsp;<canvas data-pdfurl="https://domain.net/attachments/X"></canvas>&nbsp;</p>

also in meinem Beispiel:

<p>&nbsp;<canvas data-pdfurl="https://denkarium.nreinsch.net/attachments/2"></canvas>&nbsp;</p>