Afficher, télécharger des fichiers PDF dans l’interface utilisateur Telerik pour ASP.NET Core PDFViewer

Ouvrez, affichez, téléchargez et imprimez des documents PDF à partir de votre application ASP.NET Core avec Telerik PDFViewer. Regarde comment!

Le type de fichier PDF (Portable Document Format) est devenu omniprésent dans les entreprises et permettre aux utilisateurs de visualiser et de télécharger un document PDF est une exigence d’application courante. Le Composant PDFViewer du progrès Interface utilisateur Telerik pour ASP.NET Core offre de nombreuses fonctionnalités prêtes à l’emploi, vous permettant d’ouvrir, d’afficher, de télécharger et d’imprimer des documents PDF. Le composant restitue le contenu d’un document PDF dans le navigateur sous forme de canevas.

Il existe deux manières alternatives de traiter les fichiers PDF dans PDFViewer : à l’aide de PDF.js ou la Traitement de documents Telerik bibliothèques. Nous examinerons la configuration nécessaire pour que le composant fonctionne dans les deux scénarios.

Utilisation du traitement PDF.js

Vous pouvez configurer le PDFViewer pour utiliser le PDF.js bibliothèque côté client pour le traitement et le rendu d’un fichier PDF. PDF.js est une bibliothèque communautaire pour l’analyse et le rendu des PDF pris en charge par Mozilla.

1. Charger le pdf.js bibliothèque dans la mise en page de l’application ou dans la vue dans laquelle vous utiliserez PDFViewer.

<script  src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"></script>

2. Dans la vue (par exemple, Index.cshtml), déclarez le PDFViewer et configurez son PdfjsTraitement configuration:

@(Html.Kendo().PDFViewer()
  .Name("pdfviewer")
  .PdfjsProcessing(pdf => pdf.File(Url.Content("~/App_Data/sample.pdf")))
  .Height(900)
)

Nous voulons qu’un fichier spécifique s’affiche lors du chargement de la page, nous avons donc défini le chemin vers le exemple.pdf dossier dans le Déposer option dans la configuration PdfjsProcessing. Dans cet exemple, le fichier se trouve dans le
Données d’application sous-dossier de l’application wwwracine dossier.

Le résultat ressemblera à ceci :

Outre l’affichage initial d’un fichier, PDFViewer vous permet d’ouvrir un fichier PDF différent existant dans le système de fichiers via le bouton « Ouvrir » de la barre d’outils.

Utilisation du traitement de documents Telerik

L’alternative à l’utilisation de PDF.js pour le traitement des PDF consiste à utiliser le Traitement de documents Telerik bibliothèques. Ces bibliothèques traitent le document PDF sur le serveur et transmettent les données au PDFViewer pour visualisation sur le client.

Suivez les étapes ci-dessous pour configurer PDFViewer avec Telerik Document Processing :

1. Déclarez le composant :

@(Html.Kendo().PDFViewer()
  .Name("pdfviewer1")
  .DplProcessing(dpl =>
    {
      dpl.Read(r => r.Url(Url.Action("GetInitialPdf", "Home")));
      dpl.Upload(upload => upload.Url(Url.Action("GetPdf", "Home")).SaveField("file"));
    })
  .Height(900)
)

Nous afficherons le exemple.pdf fichier initialement, c’est pourquoi nous devons définir le Lire possibilité dans le DplTraitement configuration. Il pointe vers le GetInitialPdf agir dans le Maison manette.

Le Télécharger L’option sert à ouvrir un autre fichier à partir du système de fichiers. L’action responsable de cela s’appelle ObtenirPdf. Lorsque l’utilisateur ouvre un fichier, il est envoyé pour traitement à l’action GetPdf, puis les données du fichier sont renvoyées au PDfViewer, qui le visualise.

2. Déclarez le GetInitialPdf et GetPdf actions dans le contrôleur Home.

public IActionResult GetInitialPdf(int? pageNumber)
{
  JsonResult jsonResult;
  byte[] file = System.IO.File.ReadAllBytes(@"wwwroot\App_Data\sample.pdf");
  FixedDocument doc = FixedDocument.Load(file, true);

  if (pageNumber == null)
  {
    jsonResult = Json(doc.ToJson());
  }
  else
  {
    jsonResult = Json(doc.GetPage((int)pageNumber));
  }
  return jsonResult;
}

[HttpPost]
public IActionResult GetPdf(IFormFile file)
{
  byte[] data;
  using (Stream inputStream = file.OpenReadStream())
  {
    MemoryStream memoryStream = inputStream as MemoryStream;
    if (memoryStream == null)
    {
      memoryStream = new MemoryStream();
      inputStream.CopyTo(memoryStream);
    }
    data = memoryStream.ToArray();
  }
  FixedDocument dox = FixedDocument.Load(data);
  return Json(dox.ToJson());
}

3. Lorsque vous ajoutez les deux actions, Visual Studio vous demandera les dépendances manquantes. La logique de traitement dans les actions dépend des assemblages de traitement de documents Telerik, qui sont fournis avec le Telerik.Web.PDF Paquet NuGet. Pour résoudre les dépendances manquantes, installez le Telerik.Web.PDF NuGet du gestionnaire de packages NuGet de Visual Studio et ajoutez l’instruction « using » suivante au contrôleur :

using Telerik.Web.PDF;

Collection d’éléments de la barre d’outils

Une fois que vous avez choisi l’une des approches de traitement disponibles, vous pouvez personnaliser la barre d’outils de PDFViewer et masquer les outils dont vous n’avez pas besoin.

Le PDFViewer affiche un ensemble d’outils par défaut dans sa barre d’outils. Si votre cas d’utilisation nécessite de masquer certaines options, vous pouvez utiliser le Barre d’outils configuration du composant et déclarez explicitement les outils qui seront affichés dans la barre d’outils.

Dans l’exemple de configuration de barre d’outils suivant, le Barre d’outils.Éléments collection spécifie les outils qui seront affichés.

Notez que le « ouvrir » l’outil n’est pas déclaré. Par conséquent, le bouton « Ouvrir » n’apparaîtra pas dans la barre d’outils et l’utilisateur ne pourra voir que le document PDF que vous avez choisi de charger dans le PDFViewer. Ils ne pourraient pas ouvrir un autre dossier.

@(Html.Kendo().PDFViewer()
  .Name("pdfviewer")
  .PdfjsProcessing(pdf => pdf
    .File(Url.Content("~/Content/pdf/sample.pdf"))
  )
  .Toolbar(toolbar =>
    toolbar.Items(items =>
    {
      items.Add().Name("pager");
      items.Add().Name("spacer");
      items.Add().Name("zoom");
      items.Add().Name("zoomInOut");
      items.Add().Name("toggleSelection");
      items.Add().Name("spacer");
      items.Add().Name("search");
      items.Add().Name("download");
      items.Add().Name("print");
    })
  )
  .Height(900)
)

Vous remarquerez que le « entretoise » l’outil est déclaré deux fois. Son but est de créer un espace vide entre les outils. Vous pouvez l’utiliser pour regrouper certains outils ou pour isoler un outil du reste.

Vous obtiendrez la barre d’outils suivante avec la configuration publiée ci-dessus :

Modèle d’élément de la barre d’outils

Vous pouvez aller encore plus loin dans la personnalisation de la barre d’outils de PDFViewer et déclarer des outils personnalisés en utilisant le Modèle option.

L’exemple ci-dessous montre un bouton ajouté en tant qu’outil personnalisé avec certains des outils par défaut :

.Toolbar(toolbar =>
  toolbar.Items(items =>
  {
    items.Add().Name("pager");
    items.Add().Name("spacer");
    items.Add().Name("Custom").Template("<button class="k-button k-button-solid k-button-md k-rounded-md k-button-solid-base k-icon-button"><span class="k-button-icon k-icon k-i-cog"></span></button>");
    items.Add().Name("search");
    items.Add().Name("download");
    items.Add().Name("print");
  })
)

Vous pouvez attacher un gestionnaire de « clic » au bouton et y exécuter votre logique personnalisée.

Ensuite, nous examinerons un scénario différent qui implique à la fois la personnalisation de la barre d’outils de PDFViewer et l’utilisation de l’API du composant.

Profiter de l’API

Vous devrez peut-être désactiver le téléchargement de fichiers PDF jusqu’à ce que l’utilisateur accepte les conditions d’utilisation. Un message demandera à l’utilisateur de confirmer qu’il accepte l’accord et souhaite télécharger le fichier en cliquant sur un bouton en dehors de PDFViewer.

Pour répondre à cette exigence, vous pouvez gérer l’événement « clic » du bouton et lancer le téléchargement du fichier actuellement affiché par PDFViewer à l’aide de l’API disponible.

1. Masquez l’outil de « téléchargement » en ne l’incluant pas dans le Barre d’outils.Éléments collection:

.Toolbar(toolbar =>
  toolbar.Items(items =>
  {
    items.Add().Name("pager");
    items.Add().Name("spacer");
    items.Add().Name("zoom");
    items.Add().Name("zoomInOut");
    items.Add().Name("toggleSelection");
    items.Add().Name("spacer");
    items.Add().Name("search");
    items.Add().Name("open");
    items.Add().Name("print");
  })
)

2. Le bouton sur lequel l’utilisateur cliquera pour confirmer l’accord et lancer le téléchargement pourrait ressembler à ceci :

<button class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md" onclick="onAgreeButtonClick()">Agree and Download PDF</button>

3. Dans le gestionnaire de clics du bouton, le téléchargement est déclenché en exécutant la « DownloadCommand » du PDFViewer :

<script>
  function onAgreeButtonClick() {
    
    var pdfviewer = $("#pdfviewer").data("kendoPDFViewer");
    
    pdfviewer.execute({command:"DownloadCommand"});
  }
</script>

Travailler avec des fichiers plus volumineux

Enfin, nous utiliserons une fonctionnalité de PDFViewer qui vous permet de charger un document PDF volumineux sans sacrifier les performances et empêcher la page de répondre.

Dans les scénarios impliquant le chargement de documents PDF volumineux, utilisez la fonctionnalité de chargement à la demande de PDFViewer. Il est disponible lorsque le composant est configuré pour utiliser le traitement de documents Telerik.

L’extrait suivant montre comment activer le Charger à la demande option:

@(Html.Kendo().PDFViewer()
  .Name("pdfviewer")
  .DplProcessing(dpl => {
    dpl.Read(r => r.Url(Url.Action("GetInitialPdf", "PdfViewer")));
    dpl.Upload(upload => upload.Url(Url.Action("GetPdf", "PdfViewer")).SaveField("file"));
    dpl.LoadOnDemand(true);
  })
  .Height(900)
)

Avec le Charger à la demande activée, au lieu de demander et de visualiser toutes les pages du document, le composant demande et restitue les pages à la demande, ce qui améliore les performances en réduisant le temps de chargement initial.

Si vous souhaitez en savoir plus sur le composant PDFViewer, consultez les éléments suivants :

Essayez l’interface utilisateur Telerik pour ASP.NET Core PDFViewer aujourd’hui

Si vous aimez ce que vous avez lu et que vous souhaitez commencer à tirer parti d’ASP.NET Core PDFViewer ou de l’un des 110 autres composants prêts à l’emploi, nous vous invitons à commencer un essai gratuit dès aujourd’hui. Découvrez par vous-même que la création d’applications interactives riches pour la moitié du temps n’est qu’à un clic.

Essayez l’interface utilisateur Telerik pour ASP.NET Core

Partager c’est aimer

Une fois que vous avez essayé le composant ASP.NET Core PDFViewer, n’oubliez pas de partager votre expérience et vos idées dans les sections de commentaires ci-dessous ou en visitant le Interface utilisateur Telerik pour le portail de commentaires ASP.NET Core. Votre contribution fait la différence.