Comment utiliser la classe WaitFor pour retarder le rendu PDF en C
Lors du rendu de documents PDF, un problème courant se pose lorsque le processus de rendu se produit avant que toutes les ressources et animations JavaScript nécessaires n'aient fini de se charger. Cela peut entraîner un rendu incomplet ou incorrect du document PDF. Dans un premier temps, nous avons abordé ce problème en permettant à l'utilisateur de fixer un délai arbitraire comme solution. Cependant, se fier à un délai arbitraire n'est pas une approche fiable ou efficace.
Pour offrir une solution plus robuste, nous avons mis en place une classe WaitFor qui améliore le processus de rendu PDF. L'objet WaitFor de RenderOptions offre plusieurs options, notamment :
PageLoad
: Rendu par défaut sans attente.RenderDelay
: Définir un délai d'attente arbitraire.Fonts
: Attend que toutes les polices soient chargées.JavaScript
: Déclencher le rendu avec une fonction JavaScript.Éléments HTML
: Attend des éléments HTML spécifiques, tels que des identifiants d'élément, des noms, des noms de balise et des sélecteurs de requête pour cibler des éléments.-
NetworkIdle
: En attente de l'inactivité du réseau (0, 2 ou une quantité personnalisée).Ces fonctionnalités sont disponibles pour convertir des chaînes HTML en PDF avec IronPDF, des fichiers HTML en PDF avec IronPDF, et des URLs Web en PDF avec IronPDF. Examinons les principaux aspects de cette nouvelle fonctionnalité.
Comment utiliser WaitFor pour retarder le rendu d'un PDF en C#
- Téléchargez la bibliothèque IronPDF C# pour retarder le rendu PDF
- Générer un document PDF à partir d'une chaîne HTML, d'un fichier ou d'une URL web
- Utilisez la méthode JavaScript WaitFor pour déclencher le rendu à partir d'une fonction JavaScript
- Retarder le rendu en fonction du nombre d'activités réseau
- Attendre des éléments HTML spécifiques ainsi que toutes les polices soient chargées
Commencez avec IronPDF
Commencez à utiliser IronPDF dans votre projet dès aujourd'hui avec un essai gratuit.
Exemple de rendu immédiat par défaut
Par défaut, le processus de rendu se produit immédiatement après la fin du chargement de la page. La méthode PageLoad
n'a pas besoin d'être appelée si vous souhaitez effectuer un rendu normal.
:path=/static-assets/pdf/content-code-examples/how-to/waitfor-pageload.cs
using IronPdf;
ChromePdfRenderer renderer = new ChromePdfRenderer();
// Render as soon as the page is loaded
renderer.RenderingOptions.WaitFor.PageLoad();
PdfDocument pdf = renderer.RenderHtmlAsPdf("<h1>testing</h1>");
IRON VB CONVERTER ERROR developers@ironsoftware.com
Exemple de délai de rendu personnalisé
Dans les cas où un délai spécifique est nécessaire avant le rendu du PDF, vous pouvez définir un nombre arbitraire de millisecondes comme délai. Cela permet de répondre avec souplesse à toutes les exigences spécifiques en matière de délais.
Cette option fonctionne de la même manière que l'ancienne implémentation utilisant la propriété RenderingOptions.RenderDelay. Toutefois, l'ancienne propriété a été dépréciée, et il est fortement recommandé d'utiliser la nouvelle API, RenderingOptions.WaitFor.RenderDelay.
:path=/static-assets/pdf/content-code-examples/how-to/waitfor-delay-time.cs
using IronPdf;
ChromePdfRenderer renderer = new ChromePdfRenderer();
// Render after 3000ms
renderer.RenderingOptions.WaitFor.RenderDelay(3000);
PdfDocument pdf = renderer.RenderHtmlAsPdf("<h1>testing</h1>");
Imports IronPdf
Private renderer As New ChromePdfRenderer()
' Render after 3000ms
renderer.RenderingOptions.WaitFor.RenderDelay(3000)
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf("<h1>testing</h1>")
Toutes les polices chargées Exemple
La méthode AllFontsLoaded
dans la classe WaitFor permet au processus de rendu PDF de se mettre en pause jusqu'à ce que toutes les polices soient chargées à partir de sources externes telles que Google Fonts ou d'autres serveurs. Cela permet de s'assurer que le PDF final comprend toutes les polices requises, préservant ainsi la typographie et l'aspect visuel du document.
:path=/static-assets/pdf/content-code-examples/how-to/waitfor-all-fonts.cs
using 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);
IRON VB CONVERTER ERROR developers@ironsoftware.com
Exemple d'exécution personnalisée de JavaScript
Pour mieux contrôler le processus de rendu, notre fonctionnalité vous permet de spécifier une fonction JavaScript personnalisée qui doit être exécutée avant le rendu du document PDF. Cela vous permet d'effectuer toutes les tâches ou vérifications nécessaires avant de lancer le processus d'équarrissage. Cela permet à l'utilisateur de contrôler le moment où le rendu est déclenché.
En JavaScript, la fonction window.ironpdf.notifyRender()
est utilisée pour déclencher la tâche de rendu. Une fois que notifyRender()
est appelé, le processus de rendu commencera. Vous avez un contrôle total sur le moment où vous invoquez la fonction.
:path=/static-assets/pdf/content-code-examples/how-to/waitfor-javascript.cs
using 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);
IRON VB CONVERTER ERROR developers@ironsoftware.com
Exemple d'éléments HTML
Cette option permet de configurer le processus de rendu pour qu'il attende des éléments HTML spécifiques, tels que les ID d'éléments, les noms, les noms de balises, et même d'utiliser des sélecteurs de requête pour cibler les éléments.
Attendre l'ID de l'élément
Dans l'exemple de code ci-dessous, le rendu attendra l'ID d'un élément spécifique.
:path=/static-assets/pdf/content-code-examples/how-to/waitfor-html-element-id.cs
using 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);
IRON VB CONVERTER ERROR developers@ironsoftware.com
Attendre le nom de l'élément
Dans l'exemple de code ci-dessous, le processus de rendu attendra un nom d'élément spécifique.
:path=/static-assets/pdf/content-code-examples/how-to/waitfor-html-element-name.cs
using 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);
IRON VB CONVERTER ERROR developers@ironsoftware.com
Attendre le nom de l'étiquette de l'élément
Dans l'exemple de code ci-dessous, le processus de rendu attendra un nom de balise d'élément spécifique.
:path=/static-assets/pdf/content-code-examples/how-to/waitfor-html-element-tag-name.cs
using 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);
IRON VB CONVERTER ERROR developers@ironsoftware.com
Utiliser le sélecteur de requête
Dans l'exemple de code ci-dessous, le processus de rendu attendra l'élément sélectionné par le sélecteur de requête. La méthode HtmlQuerySelector
attendra une balise img avec un id de 'myid' et une classe de 'blablastyle'.
:path=/static-assets/pdf/content-code-examples/how-to/waitfor-html-element-query-selector.cs
using 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);
IRON VB CONVERTER ERROR developers@ironsoftware.com
Exemple d'inactivité du réseau
Pas d'activité réseau
Ce type d'inactivité réseau vous permet d'attendre qu'il n'y ait pas d'activité réseau, ce qui indique généralement que le contenu a été entièrement chargé. Cela convient à une application monopage (SPA) ou à une simple page web qui n’a pas de requêtes réseau à longue durée ni d’activité réseau en cours.
Le processus de rendu ne commencera que lorsqu'il n'y aura aucune activité réseau en cours pendant au moins 500 ms.
:path=/static-assets/pdf/content-code-examples/how-to/waitfor-network-idle-0.cs
using 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>");
IRON VB CONVERTER ERROR developers@ironsoftware.com
Deux activités de réseau autorisées
La méthode NetworkIdle2
est adaptée aux applications web ou aux pages web qui utilisent des requêtes réseau à long terme ou des pings de heartbeat. En général, il y a 1 à 2 demandes. Dans ce cas, même si ces demandes sont en cours, elles ne seront pas considérées comme invalidant le déclenchement de l'événement d'inactivité du réseau, car il est acceptable qu'il y en ait au maximum deux.
Avant de lancer le processus de rendu, il ne doit rester au maximum deux activités réseau pour au moins 500 ms. Cette option permet une configuration rapide pour gérer un nombre fixe d'activités de réseau.
:path=/static-assets/pdf/content-code-examples/how-to/waitfor-network-idle-2.cs
using 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>");
IRON VB CONVERTER ERROR developers@ironsoftware.com
Personnaliser l'allocation d'activité réseau
Dans les cas où plusieurs requêtes réseau sont impliquées, vous avez la flexibilité de personnaliser à la fois la durée d'inactivité du réseau et le nombre de requêtes réseau autorisées qui n'invalident pas le déclenchement de l'événement d'inactivité du réseau. Cette option convient aux applications web ou aux pages web ayant des exigences spécifiques qui ne correspondent pas aux deux méthodes précédentes. En offrant cette personnalisation, nous nous assurons de répondre à un large éventail de cas d'utilisation dans différentes circonstances.
:path=/static-assets/pdf/content-code-examples/how-to/waitfor-customize-network.cs
using 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>");
Imports IronPdf
Private renderer As New ChromePdfRenderer()
' Render unless there are at most 5 network activities for at least 1000ms
renderer.RenderingOptions.WaitFor.NetworkIdle(1000, 5)
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf("<h1>testing</h1>")
Définir le temps d'attente maximum
De plus, les méthodes JavaScript
, NetworkIdle
, NetworkIdle0
et NetworkIdle2
vous permettent également de définir un temps d'attente maximum pour garantir que l'attente ne sera pas indéfinie. Le paramètre maxWaitTime de ces méthodes peut être utilisé à cet effet.