Wie man die WaitFor-Klasse verwendet, um die C# PDF-Darstellung zu verzögern
Beim Rendering von PDF-Dokumenten tritt häufig das Problem auf, dass der Rendering-Prozess stattfindet, bevor alle notwendigen Assets und Animationen von JavaScript geladen sind. Dies kann dazu führen, dass das PDF-Dokument unvollständig oder fehlerhaft wiedergegeben wird. Ursprünglich haben wir dieses Problem gelöst, indem wir dem Benutzer die Möglichkeit gaben, eine beliebige Verzögerung einzustellen. Sich auf eine willkürliche Verzögerung zu verlassen, ist jedoch kein zuverlässiger oder effizienter Ansatz.
Um eine robustere Lösung zu bieten, haben wir eine WaitFor-Klasse implementiert, die den PDF-Rendering-Prozess verbessert. Das WaitFor-Objekt von RenderOptions bietet mehrere Optionen, darunter:
PageLoad: Standard-Render ohne Warten.RenderDelay: Einstellung einer willkürlichen Wartezeit.Fonts: Wartet, bis alle Schriftarten geladen sind.JavaScript: Auslösen der Darstellung mit einer JavaScript-Funktion.HTML-Elemente: Wartet auf spezifische HTML-Elemente, wie Element-IDs, Namen, Tag-Namen und Query-Selektoren, um Elemente zu identifizieren.-
NetworkIdle: Warten auf Netzwerk-Leerlauf (0, 2 oder eine benutzerdefinierte Menge).Diese Funktionen stehen für die Umwandlung von HTML-Strings in PDF mit IronPDF, HTML-Dateien in PDF mit IronPDF und Web-URLs in PDF mit IronPDF zur Verfügung. Schauen wir uns die wichtigsten Aspekte dieser neuen Funktion an.
Verwenden von WaitFor zum Verzögern des PDF-Renderns in C#
- Laden Sie die C# IronPDF-Bibliothek herunter, um die PDF-Rendering zu verzögern
- Erzeugen eines PDF-Dokuments aus einem HTML-String, einer Datei oder einer Web-URL
- Verwenden Sie die JavaScript-Methode WaitFor, um das Rendern von einer JavaScript-Funktion auszulösen
- Render verzögern basierend auf der Anzahl der Netzwerkaktivitäten
- Auf bestimmte HTML-Elemente warten sowie darauf, dass alle Schriftarten geladen sind
Erste Schritte mit IronPDF
Beginnen Sie noch heute mit der Verwendung von IronPDF in Ihrem Projekt mit einer kostenlosen Testversion.
Beispiel für standardmäßiges sofortiges Rendern
Standardmäßig erfolgt der Rendering-Prozess unmittelbar nach dem Laden der Seite. Die PageLoad-Methode muss nicht aufgerufen werden, wenn Sie normal rendern möchten.
:path=/static-assets/pdf/content-code-examples/how-to/waitfor-pageload.csusing IronPdf;
ChromePdfRenderer renderer = new ChromePdfRenderer();
// Render as soon as the page is loaded
renderer.RenderingOptions.WaitFor.PageLoad();
PdfDocument pdf = renderer.RenderHtmlAsPdf("<h1>testing</h1>");Beispiel für eine benutzerdefinierte Renderverzögerung
In Situationen, in denen eine bestimmte Verzögerung vor dem Rendern der PDF-Datei erforderlich ist, können Sie eine beliebige Anzahl von Millisekunden als Verzögerung festlegen. Dies ermöglicht eine flexible Anpassung an spezifische zeitliche Anforderungen.
Diese Option funktioniert genauso wie die alte Implementierung mit der RenderingOptions.RenderDelay-Eigenschaft. Die alte Eigenschaft wurde jedoch veraltet, und es wird dringend empfohlen, die neue API, RenderingOptions.WaitFor.RenderDelay, zu verwenden.
:path=/static-assets/pdf/content-code-examples/how-to/waitfor-delay-time.csusing IronPdf;
ChromePdfRenderer renderer = new ChromePdfRenderer();
// Render after 3000ms
renderer.RenderingOptions.WaitFor.RenderDelay(3000);
PdfDocument pdf = renderer.RenderHtmlAsPdf("<h1>testing</h1>");Alle Schriftarten geladen Beispiel
Die Methode AllFontsLoaded in der WaitFor-Klasse ermöglicht es, den PDF-Rendering-Prozess anzuhalten, bis alle Schriften aus externen Quellen wie Google Fonts oder anderen Servern geladen sind. Auf diese Weise wird sichergestellt, dass die endgültige PDF-Datei alle erforderlichen Schriftarten enthält und die beabsichtigte Typografie und das visuelle Erscheinungsbild des Dokuments erhalten bleiben.
:path=/static-assets/pdf/content-code-examples/how-to/waitfor-all-fonts.csusing IronPdf;
string htmlContent = @"
<!DOCTYPE html>
<html lang=""en"">
<head>
<meta charset=""UTF-8"">
<title>Test Registration of Extension</title>
<!-- for google web fonts -->
<link rel=""preconnect"" href=""https://fonts.googleapis.com"">
<link rel=""preconnect"" href=""https://fonts.gstatic.com"" crossorigin>
<link rel=""stylesheet"" href=""https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"" >
<style>
/* for remote fonts */
@font-face {
font-family: 'CustomFont';
src: url('https://stage.gradfinale.co.uk/tcpdf/fonts/avgr65wttf.ttf');
}
p#p1 { font-family: CustomFont, sans-serif; }
/* for local fonts */
@font-face {
font-family: 'LocalCustomFont';
src: local('Arial');
}
p#p3 { font-family: LocalCustomFont, sans-serif; }
</style>
</head>
<body>
<h1>This is Delayed Render Test!</h1>
<p style=""font-family: Roboto, monospace;"">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla scelerisque ligula venenatis erat <strong>scelerisque</strong> auctor.</p>
<p id=""p1"">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla scelerisque ligula venenatis erat <strong>scelerisque</strong> auctor.</p>
<p id=""p3"">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla scelerisque ligula venenatis erat <strong>scelerisque</strong> auctor.</p>
</body>
</html>)";
ChromePdfRenderer renderer = new ChromePdfRenderer();
renderer.RenderingOptions.WaitFor.AllFontsLoaded(10000);
PdfDocument pdf = renderer.RenderHtmlAsPdf(htmlContent);Beispiel für benutzerdefinierte JavaScript-Ausführung
Um mehr Kontrolle über den Rendering-Prozess zu haben, können Sie eine benutzerdefinierte JavaScript-Funktion angeben, die vor dem Rendering des PDF-Dokuments ausgeführt werden muss. Auf diese Weise können Sie alle notwendigen Aufgaben oder Prüfungen durchführen, bevor Sie den Rendering-Prozess einleiten. So kann der Benutzer selbst bestimmen, wann der Rendervorgang ausgelöst werden soll.
In JavaScript wird die Funktion window.ironpdf.notifyRender() verwendet, um die Rendering-Aufgabe auszulösen. Sobald notifyRender() aufgerufen wird, startet der Renderprozess. Sie haben die volle Kontrolle darüber, wann die Funktion aufgerufen werden soll.
:path=/static-assets/pdf/content-code-examples/how-to/waitfor-javascript.csusing IronPdf;
string html = @"<!DOCTYPE html>
<html>
<body>
<h1>Testing</h1>
<script type='text/javascript'>
// Set delay
setTimeout(function() {
window.ironpdf.notifyRender();
}, 1000);
</script>
</body>
</html>";
ChromePdfRenderOptions renderingOptions = new ChromePdfRenderOptions();
// Set rendering to wait for the notifyRender function
renderingOptions.WaitFor.JavaScript(5000);
PdfDocument pdf = ChromePdfRenderer.StaticRenderHtmlAsPdf(html, renderingOptions);HTML-Elemente Beispiel
Mit dieser Option kann der Rendering-Prozess so eingestellt werden, dass er auf bestimmte HTML-Elemente wartet, z. B. auf Element-IDs, Namen, Tag-Namen und sogar auf die Verwendung von Abfrage-Selektoren, um Elemente anzuvisieren.
Warten auf Element-ID
Im folgenden Code-Beispiel wartet das Rendering auf eine bestimmte Element-ID.
:path=/static-assets/pdf/content-code-examples/how-to/waitfor-html-element-id.csusing IronPdf;
string htmlContent = @"
<!DOCTYPE html>
<html lang=""en"">
<head>
<meta charset=""UTF-8"">
<title>Delayed render tests</title>
<script type=""text/javascript"">
setTimeout(function() {
var h1Tag = document.createElement(""h1"");
h1Tag.innerHTML = ""bla bla bla"";
h1Tag.setAttribute(""id"", ""myid"");
var block = document.querySelector(""div#x"");
block.appendChild(h1Tag);
}, 1000);
</script>
</head>
<body>
<h1>This is Delayed Render Test!</h1>
<div id=""x""></div>
</body>
</html>";
ChromePdfRenderer renderer = new ChromePdfRenderer();
renderer.RenderingOptions.WaitFor.HtmlElementById("myid", 5000);
PdfDocument pdf = renderer.RenderHtmlAsPdf(htmlContent);Warten auf Elementname
Im folgenden Codebeispiel wartet der Rendering-Prozess auf ein bestimmtes Element Name.
:path=/static-assets/pdf/content-code-examples/how-to/waitfor-html-element-name.csusing IronPdf;
string htmlContent = @"
<!DOCTYPE html>
<html lang=""en"">
<head>
<meta charset=""UTF-8"">
<title>Delayed render tests</title>
<script type=""text/javascript"">
setTimeout(function() {
var h1Tag = document.createElement(""h1"");
h1Tag.innerHTML = ""bla bla bla"";
h1Tag.setAttribute(""name"", ""myName"");
var block = document.querySelector(""div#x"");
block.appendChild(h1Tag);
}, 1000);
</script>
</head>
<body>
<h1>This is Delayed Render Test!</h1>
<div id=""x""></div>
</body>
</html>";
ChromePdfRenderer renderer = new ChromePdfRenderer();
renderer.RenderingOptions.WaitFor.HtmlElementByName("myName", 5000);
PdfDocument pdf = renderer.RenderHtmlAsPdf(htmlContent);Warten auf Element Tag Name
Im folgenden Codebeispiel wartet der Rendering-Prozess auf den Namen eines bestimmten Element-Tags.
:path=/static-assets/pdf/content-code-examples/how-to/waitfor-html-element-tag-name.csusing IronPdf;
string htmlContent = @"
<!DOCTYPE html>
<html lang=""en"">
<head>
<meta charset=""UTF-8"">
<title>Delayed render tests</title>
<script type=""text/javascript"">
setTimeout(function() {
var newElem = document.createElement(""h2"");
newElem.innerHTML = ""bla bla bla"";
var block = document.querySelector(""div#x"");
block.appendChild(newElem);
}, 1000);
</script>
</head>
<body>
<h1>This is Delayed Render Test!</h1>
<div id=""x""></div>
</body>
</html>";
ChromePdfRenderer renderer = new ChromePdfRenderer();
renderer.RenderingOptions.WaitFor.HtmlElementByTagName("h2", 5000);
PdfDocument pdf = renderer.RenderHtmlAsPdf(htmlContent);Abfrage-Selektor verwenden
Im folgenden Codebeispiel wartet der Rendering-Prozess auf das Element, das durch den Abfrage-Selektor ausgewählt wurde. Die HtmlQuerySelector-Methode wird auf ein img-Tag mit einer id von 'myid' und einer Klasse von 'blablastyle' warten.
:path=/static-assets/pdf/content-code-examples/how-to/waitfor-html-element-query-selector.csusing IronPdf;
string htmlContent = @"
<!DOCTYPE html>
<html lang=""en"">
<head>
<meta charset=""UTF-8"">
<title>Test Registration of Extension</title>
<script type=""text/javascript"">
setTimeout(function() {
var img = document.createElement(""img"");
img.onload = function() {
img.setAttribute(""id"", ""myid"");
img.setAttribute(""class"", ""blablastyle"");
var block = document.getElementById(""x"");
block.appendChild(img);
};
img.src = ""https://www.w3schools.com/images/picture.jpg""; // .src after .onload to ignore cached, if any
}, 1000);
</script>
</head>
<body>
<h1>This is Delayed Render Test!</h1>
<div id=""x""></div>
</body>
</html>";
ChromePdfRenderer renderer = new ChromePdfRenderer();
renderer.RenderingOptions.WaitFor.HtmlQuerySelector("img#myid.blablastyle", 5000);
PdfDocument pdf = renderer.RenderHtmlAsPdf(htmlContent);Beispiel für Leerlauf im Netzwerk
Keine Netzwerkaktivität
Bei dieser Art von Netzleerlauf können Sie warten, bis keine Netzaktivität mehr stattfindet, was in der Regel bedeutet, dass der Inhalt vollständig geladen wurde. Dies ist geeignet für eine Single-Page-Anwendung (SPA) oder eine einfache Webseite, die keine Long-Polling-Netzwerkanfragen oder fortlaufende Netzwerkaktivitäten hat.
Der Renderprozess wird erst beginnen, wenn keine laufende Netzwerkaktivität für mindestens 500 ms vorhanden ist.
:path=/static-assets/pdf/content-code-examples/how-to/waitfor-network-idle-0.csusing IronPdf;
ChromePdfRenderer renderer = new ChromePdfRenderer();
// Render unless there has been no network activity for at least 500ms
renderer.RenderingOptions.WaitFor.NetworkIdle0();
PdfDocument pdf = renderer.RenderHtmlAsPdf("<h1>testing</h1>");Zwei Netzwerkaktivitäten sind erlaubt
Die NetworkIdle2-Methode eignet sich für Webanwendungen oder Webseiten, die Long-Polling-Netzwerkanfragen oder Heartbeat-Pings haben. In der Regel handelt es sich um 1-2 Anfragen. In diesem Fall werden diese Anfragen, auch wenn sie noch laufen, nicht als ungültig für die Auslösung des Ereignisses "Netzstillstand" betrachtet, da höchstens zwei davon zulässig sind.
Bevor der Rendering-Prozess beginnt, sollten höchstens zwei Netzwerkaktivitäten für mindestens 500ms verbleiben. Diese Option bietet eine schnelle Konfiguration für die Handhabung einer festen Anzahl von Netzwerkaktivitäten.
:path=/static-assets/pdf/content-code-examples/how-to/waitfor-network-idle-2.csusing IronPdf;
ChromePdfRenderer renderer = new ChromePdfRenderer();
// Render unless there are at most 2 network activities for at least 500ms
renderer.RenderingOptions.WaitFor.NetworkIdle2();
PdfDocument pdf = renderer.RenderHtmlAsPdf("<h1>testing</h1>");Erlaubte Netzwerkaktivitäten anpassen
In Fällen, in denen mehrere Netzwerkanfragen beteiligt sind, haben Sie die Flexibilität, sowohl die Netzwerkidle-Dauer als auch die Anzahl der erlaubten Netzwerkanfragen anzupassen, die das Auslösen des Netzwerkidle-Ereignisses nicht ungültig machen. Diese Option eignet sich für Webanwendungen oder Webseiten mit spezifischen Anforderungen, die nicht zu den beiden vorherigen Methoden passen. Durch diese Anpassung stellen wir sicher, dass wir ein breites Spektrum von Anwendungsfällen unter verschiedenen Umständen abdecken.
:path=/static-assets/pdf/content-code-examples/how-to/waitfor-customize-network.csusing IronPdf;
ChromePdfRenderer renderer = new ChromePdfRenderer();
// Render unless there are at most 5 network activities for at least 1000ms
renderer.RenderingOptions.WaitFor.NetworkIdle(1000, 5);
PdfDocument pdf = renderer.RenderHtmlAsPdf("<h1>testing</h1>");Maximale Wartezeit einstellen
Darüber hinaus ermöglichen die Methoden JavaScript, NetworkIdle, NetworkIdle0 und NetworkIdle2 ebenfalls, eine maximale Wartezeit festzulegen, um sicherzustellen, dass das Warten nicht unendlich wird. Der Parameter maxWaitTime dieser Methoden kann zu diesem Zweck verwendet werden.
Bitte beachten Sie
