Maison > interface Web > js tutoriel > le corps du texte

Comment imprimer des PDF directement à partir de JavaScript à l'aide d'un Iframe ?

Susan Sarandon
Libérer: 2024-10-20 20:14:02
original
796 Les gens l'ont consulté

How to Print PDFs Directly from JavaScript using an Iframe?

Impression de PDF directement à partir de JavaScript découverte

Les applications Web impliquent souvent la nécessité de fournir aux utilisateurs la possibilité de télécharger ou d'imprimer des PDF. Traditionnellement, les utilisateurs devaient ouvrir le PDF dans une visionneuse avant de lancer le processus d'impression. Cependant, les progrès de JavaScript ont donné la possibilité d'ouvrir directement la boîte de dialogue d'impression d'un PDF sans nécessiter aucune interaction de l'utilisateur avec le document lui-même.

Une approche pour y parvenir consiste à télécharger le PDF dans une iframe cachée, puis déclencher la demande d'impression à l'aide de JavaScript. Ce flux de travail peut être mis en œuvre comme suit :

  • Intégrer le PDF dans un iframe masqué : utilisez l'option balise pour intégrer le PDF dans le document HTML. Assurez-vous que l'iframe reste masqué à la vue de l'utilisateur.
  • Détecter l'achèvement du chargement du PDF : utilisez une boucle ou une minuterie pour vérifier en permanence si le PDF a fini de se charger dans l'iframe. Cette étape est cruciale car tenter d'imprimer un PDF déchargé entraînera une erreur.
  • Lancer l'impression : Une fois que le chargement du PDF est confirmé, invoquez la méthode .print() sur l'élément d'intégration de l'iframe. Cette action ouvrira la boîte de dialogue d'impression, permettant à l'utilisateur de sélectionner l'imprimante souhaitée et de lancer le processus d'impression.

Exemple de code pour imprimer un PDF intégré dans une iframe :

<code class="javascript">function printPDF() {
  // Create a hidden iframe
  const iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  document.body.appendChild(iframe);

  // Load the PDF into the iframe
  iframe.src = 'path_to_pdf_document.pdf';

  // Wait for the PDF to load
  const printInterval = setInterval(() => {
    if (iframe.contentWindow.document.readyState === 'complete') {
      clearInterval(printInterval);
      iframe.contentWindow.print();
      document.body.removeChild(iframe);
    }
  }, 100);
}</code>
Copier après la connexion

En mettant en œuvre cette approche, vous pouvez offrir aux utilisateurs une expérience d'impression transparente sans qu'ils aient besoin d'ouvrir manuellement le PDF ou une visionneuse PDF distincte avant de lancer le processus d'impression. Il est important de noter que cette solution peut ne pas être prise en charge par tous les navigateurs et versions.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!