Ein Streich über den gesuchten Verbrecher, den Sie auf dem Briefkopf ausdrucken können, der jeden angibt, den Sie kennt.
Dieses Beispiel hilft Ihnen, das Prinzip der Webkomponenten zu verstehen oder zu erinnern. Vielleicht können Sie einige neue über Webkomponenten oder Möglichkeiten zum direkten Drucken von Webbrowsern herausfinden.
Wie kannst du es ausführen?
Der einfachste Weg, das Beispiel zu leiten, ist es im Stackblitz zu tun. Wählen Sie einfach Ihren Stapel aus:
- Laufen Sie mit Angular auf Stackblitz
- Laufen Sie mit React auf Stackblitz
- In mobilen Browsern laufen
Wenn Sie in Code eintauchen möchten, verwenden Sie den WebPack Dev -Server im Beispiel über npm i && npm start
Was will ich zeige
- Sie können eine Instanz von Webkomponenten verwenden, um direkt mit seinen Eigenschaften und Methoden zu arbeiten. Es ist bequemer, als String -Attribute und DOM -Ereignisse zu verwenden.
- Verwenden Sie *.d.ts TypeScript -Datei, um die Schnittstelle Ihrer Webkomponente im Paket zu beschreiben.
- Ja, die Webkomponente kann die gesamte DOM der Webseite nach dem Anruf ConnectedCallback -Methode beeinflussen. Verwenden Sie es mit Vorsicht. In diesem Beispiel hat es eine Ausnahme von der Normalen getan.
- Dies ist ein gutes Beispiel für eine "Plug-and-Play" -Architektur, die der starke Anzug von Webkomponenten ist. Für die Druckschwärmere muss keine weitere Einstellung für den Druck erforderlich sind. Sie benötigen einfach Print () -Methode.
- Native JS erlaubte mir schwierige Arbeit mit asynchronen Ladung von Google -Schriftarten und passte einen ganzen Inhalt in eine Druckseite, unabhängig von der Anzahl von Wörtern.
- Es ist nicht schwer, die Abhängigkeiten aufzugeben und ein kleines Paket zu erstellen.
- Sie können die Render () -Methode für den Druck selbst verwenden. Sie können beispielsweise PDF auf der Serverseite über Puppenspieler generieren. Vielleicht ist es schwierig, aber Sie werden dem erwarteten Ergebnis sicher sein.
Ich hoffe, dieses Beispiel wird Ihnen nützlich sein!
