in dem man PDF ´s per Link in den Blockeigenschaften eingeben kann und
mittels Google Viewer auch für Handys sichtbar machen kann
Testen der Ansicht hier : https://volker1.mobirisesite.com/
Code Hier :
HTML Teil:
Code: Alles auswählen
<section data-bs-version="5.1" class="pdf-viewer-block">
<mbr-parameters>
<input type="text" title="PDF-Datei (Pfad oder URL)" name="pdfFile" value="https://www.niederastroth.de/agb.pdf" placeholder="/assets/docs/datei.pdf oder https://...">
<input type="range" inline title="Höhe (px)" name="pdfHeight" min="300" max="1200" step="50" value="800">
</mbr-parameters>
<div class="container">
<div class="pdf-wrapper" mbr-style="{'height': pdfHeight + 'px'}">
<iframe mbr-style="{'height': pdfHeight + 'px'}" src="https://docs.google.com/gview?url={{location.origin + pdfFile}}&embedded=true" class="pdf-frame" frameborder="0" allowfullscreen></iframe>
</div>
<div class="text-center mt-3">
<a class="btn btn-primary" href="{{pdfFile}}" target="_blank">PDF öffnen / herunterladen</a>
</div>
</div>
</section>CSS Teil Hier :
Code: Alles auswählen
.pdf-wrapper {
position: relative;
width: 100%;
aspect-ratio: (3 / 4);
border-radius: 0.5rem;
overflow: hidden;
background-color: #fff;
}
.pdf-frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
@media (max-width: 768px) {
.pdf-wrapper {
aspect-ratio: (4 / 5);
}
}
