We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
WEBINAR  Visualize Customer Survey Reports Using Our React 3D Circular Charts Control —Thursday, May 02, 10:00 A.M. ET REGISTER NOW
close icon
  1. Home
  2. Forum
  3. Blazor
  4. PDF Viewer Export Form Data

PDF Viewer Export Form Data

Hello Team!

I have somes issues with the PdfViewer Component, I'm working with blazor servr side and syncfusion component V13.3.26, I Have a dynamic pdf form create with Adobe Acrobat PRO. 


Q1: In my initial PDF form I have Image and some boutton(boutton as to be seen when editing but not when printing) but when open my document in PdfViewer it doesn't show image and bouton
<EjsPdfViewerServer DocumentPath="@DocumentPath" @ref="viewer" Width="1060px" Height="750px"  EnableFormFields="@EnableFormFields"/>

Q2: I want to save my files in DB but it like the size is too much or I don't know if I use a PDF file size like 10ko it save correctly in database, but when tring save a file with 1MO my program plant. my column size in my db is Varbinary(Max) I find in forum and implement the options given but nothing . In Startup.cs I add this 

/////////////////////////////////////////////////////////////////////////////////////////
 services.AddSignalR()
                    .AddHubOptions<ChatHub>(e => { 
                        e.MaximumReceiveMessageSize = 102400000; 
                });
///////////////////////////////////////////////////////////////////////////////////////////
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
endpoints.MapBlazorHub();
endpoints.MapFallbackToPage("/_Host");
endpoints.MapHub<ChatHub>(
"/chatHub",
o =>
{
o.ApplicationMaxBufferSize = 102400000; // larger size
o.TransportMaxBufferSize = 102400000; // larger size
}); //("/chatHub");            
});

Q3: If I want to just save the form Data not all the PDF itself"  How can I perform it with the component. My scenario is to always have and Empty dynamic form pdf in a folder of my application. then when load file from one customer it will just get the data of form save in db and then fill my pdf form with value and if someone modyfing and then click on save button it update the database value.
I see the functionnality on the link https://help.syncfusion.com/wpf/pdf-viewer/import-export-form-data-using-pdf-viewer but I don't see an equivalent with blazor/NetCore Component.

Q4: The EnableFormFields property suppose to enable form field but it just like doing nothing  
<input type="submit" class="btn btn-outline-primary" @onclick="@EnableFormField" value="Verrouiller le formulaire" />
<EjsPdfViewerServer DocumentPath="@DocumentPath" @ref="viewer" Width="1060px" Height="750px"  EnableFormFields="@EnableFormFields"/>
private bool EnableFormFields = true;
 
protected async Task EnableFormField(){
            EnableFormFields = false;
            this.StateHasChanged();
        } 
Q5: How to reinitialize pdf Form field when clik on boutton ?

Thanks,
Chimène NK 


32 Replies
MS Mohan Selvaraj Syncfusion Team November 18, 2019 11:49 AM UTC

Hi NKOUAMBIA , 

Please find the details below. 

 In my initial PDF form I have Image and some boutton(boutton as to be seen when editing but not when printing) but when open my document in PdfViewer it doesn't show image and bouton 
  
At present we don’t have support for displaying the button form field in our PDF Viewer control. Please find the feedback link below, 
  
  
We do not have any immediate plans to implement this feature.  At the planning stage for every release cycle, we review all open features.  We will let you know when this feature is implemented. We usually have an interval of at least three months between releases. The feature implementation would also greatly depend on the factors such as product design, code compatibility and complexity.    
 I want to save my files in DB but it like the size is too much or I don't know if I use a PDF file size like 10ko it save correctly in database, but when tring save a file with 1MO my program plant. my column size in my db is Varbinary(Max) I find in forum and implement the options given but nothing . In Startup.cs I add this  
  
///////////////////////////////////////////////////////////////////////////////////////// 
 services.AddSignalR() 
                    .AddHubOptions<ChatHub>(e => {  
                        e.MaximumReceiveMessageSize = 102400000;  
                }); 
/////////////////////////////////////////////////////////////////////////////////////////// 
app.UseEndpoints(endpoints => 
{ 
              endpoints.MapControllers(); 
              endpoints.MapBlazorHub(); 
              endpoints.MapFallbackToPage("/_Host"); 
              endpoints.MapHub<ChatHub>( 
                                                                                                     "/chatHub", 
                                                                                                     o => 
                                                                                                     { 
                                                                                                                   o.ApplicationMaxBufferSize = 102400000; // larger size 
                                                                                                                   o.TransportMaxBufferSize = 102400000; // larger size 
                                                                                                     }); //("/chatHub");             
}); 
  
  
 If I want to just save the form Data not all the PDF itself"  How can I perform it with the component. My scenario is to always have and Empty dynamic form pdf in a folder of my application. then when load file from one customer it will just get the data of form save in db and then fill my pdf form with value and if someone modyfing and then click on save button it update the database value. 
I see the functionnality on the link https://help.syncfusion.com/wpf/pdf-viewer/import-export-form-data-using-pdf-viewer but I don't see an equivalent with blazor/NetCore Component. 
  
We can import and export the form fields data from the PDF document. We have made the changes in our source and prepared the custom nuget package (Syncfusion.EJ2.Blazor.PdfViewerServer.Windows) and also in ejs.interop.min.js  file for exporting and importing the form-fields value as the json file to the PDF document using PDF Viewer control. Please find the custom nuget package and the sample below. 
  
  
  
Sample: 
  
  
We can also export the form fields value as the JSON object by using this we can save only the form fields data in a DB . But we have facing some issue on exporting the form fields value as the JSON objects in Blazor framework. We will validate the same and update you the details on November 20th 2019. 
  
  
Note: The changes for importing and exporting form fields will be provided in our upcoming weekly nuget release which will be on November 27th 2019. 
  


Regards, 
Mohan S 


NC NKOUAMBIA CHIMENE November 18, 2019 08:13 PM UTC

Hello!
Thanks for answer, but I have some questions without answer

Q1: The EnableFormFields property suppose to enable form field but it just like doing nothing  

private bool EnableFormFields = true;
 
protected async Task EnableFormField(){
            EnableFormFields = false;
            this.StateHasChanged();
        } 

Q2: How to reinitialize pdf Form field when clik on boutton ?

Q3: I Have install the nupkg and implement the code you joint but nothing happen when click on the import bouttons it suppose to load form data but nothing
I even add this.StateHasChanged() without any reaction of pdf form 
protected async Task ImportFormFields(){ 
Viewer.ImportFormFields(@"wwwroot/Data/FormFillingDocument.json");
this.StateHasChanged();
}

Q4: I want to save my files in DB but it like the size is too much or I don't know if I use a PDF file size like 10ko it save correctly in database, but when tring save a file with 1MO my program plant. my column size in my db is Varbinary(Max) I find in forum and implement the options given but nothing . In Startup.cs I add this 

/////////////////////////////////////////////////////////////////////////////////////////
 services.AddSignalR()
                    .AddHubOptions(e => { 
                        e.MaximumReceiveMessageSize = 102400000; 
                });
///////////////////////////////////////////////////////////////////////////////////////////
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
endpoints.MapBlazorHub();
endpoints.MapFallbackToPage("/_Host");
endpoints.MapHub(
"/chatHub",
o =>
{
o.ApplicationMaxBufferSize = 102400000; // larger size
o.TransportMaxBufferSize = 102400000; // larger size
}); //("/chatHub");            
});

Thanks,
Chimène NK.


MS Mohan Selvaraj Syncfusion Team November 19, 2019 12:15 PM UTC

Hi NKOUAMBIA, 

Sorry for the inconvenience caused. 

 The EnableFormFields property suppose to enable form field but it just like doing nothing   
                             
private bool EnableFormFields = true; 
  
protected async Task EnableFormField(){ 
            EnableFormFields = false; 
            this.StateHasChanged(); 
        }  
  
At present we don’t have support for two-way binding for the EnableFormFields property. This property enables or disable the form fields in the PDF document during the initial loading of the PDF document in PDF Viewer control. We will validate the query “If we provide the EnableFormFields as false on button click then the form fields has to be disabled” and update you with more details on November 21st 2019. 

Can you please let us know the exact requirement whether you need to disable the form fields on providing  EnableFormFields as false on button click. if not , Please provide more details about that query. 
How to reinitialize pdf Form field when clik on boutton 
Kindly confirm us whether you are trying to reinitialize the form fields data by resetting the filled data with default values once download or some other action performed. If yes, we can reinitialize the form field by importing the default values for the form fields to the PDF Viewer control. If the provided details is not meet your requirement, please provide more details about on it. 
I Have install the nupkg and implement the code you joint but nothing happen when click on the import bouttons it suppose to load form data but nothing 
I even add this.StateHasChanged() without any reaction of pdf form  
protected async Task ImportFormFields(){  
              Viewer.ImportFormFields(@"wwwroot/Data/FormFillingDocument.json"); 
              this.StateHasChanged(); 
} 
  
We have used the code snippet which you have provided for importing the form fields data and it imports the form data correctly in to the PDF document. 

Can you please ensure whether the FormFillingDocument.json file is available inside the wwwroot/Data/ folder. And also ensure whether you have refereed the provided NuGet and ejs.interop.min.js file(Which is present inside the wwwroot folder)  in your application. 


Steps to install the provided NuGet file in your application. 

1.Extract the provided Nuget(https://www.syncfusion.com/downloads/support/forum/149148/ze/Nuget11447401278.zip ) in the machine and in the visual studio go to Tools—>Options—>NuGet Package Manager-à Package Source . Then click on the (+) symbol in the right side top. 
2.Then provide the name and the source is which the provided NuGet extracted location. Then click on update and click OK. 
3.Then go to Tools—>NuGet Package Manager—>Manage NuGet Package For Solution. Then in the right side there will be a dropdown. Select the name from the dropdown which you have provided on adding the NuGet location in the package source dialog. 
4. Then in Browse tab the NuGet package will be displayed. Select the NuGet based on the Operating system and click on install, then the selected NuGet will be added in your application. 

Steps to add the ejs.interop.min.js file in your application. 
 
1.Extract the provided sample and in the wwwroot folder ‘ejs.interop.min.js’ file will be placed . Copy the file and paste the same in your application inside the wwwroot folder. 
2. Then go to the pages folder in that open the _Host.cshtml file and inside the head tag refer the js  line. Please find the code-snippet below. 

<script src="~ /ejs.interop.min.js"></script>  // remove if you have refereed any ejs.interop.min.js  file in your project 


Adding the JSON file in your application. 
 
1.Copy the FormFillingDocument.json inside the wwwroot/Data folder in the project and paste the same in your application in the wwwroot/Data folder. 

 
Note: We can import the data only for the provided FormFillingDocument . For other PDF document you have the export the data for that specific document and import the same by specifying the exported Json file location inside the ImportFormFields method. 
I want to save my files in DB but it like the size is too much or I don't know if I use a PDF file size like 10ko it save correctly in database, but when tring save a file with 1MO my program plant. my column size in my db is Varbinary(Max) I find in forum and implement the options given but nothing . In Startup.cs I add this  
  
///////////////////////////////////////////////////////////////////////////////////////// 
 services.AddSignalR() 
                    .AddHubOptions(e => {  
                        e.MaximumReceiveMessageSize = 102400000;  
                }); 
/////////////////////////////////////////////////////////////////////////////////////////// 
app.UseEndpoints(endpoints => 
{ 
              endpoints.MapControllers(); 
              endpoints.MapBlazorHub(); 
              endpoints.MapFallbackToPage("/_Host"); 
              endpoints.MapHub( 
                                                                                                     "/chatHub", 
                                                                                                     o => 
                                                                                                     { 
                                                                                                                   o.ApplicationMaxBufferSize = 102400000; // larger size 
                                                                                                                   o.TransportMaxBufferSize = 102400000; // larger size 
                                                                                                     }); //("/chatHub");             
}); 
  
We are currently checking on the issue by storing the large size PDF document in the database. we will analysis further and update you with more details on November 21st 2019. 
  
  
Regards, 
Mohan S 



MS Mohan Selvaraj Syncfusion Team November 20, 2019 10:33 AM UTC

Hi NKOUAMBIA, 
Please find the details below. 
We can also export the form fields value as the object by using this we can save only the form fields data in an DB . But we have facing some issue on exporting the form fields value as the objects in Blazor framework. We will validate the same and update you the details on November 20th 2019. 
  
We have confirmed that the reported issue” Exporting the form fields value as the objects in Blazor framework is not working properly” is a defect and logged the defect report for the same. The fix for the issue will be included in our Essential studio volume 4 release which will be available at the end of December 2019. You can track the status of the implementation using the below link,  
  
 
  

Regards, 
Mohan S 


MS Mohan Selvaraj Syncfusion Team November 21, 2019 10:22 AM UTC

Hi NKOUAMBIA , 

Please find the details below. 

At present we don’t have support for two-way binding for the EnableFormFields property. This property enables or disable the form fields in the PDF document during the initial loading of the PDF document in PDF Viewer control. We will validate the query “If we provide the EnableFormFields as false on button click then the form fields has to be disabled” and update you with more details on November 21st 2019.  
We confirmed the query “Providing two-way binding support for EnableFormFields  API” as a usability feature and logged the feature report for the same. The fix for the usability feature will be provided on Volume 4 SP1 release which will be available at the end of December 2019. You can track the status of the implementation using the below link,  

We are currently checking on the issue by storing the large size PDF document in the database. we will analysis further and update you with more details on November 21st 2019.  
We have created the local DB and stored the PDF document of 2MB size in to the DB. But the reported issue is not reproduced in our end, We suspect that the issue is due to the code you have used in your project for increasing the maximum buffer size. Kindly use the below code for increasing the maximum buffer size in your application. 

Startup.cs 
       
services.AddServerSideBlazor().AddHubOptions(o => { o.MaximumReceiveMessageSize = 102400000; }); 
 

We have also shared the sample for saving the PDF document as byte array in DB which also contains the provided code for increasing the maximum buffer size. Kindly download the sample from the below link. 


Note: The provided sample also contains the md file. Please change the connectionString in the SaveDocument  method in Index.razor file in the sample for storing the data. 

Steps for changing the connection string. 

  1. In visual studio go to View->Server Explorer
  2. Then right click the Data Connections and choose Add Connections.
  3. Choose the Data source as Microsoft SQL Server Database File (SqlClient).
  4. Browse the pdfviewer.md file location which is present inside the provided sample.
  5. In the Data Connection the pdfviewer.md file gets created.
  6. Then right click on pdfviewer.md file and then go to properties, in this you can see the ConnectionString. Copy the same and replace them in the local variable connectionString inside the SaveDocument method in Index.razor file.
 
Index.razor  
 
string connectionString = @"Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename=D:\Ej2Source\ \BlazorApp1\BlazorApp1\pdfviewer.mdf;Integrated Security=True;Connect Timeout=30"; 
 

Kindly refer the Blazor  UG documentation link for more details about using the PDF Viewer control. 

Please try with the latest version .Net core version (https://dotnet.microsoft.com/download/dotnet-core/3.1)  



Regards, 
Mohan S 



NC NKOUAMBIA CHIMENE December 9, 2019 08:44 PM UTC

Hello Team!

I Have try to implement your example and follow all the steps BUT STILL NOT WORK, 
1- I'm using Visual Studio Code (blazor server side) I add Local Nuget Package like this 
     dotnet add package Syncfusion.EJ2.Blazor.PdfViewerServer.Windows --version 17.3.0.26-beta --source C:\TFSuget_repo
2-  In _Host.cshtml i add 
          <link rel='nofollow' href="https://cdn.syncfusion.com/ej2/17.3.27/material.css" rel="stylesheet" />
    <script src="https://cdn.syncfusion.com/ej2/17.3.27/dist/ej2.min.js"></script>
     <script src="~/js/ejs.interop.min.js"></script>             
my js files is in \wwwroot\js\ejs.interop.min.js
3- The export code is suppose to store the json file where? Since no path is specified?
public void ExportFormFields(MouseEventArgs args)
{
viewer.ExportFormFields();
}

Thanks,
Chimène NK.

AA Akshaya Arivoli Syncfusion Team December 10, 2019 11:19 AM UTC

Hi NKOUAMBIA , 
  
Please find the details of your query from the below, 
  
Query 
Details 
I'm using Visual Studio Code (blazor server side) I add Local Nuget Package like this  
     dotnet add package Syncfusion.EJ2.Blazor.PdfViewerServer.Windows --version 17.3.0.26-beta --source C:\TFSuget_repo 
  
We suspect that the reported issue occurred due to version conflicts. So can you please upgrade both Nuget Packages (Syncfusion.EJ2.Blazor.PdfViewerServer.Windows), scripts and css to same version(v17.3.0.29) to resolve the issue.  
 In _Host.cshtml i add  
          <link rel='nofollow' rel='nofollow' href="https://cdn.syncfusion.com/ej2/17.3.27/material.css" rel="stylesheet" /> 
              <script src="https://cdn.syncfusion.com/ej2/17.3.27/dist/ej2.min.js"></script> 
              <script src="~/js/ejs.interop.min.js"></script>                    
my js files is in \wwwroot\js\ejs.interop.min.js 
  
The export code is suppose to store the json file where? Since no path is specified? 
public void ExportFormFields(MouseEventArgs args) 
{ 
              viewer.ExportFormFields(); 
} 
  
We regret for the inconvenience caused. The implementation to export the form fields was not included in our latest release. However the changes will be included in our 2019 Volume 4 release which is expected to be rolled out on December 16th, 2019. 
  
  
Regards, 
Akshaya 


NC NKOUAMBIA CHIMENE December 10, 2019 03:44 PM UTC

Hello Team!

My first problem about save pdf in database is solved (I implement a services calling a web api, calling a repository)  Save in DB and Open from DB is OK Now.

But import and export data not working, as you said export is not yet implemented, is it the case of import also? because like you have said 

0- I using VS Code with sdk 3.1.100-preview2-014569 - Blazor server side app

1- I upgrate to  17.3.0.29-beta   version 

2- In _host.cshtml 

     <link rel='nofollow' rel='nofollow' href="https://cdn.syncfusion.com/ej2/17.3.29/material.css" rel="stylesheet" />

    <script src="https://cdn.syncfusion.com/ej2/17.3.29/dist/ej2.min.js"></script>

    <script src="~/js/ejs.interop.min.js"></script> // even if I include <script src="https://cdn.syncfusion.com/ej2/17.3.29/dist/ejs.interop.min.js"></script>  the import doesn't work. 

 2- In _imports.razor

     @using Syncfusion.EJ2.Blazor.PdfViewer

     @using Syncfusion.EJ2.Blazor.PdfViewerServer

 3- In .csproj 

     <PackageReference Include="Syncfusion.EJ2.Blazor.PdfViewerServer.Windows" Version="17.3.0.29-beta" />

     <PackageReference Include="Syncfusion.Licensing" Version="17.3.0.29" />

     <PackageReference Include="Syncfusion.EJ2.Blazor" Version="17.3.0.29-beta" />

4- In wwwroot\Data\  I have my 2 files FormFillingDocument.pdf & FormFillingDocument.json

5- In page code 

     <EjsButton OnClick="@ImportFormFields">ImportFormFields</EjsButton>

     <EjsPdfViewerServer DocumentPath="@documentPath" @ref="@viewer" Width="1060px" Height="750px" EnableRtl="true" Locale="fr-CH"/>

 @code {     

            EjsPdfViewerServer viewer;

            string documentPath { get; set; } = "wwwroot/Data/FormFillingDocument.pdf";   

           public void ImportFormFields(MouseEventArgs args){

           Viewer.ImportFormFields(@"wwwroot/Data/FormFillingDocument.json");

           }

}

 Q1- I'm I missing somethings about import pdf Data?

Q2- Is the Viewer.ImportFormFields("") just take a json file or it will handle all types (*.xml, *.xfdf )??

Q : How to have Pdf Toolbar tooltip in french ?


Thanks,

Chimène NK.



AA Akshaya Arivoli Syncfusion Team December 11, 2019 01:38 PM UTC

Hi NKOUAMBIA , 
  
Please find the details below, 
  
Q1- I'm I missing somethings about import pdf Data? 
As we mentioned in earlier update the changes for the import/export of form fields value is not included in our previous weekly release package. However the changes will be included in our upcoming 2019 Volume 4 release, which is expected to be rolled out on December 16th, 2019. 
  
Q2- Is the Viewer.ImportFormFields("") just take a json file or it will handle all types (*.xml, *.xfdf )?? 
We have provided the support for import/export the form fields data as JSON format only. 
Q : How to have Pdf Toolbar tooltip in french ? 
We are currently working on the sample to localize the PDF Viewer tooltip to French, we will update you with sample on December 13th, 2019 
  
Please let us know if you have any concerns about on it. 
 
Regards, 
Akshaya 


AA Akshaya Arivoli Syncfusion Team December 13, 2019 02:03 PM UTC

Hi NKOUAMBIA , 
We have created localization sample with French culture and shared the same in the following link, 
Please try this and let us know if you have any concerns on this. 
Regards, 
Akshaya 


NC NKOUAMBIA CHIMENE December 13, 2019 08:30 PM UTC

Hello Team,

 Thank for answer, I Have another questions. 

How can I merge 2 dynamic pdf Document, let me explain my scenario.

I have 2 dynamic pdf the first one is always there but the second will only appear if click on buttons so after input information and click on save button the file have to be merge before save in Datatbase. the ways I Handle it now give me a not readable pdf when get the file from database (i,m sure it's because the .SaveAsBlob() save more thant only pdfContent ). this is how I implement it  

the possibility of making an initial merged empty dynamic file is not envisageable because it is left to the need of user to add the second file or not.
-------------------------------------------------------------------------------------------------------------------------
<input type="submit" class="btn btn-outline-primary" @onclick="@SavePdfFile" value="Enregistrer BD" />              
<button type="button" class="btn btn-success" @onclick="@AddNotefile" data-toggle="tooltip" data-placement="right" title="Ajouter une page">@if (!addNote) {<h6>&#x271A;</h6>}else{<h6>&#x268A;</h6>}  </button>               
<EjsPdfViewerServer DocumentPath="@documentPath" @ref="viewer" Width="1060px" Height="750px" EnableFormFields="@enableFormFields" />
@if(addNote)
{
    <div> 
        <EjsPdfViewerServer EnableToolbar="false" DocumentPath="@documentPathNotes" @ref="viewerNote" Width="1060px" Height="750px" />
    </div> 
}

@code {        
        EjsPdfViewerServer viewer;
        EjsPdfViewerServer viewerNote;
        string documentPath { get; set; } = "wwwroot/Data/Dynamic_file1.pdf";
        string documentPathNotes { get; set; } = "wwwroot/Data/DynamicAdditionalFile.pdf";
bool addNote = false;
        FichierPdf file = new FichierPdf();
        
protected void AddNotefile()
        {
            addNote = !addNote; 
            this.StateHasChanged();
        }


protected async Task SavePdfFile()
        { 
            string[] base64List = new string[2] ;
var finalDictionary = new Dictionary<string, List<string>>();
           
            object base64Data = await viewer.SaveAsBlob();
            Dictionary<string, string> pdfDocumentContent = Newtonsoft.Json.JsonConvert.DeserializeObject<Dictionary<string, string>>(base64Data.ToString());
            
    if (addNote)
            {
                object base64DataNote = await viewerNote.SaveAsBlob();  
                Dictionary<string, string> pdfContentNotes = Newtonsoft.Json.JsonConvert.DeserializeObject<Dictionary<string, string>>(base64DataNote.ToString());

                finalDictionary = pdfDocumentContent.Concat(pdfContentNotes)
                                    .GroupBy(x => x.Key)
                                    .ToDictionary(
                                        x => x.Key,
                                        x => x.Select(z => z.Value).ToList()
                                    );              
            }
            
            var data = (finalDictionary.Count()>0)? Join64Strings(string.Join(",",finalDictionary["data"]).Split(",")) :Convert.FromBase64String(pdfDocumentContent["data"]);

            file.ContenuBase64 = data;
            file.NumDossier = "0215632";
                
            file = await SaveAsync(file);        
        }
      
        public static byte[] Join64Strings(string[] base64Strings)
        {
            var bytes = new List<byte>();
            foreach (var base64String in base64Strings)
            {
                bytes.AddRange(Convert.FromBase64String(base64String));
            }
            return bytes.ToArray();
        }

public class FichierPdf(){
public string NumDossier { get; set; }
public byte[] ContenuBase64 { get; set; }
public string ContenuJson { get; set; }
}
}

Thanks,
Chimène NK!

AA Akshaya Arivoli Syncfusion Team December 16, 2019 12:01 PM UTC

Hi NKOUAMBIA , 
  
We do not have support to merge the PDF document using EJ2 PDF Viewer. However we can merge the documents using our Syncfusion PDF base library. We have created sample for the same and shared in the following location, 
  
  
Please refer the below UG for more details, 
  
  
Please try this and revert us with the more details and the modified sample if you have any concerns. These details will be helpful for us to investigate further and assist you better.  
  
Regards, 
Akshaya 


NC NKOUAMBIA CHIMENE December 18, 2019 08:04 PM UTC

Hello Akshaya Arivoli!

I Just want to ask if the Json import/export features of PDF Viewer is include in V17.4.0.39 as promise because i check the releases notes https://ej2.syncfusion.com/blazor/documentation/release-notes/17.4.39/  but nothing mention about the component. Since this release has not take effect about the component, when would the features will be availaible. I have to give a response to my client.

Thanks,
Chimène NK. 

AA Akshaya Arivoli Syncfusion Team December 19, 2019 12:45 PM UTC

Hi NKOUAMBIA , 
We have provided support to Import/Export form fields as JSON data and the implementation was included in our latest release v17.4.0.39. So Kindly upgrade to latest version to get the implementation. Please find the API details, 
Packages link: 
CDN links: 

Note:   
From the version 17.4.0.39 Open the ~/Startup.cs file and register the Syncfusion Blazor Service. Please find the below link for reference, 

Please let us know if you have any concerns on this. 

Regards, 
Akshaya 


NC NKOUAMBIA CHIMENE December 20, 2019 02:06 PM UTC

Hello Akshaya Arivoli !

I'm using a blazor server app but the link you provide for implementing Pdf import/export features with v17.4.0.39 is a JavaScript Link, i'm  suppose to use it ?? if the answer is Yes can you please give me an example or the initiale given function can be use ? 
----------------------------------------------------------------------------------------------------------------------------------------------------------
<input type="submit" class="btn btn-outline-primary" @onclick="@ImportFormFields" value="Import Form Data" />
<input type="submit" class="btn btn-outline-primary" @onclick="@ExportFormFields" value="Export Form Data"/> 
<EjsPdfViewerServer DocumentPath="@documentPath" @ref="viewer" Width="1060px" Height="750px"/>
@code{
EjsPdfViewerServer viewer;
string documentPath { get; set; } = "wwwroot/Data/FormFillingDocument.pdf";
        
public void ExportFormFields()
        {
            viewer.ExportFormFields(); // How to specified the export Folder?
        }

        public void ImportFormFields()
        {
            viewer.ImportFormFields(@"wwwroot/Data/FormFillingDocument.json");
            this.StateHasChanged();
        }       
}

Thanks,
Chimène NK.

AA Akshaya Arivoli Syncfusion Team December 23, 2019 07:10 AM UTC

Hi NKOUAMBIA, 

We regret for the inconvenience caused. Please the Import/Export form fields API details for Blazor from the below, 



Currently we do not have support to specify the export Folder to save the exported JSON, the exported form fields will be saved as JSON data in the Download folder by default. However, we will analyze further on to specify the export folder and update you with more details on December 30th, 2019. 

Regards, 
Akshaya 


NC NKOUAMBIA CHIMENE December 23, 2019 08:49 PM UTC

Hello Team!

I just update my Syncfusion version Pdf Export work well, even if it will be useful to us to specified a folder or have the possibility to save the json into Database, in fact we need to be able to get the export files in order to do what we want with according to our scenario(it is very very very important!). 
Also Import Work Thanks!

I note some incoherence, if I give a wrong files name or not existing file in pdf import functions no error is throw, I think it will be nice to throw error to help the programmer know why his action doesn't Handle well.

e.g i was trying to import a Json file with space into key, or with uppercase at the start of key name since no error throwing I was not able to know why my import function doen't work ... 

Thanks for the good job team realize,
Chimène NK.

AA Akshaya Arivoli Syncfusion Team December 24, 2019 08:58 AM UTC

Hi NKOUAMBIA, 

Please find the details of your query from the below, 

Query 
Details  
I just update my Syncfusion version Pdf Export work well, even if it will be useful to us to specified a folder or have the possibility to save the json into Database, in fact we need to be able to get the export files in order to do what we want with according to our scenario(it is very very very important!).  
Also Import Work Thanks! 
As mentioned earlier, we will analyze further on to specify the export folder and update you with more details on December 30th, 2019. 
I note some incoherence, if I give a wrong files name or not existing file in pdf import functions no error is throw, I think it will be nice to throw error to help the programmer know why his action doesn't Handle well. 
 
e.g i was trying to import a Json file with space into key, or with uppercase at the start of key name since no error throwing I was not able to know why my import function doen't work ...  
Currently we do not have support to notify the user when wrong file name or not existing JSON file name is provided. We will analyze further on it and update you with more details on December 31st, 2019 

Regards, 
Akshaya 


NC NKOUAMBIA CHIMENE December 27, 2019 05:39 PM UTC

Hello Team!

I have a scenario to get json from a database column and then load it into a empty dynamic pdf. but i don,t know if I miss something but you can help me if possible.

1- The default import method is 
viewer.ImportFormFields("wwwroot/Data/FormFillingDocument.json");

2- but if I comming from database, the above implementation doesn't work. I'm I missing something? or I have to write into file in order to use the default method?

<input type="submit" class="btn btn-outline-primary" @onclick="@LoadFromDBJson" value="Json from DB"/>
        
<EjsPdfViewerServer DocumentPath="@documentPath" @ref="viewer" Width="1060px" Height="750px"/>

@code {
  FichierPdf file = new FichierPdf();
EjsPdfViewerServer viewer;
        string documentPath { get; set; } = "wwwroot/Data/FormFillingDocument.pdf";
        
public async Task LoadFromDBJson()
        {           
          file =  await _pdfService.GetByDossier("001"); // return an FichierPdf element
          var jsonFile = JsonConvert.DeserializeObject<object>(file.ContenuJson);          
          await viewer.ImportFormFields(jsonFile);        
          StateHasChanged();
        }

  public partial class FichierPdf
    {
        public int IdFichierPdfSys { get; set; }
        public string NumDossier { get; set; }
        public string NomFichier { get; set; }
        public byte[] ContenuBase64 { get; set; }
        public string ContenuJson { get; set; }        
    }
}

Thanks,
Chimène NK.

AA Akshaya Arivoli Syncfusion Team December 30, 2019 12:31 PM UTC

Hi NKOUAMBIA, 

We have created new incident under your account for the query related to importing form fields as JSON data from database. Can you please follow that incident for further updates. 


Regards, 
Akshaya 


NC NKOUAMBIA CHIMENE January 13, 2020 08:54 PM UTC

Hello Team!

the export features with specifying the export folder or else saving the JSON object in a var will be available when ??

because I have a date for the import features with JSON object (5th February), but nothing about the other features.

I Have a Question, the above code doesn't work 
but if I specified _documentPath with a path (ex: _documentPath = "wwwroot/Data/Temp/PDFDynamique.pdf";) or else if I write the _viewer.SaveAsBlob() in a filestrem and then give the path to _documentPath export Work but since the _documentPath Have and base64 data export doesn't work.
I'm comming from database with the empty dynamic pdf template so it's a mandatory to work with a real pdf file?

<EjsPdfViewerServer DocumentPath="@_documentPath" @ref="_viewer" Width="1060px" Height="750px" />       

<input type="submit" class="btn btn-outline-primary" @onclick="@ExportFormFields" value="Exporter" />

@code
{
EjsPdfViewerServer _viewer;
string _documentPath { get; set; } 
   
protected override async Task OnInitializedAsync()
{
// Getting data from database throw services
byte[] byteArray = (byte[])usedTemplate.FichierGabarit; // Getting from Database in a Varbinary column
_documentPath = "data:application/pdf;base64," + Convert.ToBase64String(byteArray);
}
public async void ExportFormFields()
    { 
await _viewer.ExportFormFields();
    }

Thanks,
Chimène NK.


MS Mohan Selvaraj Syncfusion Team January 14, 2020 01:42 PM UTC

Hi NKOUAMBIA ,  

Please find the details below.  


the export features with specifying the export folder or else saving the JSON object in a var will be available when ??because I have a date for the import features with JSON object (5th February), but nothing about the other features. 
We have analyzed the feasibility to achieve your requirement and the fix for the implementation will be included in our upcoming weekly NuGet release on February 5th, 2020 
I Have a Question, the above code doesn't work but if I specified _documentPath with a path (ex: _documentPath = "wwwroot/Data/Temp/PDFDynamique.pdf";) or else if I write the _viewer.SaveAsBlob() in a filestrem and then give the path to _documentPath export Work but since the _documentPath Have and base64 data export doesn't work.I'm comming from database with the empty dynamic pdf template so it's a mandatory to work with a real pdf file?<EjsPdfViewerServer DocumentPath="@_documentPath" @ref="_viewer" Width="1060px" Height="750px" />       <input type="submit" class="btn btn-outline-primary" @onclick="@ExportFormFields" value="Exporter" />@code{            EjsPdfViewerServer _viewer;            string _documentPath { get; set; }                          protected override async Task OnInitializedAsync()            {                        // Getting data from database throw services                        byte[] byteArray = (byte[])usedTemplate.FichierGabarit; // Getting from Database in a Varbinary column                        _documentPath = "data:application/pdf;base64," + Convert.ToBase64String(byteArray);            }                        public async void ExportFormFields()    {                         await _viewer.ExportFormFields();    } 
We have analyzed the code snippet , we suspect that the issue may occurs on retrieving the base64 string by using the OnInitializedAsync method so kindly use await inside the OnInitializedAsync method  or use the below code snippet. 

protected override void OnInitialized()     {         string base64String = "data:application/pdf;base64," + Convert.ToBase64String(byteArray);            
      DocumentPath = "data:application/pdf;base64," + base64String;     } 


If the provided code snippet does not resolve your issue. Please provided sample or more details about the issue . So that would be helpful for us to analysis more and assist you better. 


Regards, 
Mohan S 


NC NKOUAMBIA CHIMENE January 17, 2020 08:52 PM UTC

Hello Team!
I Have Another issues with PdfViewer,


As you can see I have 2 pdfViewer on my page
the first one is always available but the second will show only if the user click on a button.
- If the user doesn't click on button to add the second pdfviewer every thing work fine but since the user add a new pdf and then click on the reinitialise button I have the behaviour on the image up there and 
- If I click on "Download Files" buttons 

** if I click on export when the second pdfviewer is visible I will have the error in F12 and only the second pdfviewer will be exported in json

public async void ExportJsonInPdf()
    {
await _viewer.ExportFormFields();
        if (_addNote)
        {
            await _viewerN.ExportFormFields();
        }
    }


*** Also the code for showing the toolbar in french is not working stil showing in english.
my code is joint

Thanks,
Chimène NK.

Attachment: SyncfusionPdfViewer_e9643ea6.7z

AA Akshaya Arivoli Syncfusion Team January 20, 2020 01:00 PM UTC

Hi NKOUAMBIA , 

Please find the details of your query from the below, 

Query 
Details 
I Have Another issues with PdfViewer, 
 

As you can see I have 2 pdfViewer on my page 
the first one is always available but the second will show only if the user click on a button. 
- If the user doesn't click on button to add the second pdfviewer every thing work fine but since the user add a new pdf and then click on the reinitialise button I have the behaviour on the image up there and  
- If I click on "Download Files" buttons  
 
** if I click on export when the second pdfviewer is visible I will have the error in F12 and only the second pdfviewer will be exported in json 

public async void ExportJsonInPdf() 
    { 
                             await _viewer.ExportFormFields(); 
        if (_addNote) 
        { 
            await _viewerN.ExportFormFields(); 
        } 
    } 

 
Can you please provide more details about your issue ,replication procedure, confirm us whether you are initializing the second PDF Viewer on button click or loading the PDF document in second PDF Viewer on button click. Also the provided attachment ‘SyncfusionPdfViewer_e9643ea6.7z’ is not attached properly. So can you please share the sample in which you are facing the issue and the replication procedure. These details will be helpful for us to investigate more on your issue and assist you better. 

Also the code for showing the toolbar in french is not working stil showing in english. 
We have modified the provided sample and shared the same in the below link, 


Please try this and let us know if any concerns on this. 


Regards, 
Akshaya 


NC NKOUAMBIA CHIMENE January 20, 2020 01:44 PM UTC

Hello this is my code! the second PDF load when click om the bouttons not when the page load initially
****************************************************************************************************************************
@inject FormService _gabaritService

<input type="submit" class="btn btn-outline-primary" @onclick="@(() => InitGabarit())" value="Initialiser Gabarit" />
<input type="submit" class="btn btn-outline-primary" @onclick="@SavePdfInTemp" value="Exporter" />
<button type="button" class="btn btn-success" @onclick="@AddNoteClick" data-toggle="tooltip" data-placement="right" title=@_title>@if (!_addNote) {<h6>&#x271A;</h6>}else{<h6>&#x268A;</h6>}  </button>               
                        
<div>
    <EjsPdfViewerServer DocumentPath="@_documentPath" @ref="@_viewer" Width="1060px" Height="750px" EnableNavigationToolbar="false" />       
    @if (_addNote)
    {
        <EjsPdfViewerServer DocumentPath="@_documentPathNote" @ref="@_viewerN" Width="1060px" Height="750px" EnableToolbar="false" EnableNavigationToolbar="false" />
    } 
</div>

@code{
EjsPdfViewerServer _viewer;
    EjsPdfViewerServer _viewerN;
    string _documentPath { get; set; } 
    string _documentPathNote { get; set; } 
    bool _addNote = false; 
List<FormulaireGabarit> _gabaritList { get; set; } = new List<FormulaireGabarit>();
string _title="Ajouter une note";

[Inject]
    protected IJSRuntime JsRuntime { get; set; }
    protected override async Task OnInitializedAsync()
    {
        _gabaritList = await _gabaritService.GetAllAsync(); // contain the 2 PDf Templates the first one for the principal and the second for the optional
        InitGabarit();
               
        await base.OnInitializedAsync();
        this.JsRuntime.Ejs().LoadLocaleData("wwwroot/ej2-locale/src/fr.json");
    } 
protected async void InitGabarit()
    {       
        _documentPath = LoadGabarit();
        await _viewer.Load(_documentPath, null);    
        
        if(_addNote)
        { 
            _documentPathNote = LoadGabarit(1);
            await _viewerN.Load(_documentPathNote, null);  
        }                
    }
public string LoadGabarit(int numGabarit = 0)
    {     
        return ("data:application/pdf;base64," + Convert.ToBase64String((byte[])_gabaritList[numGabarit].FichierGabarit));                  
    }
public void AddNoteClick()
    {
        _title = (_addNote)?"Ajouter une note":"Supprimer la note";
        _addNote = !_addNote;
        _documentPathNote = LoadGabarit(1);            
    }
public async void ExportPdf()
    {
await _viewer.ExportFormFields();
        if (_addNote)
        {
            await _viewerN.ExportFormFields();
        }
    }
public partial class FormulaireGabarit
    {
        public int IdFormulaireGabarit { get; set; }
        public int IdSousFormulaire { get; set; }

        public byte[] FichierGabarit { get; set; }
        public DateTime? DateFinValidite { get; set; }
    }
}

}

Thanks,
Chimène NK.

AA Akshaya Arivoli Syncfusion Team January 21, 2020 12:50 PM UTC

Hi NKOUAMBIA , 

Please find the details of your query from the below, 

Query 
Details 
As you can see I have 2 pdfViewer on my page  
the first one is always available but the second will show only if the user click on a button.  
- If the user doesn't click on button to add the second pdfviewer every thing work fine but since the user add a new pdf and then click on the reinitialise button I have the behaviour on the image up there and   
- If I click on "Download Files" buttons   
We are unable to reproduce the reported error on downloading with the provided code snippet. We have shared the sample in which we have tried to reproduce the reported issue in the below link, 


Please find the steps which we have tried, 

  1. Run the sample
  2. Click on ‘Initialiser Gabarit’ to load the PDF document in first PDF Viewer
  3. Click on ‘+’ to initialize second PDF Viewer
  4. Click on Download button

Please try this and revert us with more details and the modified sample if you are still facing the issue. These details will be helpful for us to investigate further and assist you better 
If I click on export when the second pdfviewer is visible I will have the error in F12 and only the second pdfviewer will be exported in json  

public async void ExportJsonInPdf()  
    {  
                             await _viewer.ExportFormFields();  
        if (_addNote)  
        {  
            await _viewerN.ExportFormFields();  
        }  
    }  
We can reproduce the reported issue with  the provided code. We will analyze further on it and update you with more details on January 24th. 2020 


Regards, 
Akshaya 


NC NKOUAMBIA CHIMENE January 21, 2020 02:34 PM UTC

Hello,
this are the step to reproce the error even with your code given in the answer
  1. Run the sample
  2. Click on ‘Initialiser Gabarit’ to load the PDF document in first PDF Viewer
  3. Click on ‘+’ to initialize second PDF Viewer
  4. Click again on ‘Initialiser Gabarit’ button then you will have the following behavior the first Pdf will not show anymore but the second pdf is OK 
 

Thanks,
Chimène NK.

AA Akshaya Arivoli Syncfusion Team January 24, 2020 09:10 AM UTC

Hi NKOUAMBIA, 
 
Please find the details from the below, 
 
Query 
Details 
Run the sample 
Click on ‘Initialiser Gabarit’ to load the PDF document in first PDF Viewer 
Click on ‘+’ to initialize second PDF Viewer 
Click again on ‘Initialiser Gabarit’ button then you will have the following behavior the first Pdf will not show anymore but the second pdf is OK 
 
We have modified the sample to load the different PDF document in the multiple instance of PDF viewer control in a page. Please find the modified sample from the following link. In the sample we can download the PDF documents from multiple instance and also export the form fields values (The exported form fields are saved in the same file name). However, we can see the script error if export the form fields from multiple instance. We have log the defect report for the same and the fix for the issue will be available in our February 19th , 2020 weekly release Nuget package.  
 
 
Note: The documentPath property is bindable so we could load the documents again if we change the documentPath property value.  
 
If I click on export when the second pdfviewer is visible I will have the error in F12 and only the second pdfviewer will be exported in json   
 
public async void ExportJsonInPdf()   
    {   
                             await _viewer.ExportFormFields();   
        if (_addNote)   
        {   
            await _viewerN.ExportFormFields();   
        }   
    }   
 
 
Regards, 
Akshaya 


NC NKOUAMBIA CHIMENE January 28, 2020 09:00 PM UTC

Hello!

Thanks for your answer but you haven't answered to my question,

Q1: When you click on initialize boutton with both pdf visible (the first and the second) there is an error, this is my problem!  
can you please reproduice the issues or not ?
Q2: I don,t know what happen betweentimes but click on initialize bouttons after editing form doesn't empty the pdf it seem like nothing happens
Q3: About the export Json files(when the 2 PdfViewer are visible) sometimes it exports the both sometimes not I don't know why it is random (I change my chrome security parameters to allow download multifiles)
****************************************************************************
Q4: I Have another scenario not easy to come over: 
     -after saving my json object in database 
     -I can load it on my empty PdfViewer (from now i writealltext it in a temp.json file in a folder and then load the empty pdf files(template) after it i import the temp.json in the empty PdfViewer) so far so good
 BUT in case when about saving my export json for pdf user have add a notes file(optional) so it will have 2 json files in database(1 for the principal and the other for the optional)  ther comes the problem because if I need to load that instance I have to show the principal and the optional according the fact that the optional is not visible all the time but only when click on a boutton if in my LoadMethod() i add the code to modified the addNote and then change the state of page before continue I woul have and System.NullReferenceException. How can I handle it or may be it is more simple to put the optional pdf into a collapsable div??

protected async void  LoadJsonFileFromDB(int idInstance)
{
System.IO.Directory.CreateDirectory(@"wwwroot/Data/Temp"); // si le dossier existe cette méthode ne fait rien

//copier le json dans le fichier
File.WriteAllText(@"wwwroot/Data/Temp/pdffilestemp"+_userName+".json", _pdfData[0].DonneesJson);
   
// recuperer le gabarit avec lequel il a été créer ce fichier
var idGabarit = _pdfData[0].IdFormulaireGabarit;

var usedTemplate = await _gabaritService.GetByIdAsync(idGabarit);

if (usedTemplate != null)
{
byte[] byteArray = (byte[])usedTemplate.FichierGabarit;
_documentPath = "data:application/pdf;base64," + Convert.ToBase64String(byteArray);
await _viewer.Load(_documentPath, null);
await _viewer.ImportFormFields(@"wwwroot/Data/Temp/pdffilestemp"+_userName+".json");
}
if (_pdfData.Count>1)
{
_addNote = true; // this is the code that suppose to modified the state of the page to add the optional Pdf viewer
this.StateHasChanged();// this is the code that suppose to modified the state of the page
idGabarit = _pdfData[1].IdFormulaireGabarit;
File.WriteAllText(@"wwwroot/Data/Temp/pdffilesNotetemp"+_userName+".json", _pdfData[1].DonneesJson);

usedTemplate = await _gabaritService.GetByIdAsync(idGabarit);

if (usedTemplate != null)
{
byte[] byteArray = (byte[])usedTemplate.FichierGabarit;
_documentPathNote = "data:application/pdf;base64," + Convert.ToBase64String(byteArray);
await _viewerN.Load(_documentPathNote, null);
await _viewerN.ImportFormFields(@"wwwroot/Data/Temp/pdffilesNotetemp"+_userName+".json");
}
}
}

Thanks,
Chimène NK.

AA Akshaya Arivoli Syncfusion Team January 29, 2020 12:18 PM UTC

Hi NKOUAMBIA,  

We have created new incident under your account for the reported query. Can you please follow that incident for further updates.  


Regards,  
Akshaya 


NC NKOUAMBIA CHIMENE January 30, 2020 04:45 PM UTC

Hello Team,

I attach a gif and it show how i reproduce the issue i am talking about I take the mini project you send on this thread 
issue1 : clicking on initiliazed buttons when the 2 pdf are available
issue2: F12 errors when living a page with PDFViewer

Please you are not answer my Q4 of my last post on this thread January 28, 2020 09:00 

Thanks,
Chimène NK.


Attachment: SyncfusionBugWithMultiInstancePDF_c1e61787.zip

AA Akshaya Arivoli Syncfusion Team January 31, 2020 01:04 PM UTC

Hi NKOUAMBIA, 

We are unable to reproduce the reported issue (issue 1) and get your requirement exactly (Question 4) with the provided details, so we would like to have meeting.  Kindly follow the incident created under your Direc Trac account for further updates. 

Regarding Issue 2: 
 
We have already logged the defect report for the same. The fix will be included in our upcoming weekly NuGet release on February 12th, 2020. You can track the status of the bug using the below feedback link, 


 
Regards, 
Akshaya 


Loader.
Live Chat Icon For mobile
Up arrow icon