-
JavaScript-Dateien einbinden:
Die beiden Dateien
pdfmaker.js
undbingo.js
sowie die Font-Metrik-Dateien für die genutzten Schriftarten werden im Kopf der Seite eingebunden:<script src="j/afm-helvetica.js"></script> <script src="j/pdfmaker.js"></script> <script src="j/bingo.js"></script>
-
In die Seite wird ein
<form>
-Element eingefügt.Das
bingo.js
installiert sich in alle<form>
-Elemente, die ein<button>
-Element mit dem Namencreate-pdf
enthalten:<html> <head> <script src="j/afm-helvetica.js"></script> <script src="j/pdfmaker.js"></script> <script src="j/bingo.js"></script> <title>Bingo!</title> </head> <body> <h1>Bingo!</h1> <form> <button name="create-pdf" type="button">PDF erzeugen</button> </form> </body> </html>
Ausprobieren:
bingo-simple.htm
. -
PDF-Parameter:
Mit Attributen des
<form>
-Elementes können Sie Namen, Titel und Betreff des erzeugten PDFs konfigurieren sowie eine Rückfrage konfigurieren.Attributnamen Inhalt Bedeutung Default data-pdf-confirm
Text Hinweis wird vor der PDF-Erzeugung ausgegeben und muss bestätigt werden. kein Hinweis data-pdf-filename
Name Namensprefix für die heruntergeladenen PDF-Dateien bingo data-pdf-subject
Text Wird in die PDF-Metadaten als "Betreff" aufgenommen. kein Betreff data-pdf-title
Text Wird in die PDF-Metadaten als "Titel" aufgenommen Bingo! -
Coupon-Parameter:
Diese Parameter werden aus
<input>
und<select>
-Elementen des<form>
-Elementes entnommen.Feldnamen Format Einheit Beschreibung Default cards-per-page
Ganzzahl : Ganzzahl Coupons/Zeile, Coupons/Spalte Zahl der Coupons je Druckseite 1:1 card-format
Ganzzahl 4 für 4×4, 5 für 5×5… Format der Coupons 5 für 5×5 n-pages
Ganzzahl Seiten Druckseiten im PDF 1 Ausprobieren:
bingo-format-size.htm
. -
Papierformat:
Auch diese Parameter werden aus
<input>
und<select>
-Elementen des<form>
-Elementes entnommen.Feldnamen Format Einheit Beschreibung page-width-mm
Zahl Millimeter Breite einer Druckseite page-height-mm
Zahl Millimeter Höhe einer Druckseite page-size-mm
Zahl : Zahl Millimeter Breite und Höhe einer Druckseite margin-left-mm
Zahl Millimeter linker Papierrand margin-right-mm
Zahl Millimeter rechter Papierrand margin-left-right-mm
Zahl : Zahl Millimeter linker und rechter Papierrand margin-top-mm
Zahl Millimeter oberer Papierrand margin-bottom-mm
Zahl Millimeter unterer Papierrand margin-top-bottom-mm
Zahl : Zahl Millimeter oberer und unterer Papierrand card-spacing-mm
Zahl Millimeter Abstand zwischen den Coupons Ausprobieren:
bingo-paper.htm
. -
Sie können eine andere Schriftart wählen:
Da das pdfmaker.js keine Schriftarten einbinden kann, können Sie leider nur die Standard-Schriftarten verwenden.
Auch diese Parameter werden aus
<input>
und<select>
-Elementen des<form>
-Elementes entnommen.Feldnamen Format Einheit Beschreibung font-name
Wort Schriftart (Fontmetrik muss geladen sein) font-name-and-lines-per-cell
Word:Zahl Schriftart/Millimeter Schriftart und Zeilen je Feld line-height
Zahl Faktor skaliert den Zeilenabstand lines-per-cell
Zahl Zeilen wird zur Berechnung der Fontgröße genutzt cell-size-mm
Zahl Millimeter Mindestgröße eine Coupon-Feldes Bevor Sie eine Schriftart verwenden, müssen Sie die zugehörige Font-Metrik-Datei einbinden:
Schriftart Font-Metrik-Datei Helvetica
afm-helvetica.js
Helvetica-Bold
afm-helvetica-bold.js
Times-Roman
afm-times-roman.js
Times-Bold
afm-times-bold.js
Courier
afm-courier.js
Courier-Bold
afm-courier-bold.js
Ausprobieren:
bingo-paper-font.htm
. -
Sie können eigene Texte statt der Zahlen verwenden („Bullshit-Bingo”):
Die Texte werden zwischen Wörtern und an Bindestrichen
-
(Unicode \u002d) umgebrochen.Es gibt keine automatische Worttrennung, Trennstellen können mit Soft-Hyphen (Unicode \u00ad) oder mit senkrechtem Strich
(Unicode \u007c) markiert werden.|
Texte können auf zwei Wegen angegeben werden:
-
Texte als Bestandteil der HTML-Seite:
Die Texte werden als die Werte von
data-bingo-text-#
-Attributen des<form>
-Attributes angegeben. Das#
steht für eine Zahl, die Zahlen müssen nicht fortlaufend sein.Im Attribut
data-bingo-lines-per-cell
wird angegeben, wieviele Zeilen in ein Coupon-Feld passen sollen. Daraus wird die Font-Größe berechnet.Attributnamen Inhalt Bedeutung Default data-bingo-text-{123…}
Text Eintrag für ein Bingofeld data-bingo-lines-per-cell
Zahl Wieviele Textzeilen hat ein Bingofeld? 6 Ausprobieren:
bingo-include-text.htm
(siehe Quellcode). -
Texte werden aus externer Datei geladen:
Die URL wird im
data-bingo-text-url
-Attribute des<form>
-Attributes angegeben.Laden von einer fremden Domain funktioniert nur, wenn Cross-Origin Resource Sharing konfiguriert ist.
Attributnamen Inhalt Bedeutung data-bingo-text-url
URL Die Bingo-Texte werden aus dieser Datei geladen Ausprobieren:
bingo-xhr-text.htm
(benutztclickbait.txt
).
-
Das Gesamtpaket bingo.zip enthält auch diese Dokumentation.