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:
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: RadPdfViewerrunat="serveur"ID="RadPdfViewer1"Hauteur="550px"Largeur="100%"Scale="0.9"><PdfjsProcessingSettingsFile="Contenu / Document. pdf "></PdfjsProcessingSettings></telerik: RadPdfViewer> - Définissez le chemin du fichier dans le code derrière:
<telerik: RadPdfViewerrunat="server"ID="RadPdfViewer1"Height="550px" [19659009] Largeur="100%"Échelle="0.9"OnLoa d="RadPdfViewer1_Load"></telerik: RadPdfViewer>C #
protectedvoidRadPdfViewer1_Load (RadPdfViewer1_Load]objectsender, EventArgs e){(senderasRadPdfViewer) .PdfjsProcessingSettings.File ="Content / Document.pdf";}VB
ProtectedSubRadPdfViewer1_Load (ByValsenderAsObjectByValeAs [19659095] EventArgs)(TryCast (expéditeur, RadPdfViewer)). PdfjsProcessingSettings.File ="Content / Document.pdf"EndSub - Définissez le chemin côté client: [19659123] <
script>function pdfViewerLoad (sender, args) {var pdfViewer = sender;}</script><telerik: RadPdfViewerrunat=" serveur "ID=" RadPdfViewer1 "Hauteur=" 550px "Largeur=" 100% "Échelle [19659010] ="0.9"><ClientEventsOnLoad="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:
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]
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;
}
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.
Source link

