Fermer

mai 24, 2021

5 Approches de configuration du contenu dans RadPdfViewer ASP.NET AJAX


Vous rencontrez des problèmes lors du chargement de vos fichiers PDF dans Telerik PdfViewer pour ASP.NET AJAX ? Prenez quelques minutes pour vérifier ces options – je parie que vous ne le regretterez pas!

Le but de ce billet de blog est de révéler certaines techniques connues et inconnues de chargement de fichiers / contenus PDF dans RadPdfViewer pour ASP.NET AJAX, en les expliquant avec des exemples afin de vous aider à intégrer le composant UI dans un ensemble plus diversifié d'applications et de scénarios. Soit sur le serveur, soit sur le client, via des chemins virtuels ou physiques, depuis un fichier ou une base de données, via des destinations de fichiers locales ou distantes, via URL, via des flux mémoire et même via une chaîne Base64 – tout cela est possible grâce à la technologie avancée API du composant.

Allons plus loin et découvrons les possibilités de charger un fichier PDF un par un:

Fichier accessible sur un autre domaine

Le chargement d'un fichier via URL sur un autre domaine est simple et direct avec RadPdfViewer. La propriété File du composant est exposée en particulier pour passer un chemin pointant vers un fichier PDF existant.

La propriété File peut être définie dans le PdfjsProcessingSettings balise interne de RadPdfViewer.

< telerik: RadPdfViewer runat = "server" ID = "RadPdfViewer1" Height = "550px" Largeur = "100%" Échelle = "0.9" >

</ PdfjsProcessingSettings [19659010]>

</ telerik: RadPdfViewer >

Un problème courant avec la présentation d'un fichier à partir d'un domaine externe est l'accessibilité interdomaine . Ainsi, tant que la politique CORS du serveur sur lequel se trouve le fichier PDF autorise l'accès à distance, PDFViewer devrait pouvoir afficher ce document. Consultez les ressources suivantes traitant de ce sujet:

Lorsque le fichier n'est pas accessible en raison de la stratégie CORS, une erreur JavaScript indiquant le problème est renvoyée sur la console du navigateur:

La ​​fenêtre d'erreur indique «Le traitement du fichier PDF échoue ». et la console affiche «L'accès à l'extraction [URL] de l'origine [localhost] a été bloqué par la stratégie CORS ...»

Fichier dans le dossier d'application – Utilisation d'un chemin local ou relatif

L'approche pour charger un Le fichier PDF dans RadPdfViewer est le même que celui ci-dessus. Vous ne devez définir qu'un chemin relatif vers la propriété du fichier et, dans ce cas, ne vous inquiétez pas du problème d'origine croisée.

  • Définissez le chemin dans la déclaration du contrôle:

    < telerik: RadPdfViewer runat = "serveur" ID = "RadPdfViewer1" Hauteur = "550px" Largeur = "100%" Scale = "0.9" >

    < PdfjsProcessingSettings File = "Contenu / Document. pdf ">

    </ PdfjsProcessingSettings >

    </ telerik: RadPdfViewer >

  • Définissez le chemin du fichier dans le code derrière:

    < telerik: RadPdfViewer runat = "server" ID = "RadPdfViewer1" Height = "550px" [19659009] Largeur = "100%" Échelle = "0.9" OnLoa d = "RadPdfViewer1_Load" >

    </ telerik: RadPdfViewer >

    C #

    protected void RadPdfViewer1_Load ( RadPdfViewer1_Load] object sender, EventArgs e)

    {

    (sender as RadPdfViewer) .PdfjsProcessingSettings.File = "Content / Document.pdf" ;

    }

    VB

    Protected Sub RadPdfViewer1_Load ( ByVal sender As Object ByVal e As [19659095] EventArgs)

    (TryCast (expéditeur, RadPdfViewer)). PdfjsProcessingSettings.File = "Content / Document.pdf"

    End Sub

  • Définissez le chemin côté client: [19659123] < script >

    function pdfViewerLoad (sender, args) {

    var pdfViewer = sender;

    }

    </ script >

    < telerik: RadPdfViewer runat = " serveur " ID = " RadPdfViewer1 " Hauteur = " 550px " Largeur = " 100% " Échelle [19659010] = "0.9" >

    < ClientEvents OnLoad = "pdfViewerLoad" />

    </ telerik: RadPdfViewer >

Remarque importante: Le moteur de rendu de RadPdfViewer fonctionne entièrement côté client; par conséquent, dans tous les cas où un chemin absolu ou relatif est passé au contrôle, une requête HTTP supplémentaire est effectuée pour récupérer le fichier.

Les informations sur la requête de récupération du fichier à partir du serveur peuvent être consultées dans l'onglet Réseau des outils de développement du navigateur comme indiqué ci-dessous:

Dans l'onglet Réseau, survoler Document.pdf affiche une info-bulle avec l'URL de l'hôte local.

Fichier stocké sur la machine hôte, hors du dossier d'application [19659005] Comment charger un fichier à partir d'une machine locale?

Vous pouvez accéder à tous les fichiers situés dans un dossier virtuel qui est un sous-dossier de l'application Web. Cela signifie que vous pouvez créer un répertoire virtuel qui est un sous-répertoire du dossier de l'application Web pointant vers un dossier physique situé sur la machine. Vous devez également définir les autorisations ASPNET / NETWORK SERVICE nécessaires sur ce répertoire virtuel.

Pour plus d'informations, consultez Comment: créer un répertoire virtuel avec IIS Manager pour une application ASP.NET . [19659166] Fichier de FileStream (MemoryStream)

Un scénario courant se produit lorsque le fichier PDF sur le point d'être chargé dans le visualiseur PDF n'est pas encore un fichier existant. Dans les cas où le PDF est généré par programme, il existe deux options principales pour remplir le fichier à l'utilisateur:

Option 1: Enregistrez le fichier sur le serveur et indiquez son chemin vers le visualiseur PDF.

Option 2: Convertissez le flux de fichiers en une chaîne Base64 et attribuez ses données au visualiseur PDF.

Un exemple d'implémentation de cette approche est démontré dans notre démo en direct: Convertir, afficher et télécharger différents formats .

Remarque : Gardez à l'esprit que la chaîne Base64 peut devenir trop longue selon le contenu du fichier et cela pourrait entraîner des problèmes de performances lors du transfert côté client.

ASPX

< telerik: RadScriptManager ID = "RadScriptManager1" runat = "server" > </ [19659008] telerik: RadScriptManager >

< script type = "text / javascript" >

function pageLoad (app, args) {

var upload = $ find (''); [19659002] $ telerik. $ (Upload.get_element ()). Find ("input [type='file']"). Attr ("accepter", ".docx,. rtf, .html, .txt, .xlsx, .csv ");

}

</ script >

< telerik: RadAsyncUpload ID = "RadAsyncUpload1" [19659009] runat [19659010] = "serveur"

OnFileUploaded = "RadAsyncUpload1_FileUploaded"

[19659002 AllowedFileExtensions = ". Docx, .rtf, .html, .txt, .xlsx, .csv" HideFileInput = "true"

AutoAddFileInputs = "false" Localization-Select = "Upload And Convert" EnableInlineProgress = "false"

MultipleFileSelection ] = "Désactivé" />

< telerik: RadButton runat = "serveur" [19659009] ID = "RadButton1" Texte = "Soumettre le fichier" [19659009] AutoPostBack = "true" />

< telerik: RadPdfViewer runat = "serveur " ID = " RadPdfViewer1 " Hauteur = " 550px " Largeur = " 100% " Échelle [19659010] = "0.9" >

< PdfjsProcessingSettings File = " Content / Document.pdf "> </ PdfjsProcessingSettings >

</ telerik: RadPdfViewer >

C #

protected void Page_Load ( objet expéditeur, EventArgs e)

{

int maxSize = 10 * 1024 * 1024; // 10 Mo

RadAsyncUpload1.MaxFileSize = maxSize;

RadPdfViewer1.MaxSerializerLength = maxSize; [1945006] ]

}

protected void RadAsyncUpload1_FileUploaded ( objet expéditeur, FileUploadedEventArgs e) [1945002] ] {

byte [] renderingBytes = null ;

string extention = Path.GetExtension (e.File.FileName);

// Documents RadFlow

if (Regex.IsMatch (extension, ". Docx | .rtf | .html | .txt" ))

{

IFormatProvider provider = null ;

RadFlowDocument document = null ;

switch (extension)

{

affaire ". Docx" : provider = nouveau DocxFormatProvider (); break ;

case ". Rtf" : provider = nouveau RtfFormatProvider (); break ;

case ". Html" : provider = nouveau HtmlFormatProvider (); break ;

case ". Txt" : provider = nouveau TxtFormatProvider (); break ;

default : provider = null ; break ;

}

document = provider.Import (e.File.InputStream); [19659346] Telerik.Windows.Documents.Flow.FormatProviders.Pdf.PdfFormatProvider pdfProvider = nouveau

Telows.Documents.Wind .Flow.FormatProviders.Pdf.PdfFormatProvider ();

en utilisant (MemoryStream ms = new MemoryStream ())

{

pdfProvider.Export (document, ms);

renduBytes = ms.ToArray ();

}

}

// Documents du classeur

else if (Regex .IsMatch (extension, ". Xlsx | .csv" ))

{

IWorkbookFormatProvider provider = null ;

Workbook document = null ;

switch (extension)

{

affaire ". Xlsx" : provider = nouveau XlsxFormatProvider (); break ;

case ". Csv" : provider = nouveau CsvFormatProvider (); break ;

default : provider = null ; break ;

}

document = provider.Import (e.File.InputStream); [19659346] Telerik.Windows.Documents.Spreadsheet.FormatProviders.Pdf.PdfFormatProvider pdfProvider = nouveau

Telowserik.Windik. .Spreadsheet.FormatProviders.Pdf.PdfFormatProvider ();

en utilisant (MemoryStream ms = new MemoryStream ())

{

pdfProvider.Export (document, ms);

renduBytes = ms.ToArray ();

}

}

//// option 1 - enregistrer le fichier localement et définir son chemin vers le visualiseur PDF

// string relativePath = @ " Content " + e.File.GetNameWithoutExtension () + ".pdf";

// string path = AppDomain.CurrentDomain.BaseDirectory + relativePath;

// File.WriteAllBytes (chemin , rendusBytes);

// RadPdfViewer1.PdfjsProcessingSettings.File = relativePath;

// option2 - convertir le fichier en base64 string et définissez-le comme données de pdfviewer

RadPdfViewer1.PdfjsProcessingSettings.FileSettings.Data = Convert.ToBase64String (rendusBytes) [19459015String(rendusBytes)]; [19659002] }

VB

Protected Sub Page Load ( ByVal sender As Object ByVal e As EventArgs) Handles Me .Load

Dim [19659095] maxSize As Integer = 10 * 1024 * 1024 '10MB

RadAsyncUpload1. MaxFileSize = maxSize

RadPdfViewer1.MaxSerializerLength = maxSize

[1945909413] End

[1945909413] End ] Sub

Protected Sub RadAsyncUpload1_FileUploaded (sender As Object e As Telerik.Web.UI .FileUploadedEventArgs)

Dim rendusBytes As Byte () = Nothing

Dim extension As String = System.IO.Path.GetExtension (e.File.FileName)

'RadFlow Documents [19659002] If Regex.IsMatch (extension, ". Docx | .rtf | .html | .txt" ) Then

Dim provider As IFormatProvider (Of RadFlowDocument) = Nothing

Dim document As RadFlowDocument = Nothing

Selectention Case extension

[1 9459016] Affaire ". Docx"

provider = Nouveau DocxFormatProvider ()

Affaire ". Rtf"

provider = Nouveau RtfFormatProvider ()

Case ". Html"

provider = Nouveau HtmlFormatProvider ()

Cas ". Txt"

provider = Nouveau TxtFormatProvider ()

Affaire Sinon

provider = Rien

End Sélectionnez

document = provider.Import (e.File.InputStream) [19659002] Dim pdfProvider As Telerik.Windows.Documents.Flow.FormatProviders.Pdf.PdfFormatProvider = New New Telerik.Windows.Documents.Flow.FormatProviders.Pdf.PdfFormatProvider ()

Utilisation de ms As MemoryStream = Nouveau MemoryStream () [1945199006]

[1945199006]

[1945199006]

] pdfProvider.Export (document, ms)

renderingBytes = ms.ToArray ()

Fin Utilisation de

'Workbook Documents

ElseIf Regex.IsMatch (extension, ". Xlsx | .csv" [19659010]) Puis

Dim provider As IWorkbookFormatProvider = Nothing

Dim document As Workbook = Nothing

Select Case [19659095] Extention

Affaire ". Xlsx"

provider = Nouveau XlsxFormatProvider ()

Case ". Csv"

provider = Nouveau CsvFormatProvider ()

Case [19659094] Sinon

provider = Rien

Fin Sélectionnez

document = provider.Import (e.File.InputStream)

Dim pdfProvider As Telerik.Windows.Documents.Spreadsheet.FormatProviders.Pdf.PdfFormatProvider = Nouveau Telerik.Windows.Documents.Spreadsheet.FormatProviders.Pdf.Pdf )

Utilisation de ms As MemoryStream = Nouveau MemoryStream ()

pdfProvider .Export (document, ms)

renduBytes = ms.ToArray ()

Fin Utilisation de

End If

' 'option 1 - enregistrer le fichier localement et définir son chemin vers le visualiseur pdf

' Dim relativepath As String = " content " + e.File.GetNameWithoutExtension () + ".pdf"

'Dim path As String = AppDomain.CurrentDomain.BaseDirectory + relativepath

'File.WriteAllBytes (path, rendusBytes)

' RadPdfViewer1.PdfjsProcessingSettings.File [relativepdfViewer1PdfjsProcessingSettingsFile19659296] 'option2 -Convertir le fichier en chaîne Base64 Et le définir comme données de pdfviewer

RadPdfViewer1.PdfjsProcessingSettings.FileSettings.Data = Convert .

La même fonctionnalité peut être obtenue via Ajax Request (au lieu de Postback) pour améliorer l'expérience utilisateur. Le code-behind, dans ce cas, reste le même.

Voici le balisage avec les paramètres Ajax nécessaires (le bouton Soumettre ne sera pas nécessaire dans cette approche):

ASPX

< telerik : RadScriptManager ID = "RadScriptManager1" runat = "server" > </ telerik: RadScriptManager >

< telerik: RadScriptBlock ID = "RadScriptBlock1" runat = "server" >

< script type = "text / javascript" >

function pageLoad (app, args) {

var upload = $ find ('');

$ telerik. $ (Upload.get_element ()). Find ("input [type='file']"). Attr ("acce pt "," .docx, .rtf, .html, .txt, .xlsx, .csv ");

}

function fileUploaded (sender, args) {

$ find (''). AjaxRequest ();

}

</ script >

</ telerik: RadScriptBlock >

< telerik: RadAjaxManager ID = "RadAjaxManager1" runat = "server" EnablePageHeadUpdate = "false" >

< AjaxSettings >

< telerik: AjaxSetting AjaxControlID = "RadAjaxManager1" > [19459015ager1"> ]

< UpdatedControls >

< telerik: AjaxUpdatedControl ControlID = "RadAsyncUpload1" />

< telerik: AjaxUpdatedControl ControlID = "RadPdfViewer1" LoadingPanelID = "RadAjaxLoadingPanel1" [194500695] /> [194590695] /> [194590695] ]

< telerik: AjaxUpdatedControl ControlID = "RadLabel1" />

</ UpdatedControls >

</ telerik: AjaxSetting >

</ AjaxSettings >

</ telerik: RadAjaxManager >

< telerik: RadAsyncUpload ID = "RadAsyncUpload1" runat = "server"

OnFileUploaded = "RadAsyncUpload1_FileUploaded" [1965Client9009Uploaded = "fileUploaded"

AllowedFileExtensions = ". Docx, .rtf ,. html, .txt, .xlsx, .csv " HideFileInput = "true"

AutoAddFileInputs = "false" Localization-Select = ] "Télécharger et convertir" EnableInlineProgress = "false"

MultipleFileSelection = [19659011] "Disabled" />

< telerik: RadPdfViewer runat = "server" ID = "RadPdfViewer1" [19659009] Hauteur = "550px" Largeur = "100%" Échelle = "0.9" > [19659002] < PdfjsProcessingSettings File = "Content / Document.pdf" > </ PdfjsProcessingSettings [19659010]>

</ telerik: RadPdfViewer > [19659031] En cliquant sur le bouton Télécharger et convertir, une fenêtre Ouvrir apparaît. Un document .docs est sélectionné dans l'explorateur de fichiers et Ouvrir est frappé. Le document s'ouvre dans la visionneuse PDF.

Fichier représenté par une chaîne Base64 côté client

Vous pouvez remplir un fichier PDF dans la visionneuse entièrement côté client. À l'aide de la méthode côté client fromFile () exposée par l'objet de contrôle côté client RadPdfViewer, vous pouvez définir une chaîne Base64 directement sur le client.

Voici un exemple de scénario dans lequel un PDF généré par RadClientExportManager est passé à un RadPdfViewer à l'aide des API côté client des contrôles:

ASPX

< telerik: RadScriptManager [19659009] ID = "RadScriptManager1" runat = "server" > </ telerik: RadScriptManager >

< script type = "text / javascript" >

</ script >

< div id = "main" >

< input type [19659010] = "text" placeholder = "Tapez votre nom" value = "John" />

<input type=" text" placeholder="Type your comment" value="Smith" />

<telerik:RadPushButton OnClientClicked="exportPDF" runat="server" Text="Export page to PDF" ID="Export1" AutoPostBack="false"></telerik:RadPushButton>

</div>

<telerik:RadClientExportManager runat="server" ID="RadClientExportManager1" OnClientPdfExporting="OnClientPdfExporting">

</telerik:RadClientExportManager>

<telerik:RadPdfViewer run at="server" ID="RadPdfViewer1" Height="550px" Width="100%" Scale="0.9">

</telerik:RadPdfViewer>

JavaScript

var $ = $telerik.$;

function exportPDF() {

$find('').exportPDF($("#main"));

}

function OnClientPdfExporting(sender, args) {

var data = args.get_dataURI().split(',')[1];

setData(data);

args.set_cancel(true);

}

function setData(data) {

var RadPdfViewerObject = $find("");

RadPdfViewerObject.fromFile({ data: data });

return false;

}

In two separate fields, 'John' and

The whole demo is accessible hereso go and give it a spin.

Wrap-up

Having the know-how shared across this blog post, you can now cover all scenarios related to loading PDF contents, files or streams into the RadPdfViewer component. If you stumble upon a different scenario, something useful or just want to share a tip of your own, do not hesitate to place it in the comments section below.

If you like the PdfViewer, you can further play with it at the online demos as well as download its absolutely free and fully functional trial and give it a spin. We value any feedback and the community voice, which you can share at the Feedback Portal too.

Start a Free Trial

Le meilleur outil 2023 pour ta croissance Instagram !



Source link