1. Home
  2. Forum
  3. Angular - EJ 2
  4. PDF viewer Service throwing error

PDF viewer Service throwing error

Respected Person,


I am using PDF Viewer in my Angular Application.

I have setup Service URL with .NET Core. According to this link.

  1. Now when ever I am trying to load base64 string of pdf to the pdf viewer.  Load Api get called automatically but with throwing error of not found. 



this is the response of the request.

data:application/pdf, JVBERi0xLjQNCiWDkvr+DQoxIDAgb2JqDQo8PA0KL1R5cGUgL0NhdGFsb2cNCi9QYWdlcyAyIDAgUg0KL0Fjcm9Gb3JtIDMgMCBSDQo+Pg0KZW5kb2JqDQo0IDAgb2JqDQo8PA0KL0NyZWF0aW9uRGF0ZSAoRDoyMDIxMDYyODE0MDQzOCkNCj4+DQplbmRvYmoNCjIgMCBvYmoNCjw8DQovVHlwZSAvUGFnZXMNCi9LaWRzIFs1IDAgUl0NCi9Db3VudCAxDQovUmVzb3VyY2VzIDw8Pj4NCg0KL01lZGlhQm94IFsuMDAgLjAwIDU5NS4wMCA4NDIuMDBdDQovUm90YXRlIDANCj4+DQplbmRvYmoNCjMgMCBvYmoNCjw8DQovRmllbGRzIFtdDQo+Pg0KZW5kb2JqDQo1IDAgb2JqDQo8PA0KL0NvdW50IDENCi9UeXBlIC9QYWdlcw0KL0tpZHMgWzYgMCBSXQ0KL1BhcmVudCAyIDAgUg0KL01lZGlhQm94IFsuMDAgLjAwIDYxMi4wMCA3OTIuMDBdDQo+Pg0KZW5kb2JqDQo2IDAgb2JqDQo8PA0KL1R5cGUgL1BhZ2UNCi9QYXJlbnQgNSAwIFINCi9Db250ZW50cyBbNyAwIFIgOCAwIFIgOSAwIFJdDQovUmVzb3VyY2VzIDw8DQovUHJvY1NldCBbL1BERiAvVGV4dF0NCi9Gb250IDw8DQovYTE3YjQxYzgtNmU0OS00ZGExLWI2NzYtZjkzZjE5OTI5NGUyIDEwIDAgUg0KPj4NCg0KPj4NCg0KPj4NCmVuZG9iag0KNyAwIG9iag0KPDwNCi9GaWx0ZXIgL0ZsYXRlRGVjb2RlDQovTGVuZ3RoIDEyDQo+Pg0Kc3RyZWFtDQp4XlMoVOACAAIhALwNCmVuZHN0cmVhbQ0KZW5kb2JqDQo4IDAgb2JqDQo8PA0KL0ZpbHRlciAvRmxhdGVEZWNvZGUNCi9MZW5ndGggMTINCj4+DQpzdHJlYW0NCnheUwhU4AIAAcEAnA0KZW5kc3RyZWFtDQplbmRvYmoNCjkgMCBvYmoNCjw8DQovRmlsdGVyIC9GbGF0ZURlY29kZQ0KL0xlbmd0aCAzNDcNCj4+DQpzdHJlYW0NCnhexZBRT8IwEMffm+w73IsRHja6OTbGm6D4YozAjM+l3Ebj1s22avDTu45pIGiCiYlpm/bu/nfX+z075AymGyZzBF65lVoLyQyC3mqDJZgKCszMwFS15xDfoxS87nwZcRLYC3jZ1ipEDSVTuZC6SfkURX4rcjuxQodsHPII0uakikld2LbHX/ix7V7Pe5bjgxQGalXVqMzWOheo0bSVs0q1suWB3U6+NErIHGaNhxmYFSzXY6A92rfBy0LkskRpxnCHTFnXrZB47J+kDhlc4avguLiZwHR5YHLtEAp2qdwhTYj58Sr0+ciNMEzccM18dxXFkZslF5mfJEESYgB+O2ia2dxU7UCmvLvfGiiUts/37/jEO9ijwAt8Gg4B0mbg3gYVgtBQbiETygBn5YtcMzBMP0GVAe+fO+Q6PQXevON3qu7vOP8PyWTo0T2SlTSKcfNbXvN2fwBeh+aPDQplbmRzdHJlYW0NCmVuZG9iag0KMTAgMCBvYmoNCjw8DQovV2lkdGhzIFs2MDAgMzE3IDMxNyAzMTcgMzE3IDMxNyAzMTcgMzE3IDMxNyAzMTcgMzE3IDMxNyAzMTcgMzE3IDMxNyAzMTcgMzE3IDMxNyAzMTcgMzE3IDMxNyAzMTcgMzE3IDMxNyAzMTcgMzE3IDMxNyAzMTcgMzE3IDMxNyAzMTcgMzE3IDMxNyA0MDAgNDU5IDgzNyA2MzYgOTUwIDc3OSAyNzQgMzkwIDM5MCA1MDAgODM3IDMxNyAzNjAgMzE3IDMzNiA2MzYgNjM2IDYzNiA2MzYgNjM2IDYzNiA2MzYgNjM2IDYzNiA2MzYgMzM2IDMzNiA4MzcgODM3IDgzNyA1MzAgMTAwMCA2ODQgNjg2IDY5OCA3NzAgNjMxIDU3NSA3NzQgNzUxIDI5NCAyOTQgNjU1IDU1NyA4NjIgNzQ4IDc4NyA2MDMgNzg3IDY5NCA2MzQgNjEwIDczMSA2ODQgOTg4IDY4NSA2MTAgNjg1IDM5MCAzMzYgMzkwIDgzNyA1MDAgNTAwIDYxMiA2MzQgNTQ5IDYzNCA2MTUgMzUyIDYzNCA2MzMgMjc3IDI3NyA1NzkgMjc3IDk3NCA2MzMgNjExIDYzNCA2MzQgNDExIDUyMCAzOTIgNjMzIDU5MSA4MTcgNTkxIDU5MSA1MjQgNjM2IDMzNiA2MzYgODM3IDMxNyAzMTcgMzE3IDMxNyAzMTcgMzE3IDMxNyAzMTcgMzE3IDMxNyAzMTcgMzE3IDMxNyAzMTcgMzE3IDMxNyAzMTcgMzE3IDMxNyAzMTcgMzE3IDMxNyAzMTcgMzE3IDMxNyAzMTcgMzE3IDMxNyAzMTcgMzE3IDMxNyAzMTcgMzE3IDMxNyA0MDAgNjM2IDYzNiA2MzYgNjM2IDMzNiA1MDAgNTAwIDEwMDAgNDcxIDYxMSA4MzcgMzYwIDEwMDAgNTAwIDUwMCA4MzcgNDAwIDQwMCA1MDAgNjM2IDYzNiAzMTcgNTAwIDQwMCA0NzEgNjExIDk2OSA5NjkgOTY5IDUzMCA2ODQgNjg0IDY4NCA2ODQgNjg0IDY4NCA5NzQgNjk4IDYzMSA2MzEgNjMxIDYzMSAyOTQgMjk0IDI5NCAyOTQgNzc0IDc0OCA3ODcgNzg3IDc4NyA3ODcgNzg3IDgzNyA3ODcgNzMxIDczMSA3MzEgNzMxIDYxMCA2MDQgNjI5IDYxMiA2MTIgNjEyIDYxMiA2MTIgNjEyIDk4MSA1NDkgNjE1IDYxNSA2MTUgNjE1IDI3NyAyNzcgMjc3IDI3NyA2MTEgNjMzIDYxMSA2MTEgNjExIDYxMSA2MTEgODM3IDYxMSA2MzMgNjMzIDYzMyA2MzMgNTkxIDYzNCA1OTFdDQovVHlwZSAvRm9udA0KL0Jhc2VGb250IC9EZWphVnVTYW5zDQovTmFtZSAvRGVqYVZ1U2Fucw0KL1N1YnR5cGUgL1RydWVUeXBlDQovRW5jb2RpbmcgL1dpbkFuc2lFbmNvZGluZw0KL0ZpcnN0Q2hhciAwDQovTGFzdENoYXIgMjU1DQovRm9udERlc2NyaXB0b3IgMTEgMCBSDQo+Pg0KZW5kb2JqDQoxMSAwIG9iag0KPDwNCi9UeXBlIC9Gb250RGVzY3JpcHRvcg0KL0ZvbnROYW1lIC9EZWphVnVTYW5zDQovRmxhZ3MgMzINCi9Gb250QkJveCBbLTEwMjAuMDAgLTIzNS4wMCAxNzkzLjAwIDkyOS4wMF0NCi9NaXNzaW5nV2lkdGggMzE3DQovU3RlbVYgODANCi9JdGFsaWNBbmdsZSAwDQovQ2FwSGVpZ2h0IDcwMA0KL0FzY2VudCA3NTkNCi9EZXNjZW50IC0yNDANCi9MZWFkaW5nIDEyMDANCi9BdmdXaWR0aCAzMTcNCi9NYXhXaWR0aCAzMTcNCi9YSGVpZ2h0IDANCi9TdGVtSCAwDQo+Pg0KZW5kb2JqDQp4cmVmDQowIDEyDQowMDAwMDAwMDAwIDY1NTM1IGYNCjAwMDAwMDAwMTcgMDAwMDAgbg0KMDAwMDAwMDE0OCAwMDAwMCBuDQowMDAwMDAwMjc3IDAwMDAwIG4NCjAwMDAwMDAwODkgMDAwMDAgbg0KMDAwMDAwMDMxNCAwMDAwMCBuDQowMDAwMDAwNDI4IDAwMDAwIG4NCjAwMDAwMDA2MTggMDAwMDAgbg0KMDAwMDAwMDcxMCAwMDAwMCBuDQowMDAwMDAwODAyIDAwMDAwIG4NCjAwMDAwMDEyMzAgMDAwMDAgbg0KMDAwMDAwMjQ1MCAwMDAwMCBuDQp0cmFpbGVyDQo8PA0KL0luZm8gNCAwIFINCi9Sb290IDEgMCBSDQovU2l6ZSAxMg0KPj4NCg0Kc3RhcnR4cmVmDQoyNzM1DQolJUVPRg0KAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA== is not found


You can also try with the base64 in response to replicate error. 

 2. I would like to open Pdf viewer in ng-modal  (angular-bootstrap modal). how could I achieve that.? Please provide example.

3. I am loading some data on load of the page. That's why I am waiting to load those data with spinner. When I make viewchild element of the pdf viewer to access from .ts file. It always stays undefined because of spinner. How can I resolve this problem?

i.e. 

@ViewChild('contractPdfPreview', { static: true })
 contractPdfPreview: PdfViewerComponent;
at HTML inside the 
<div ngIf='isLoaded'>
<ejs-pdfviewer id="contractPdfPreview" #contractPdfPreview [documentPath]="pdfPreviewModalData" [serviceUrl]='service' (created)="pdfPreviewCreated()" style="height:640px;display:block"></ejs-pdfviewer>
</div>​

 pdfPreviewCreated(){
  // this.contractPdfPreview.load(this.pdfPreviewModalData, null); shows undefined

​  let pdfviewer = (<any>document.getElementById('contractPdfPreview')).ej2_instances[0];
   console.log('preview component: ', pdfviewer)
   console.log('preview pdfPreviewModalData: ', this.pdfPreviewModalData)
   pdfviewer.documentPath = this.pdfPreviewModalData
   pdfviewer.load(this.pdfPreviewModalData, null)
}


Please help me with my requirements.

Regards,

Parth


11 Replies
DM Dhivyabharathi Mohan Syncfusion Team June 29, 2021 12:58 PM UTC

Hi ParthKumar, 
  
  
Thank you for contacting Syncfusion support. 
  
  
Please find the details, 
  
Query 
Details 
  
I am using PDF Viewer in my Angular Application. 
I have setup Service URL with .NET Core. According to this link. Now when ever  
I am trying to load base64 string of pdf to the pdf viewer.  Load Api get called automatically but with throwing error of not found.  
  
  
this is the response of the request. 
  
  
We have checked with the provided base 64 string. In this you have used as “data:application/pdf” instead of “data:application/pdf;base64” in the base 64 string. So, the issue occurs. Kindly use the base 64 string of the PDF document as given code snippet. We have shared the sample for your reference. 
  
  
  
  
Code snippet: 
  
<ejs-pdfviewer id="pdfViewer" [serviceUrl]='service' [documentPath]='document' style="height:640px;display:block"></ejs-pdfviewer> 
  
public document: string = 
    'data:application/pdf;base64, JVBERi0xLjQNCiWDkvr+DQoxIDAgb2Jq.."; 
  
  
  
  
 2. I would like to open Pdf viewer in ng-modal  (angular-bootstrap modal). how could I achieve that.? Please provide example. 
  
  
We have shared the sample to open the PDF Viewer in the dialog box. Please find the sample from the below link. 
  
  
  
  
  
3. I am loading some data on load of the page. That's why I am waiting to load those data with spinner. When I make viewchild element of the pdf viewer to access from .ts file. It always stays undefined because of spinner. How can I resolve this problem? 
  
We have shared the sample and code snippet to get the PDF Viewer instances. Please refer the given code snippet. We have shared the sample for the same. 
  
  
  
  
Code snippet: 
  
<button (click)="getPdfViewerComponent()">getPdfViewerComponent</button> 
  
getPdfViewerComponent() { 
    var pdfviewer = (<any>document.getElementById('pdfViewer')) 
      .ej2_instances[0]; 
    console.log(pdfviewer); 
  } 
  
  
  
Kindly try this and revert us, if you have any concerns. 
  
Regards, 
Dhivya. 
  


PK Parthkumar Kakadiya July 2, 2021 07:44 AM UTC

Hi Dhivya,


Thanks a lot for your solution. It worked absolutely fine.


I got one more problem.

  1. Whenever I serve pdf base64 string to pdf viewer, load function gets call but throwing this error. : 
    2. "The type initializer for 'Syncfusion.EJ2.PdfViewer.PdfiumNative' threw an exception."

    I have setup the pdfviewer controller with docker Image.

    I have attached docker file with controller.

    Currently trying to run o Windows OS.


Regards,
Parth


Attachment: wordToPdf_d477bff6.zip


DM Dhivyabharathi Mohan Syncfusion Team July 5, 2021 12:46 PM UTC

Hi Parthkumar, 
  
  
Thank you for the sample. Currently we are checking in the Docker environment with the provided sample. We will check and provide the further details on July 8, 2021. 
  
  
Regards, 
Dhivya. 
  


DM Dhivyabharathi Mohan Syncfusion Team July 8, 2021 03:17 PM UTC

Hi Parthkumar, 
 
 
We have checked the sample you shared. We suspect that the write access permission is denied. So, the exception is thrown. We have embedded the Pdfium rendering engine in our PDF Viewer for robust rendering.So, Pdfium dll will be generated on runtime within your project location.     
     
However, we have exposed the ReferencePath API to set the pdfium library location path. We can place the pdfium library in project location and refer the project location to the ReferencePath. Please find the below code to set the pdfium location inside the wwwroot folder.    
   
 
Code snippet:      
  
PdfRenderer.ReferencePath = _hostingEnvironment.WebRootPath + "\\";    
     
 
Example:     
      
public IActionResult Load([FromBody] Dictionary<string, string> jsonObject)    
        {    
           PdfRenderer pdfviewer = new PdfRenderer(_cache);    
          PdfRenderer.ReferencePath = _hostingEnvironment.WebRootPath + "\\";    
            MemoryStream stream = new MemoryStream();    
            object jsonResult = new object();    
            if (jsonObject != null && jsonObject.ContainsKey("document"))    
            {    
                if (bool.Parse(jsonObject["isFileName"]))    
                {    
                    string documentPath = GetDocumentPath(jsonObject["document"]);    
                    if (!string.IsNullOrEmpty(documentPath))    
                    {    
                        byte[] bytes = System.IO.File.ReadAllBytes(documentPath);                            
                        stream = new MemoryStream(bytes);    
                    }    
                    else    
                    {    
                        return this.Content(jsonObject["document"] + " is not found");    
                    }    
                }    
                else    
                {    
                    byte[] bytes = Convert.FromBase64String(jsonObject["document"]);    
                    stream = new MemoryStream(bytes);    
                }    
            }    
            jsonResult = pdfviewer.Load(stream, jsonObject);    
            return Content(JsonConvert.SerializeObject(jsonResult));    
        }    
   
    
We have also shared the Pdfium dll in the below link,    
   
 
 
  
 
 
Note:  
  
Kindly use the  Syncfusion.EJ2.PdfViewer.AspNet.Core.Linux package in your application for Linux environment . Also, ensure whether the library dependencies of libpdfium.so are installed properly. If not, please execute the following command to install the dependencies. 
    
 
RUN apt-get update \      
    && apt-get install -y --allow-unauthenticated \      
        libc6-dev \      
        libgdiplus \      
        libx11-dev \      
        curl \      
        vim \      
        supervisor \      
        procps      
  
 
  
 
Please try this and revert us, if you have any concerns. 
 
 
 
Regards, 
Dhivya. 


PK Parthkumar Kakadiya July 14, 2021 12:51 PM UTC

Hi Dhivya,

I understood your explanation and implemented your solution. 

Now I am getting this error "The type initializer for 'Syncfusion.EJ2.PdfViewer.PdfiumNative' threw an exception."

I still don't know what is the cause of this error. Also the gitlab link you provided me giving me error like this: image (2).png


Please Help me out with issue.


Regard


PK Parthkumar Kakadiya July 15, 2021 11:35 AM UTC

Hi Dhivya,


any update on this issue. It seems like I got mail that you have replied but I don't see your replay at forums. 


Regards,

Parth 


DM Dhivyabharathi Mohan Syncfusion Team July 15, 2021 01:50 PM UTC

Hi Parthkumar, 
  
  
In our PDF Viewer, we have embedded the Pdfium rendering engine in our PDF Viewer for robust rendering. So, Pdfium dll will be generated on runtime within your project location. We suspect that the issue is due to the missing of the libpdfium.so assembly in the published Docker environment. So, we suggest you place the assembly in the project location and enabling the copy to Output Directory property to copy always and to publish the same. To work with PDFIUM in the LINUX environment we need to add the following commands in the docker file to install the dependencies.  
  
   
  
  
   
Commands:   
   
RUN ln -s /lib/x86_64-linux-gnu/libdl-2.24.so /lib/x86_64-linux-gnu/libdl.so    
# install System.Drawing native dependencies    
RUN apt-get update && apt-get install -y --allow-unauthenticated libgdiplus libc6-dev libx11-dev    
RUN ln -s libgdiplus.so gdiplus.dll    
   
   
   
   
  
Could you kindly try this and let us know whether the issue is resolved? And also, kindly confirm us whether the libpdfium.so is generated in the published environment. If the issue is not resolved, we can set up a web meeting and provide the details. We will make every effort to have this scheduled on a date and time of your convenience. 
  
  
Regards, 
Dhivya. 


PK Parthkumar Kakadiya August 5, 2021 03:38 PM UTC

Hi Dhivya,


I am still struglling to setup services of the PDFviewer.

 Still same error. Can you schedule web meting tomorrow any time as per your convience.


Regards,

Parth 


DM Dhivyabharathi Mohan Syncfusion Team August 6, 2021 09:06 AM UTC

Hi Parthkumar, 
 
We have created a new incident under your Direct Trac account. We suggest you follow up with the incident for further updates. Please log in using the below link.

 
  
 
Regards, 
Dhivya. 


PK Parthkumar Kakadiya December 7, 2021 01:49 PM UTC

Hi,


I am having formating problem with the pdfviewer which I have shown in Video. 

base64string which I serve working fine and you will also see downloaded file with formatting.


i have attached component where I used pdf-viewer, web services and base64string. Please help me to find out the cause of the problem and appropriate soultion.


feel free to contact for further deatils.


Regards,

Parth  


Attachment: PDFviewer_formating_problem_64653d12.7z

DM Dhivyabharathi Mohan Syncfusion Team December 8, 2021 12:54 PM UTC

Hi Parthkumar, 
  
  
We have checked the video you shared. But unable to get the exact issue which you are facing in your end using the video you shared. We have checked with the code snippet you have shared and the document is loading properly in the PDF Viewer. We have shared the sample in which we tried to load the document. 
  
  
  
  
  
  
Could you please let us know the exact issue which you are facing on your end? So, that it will be helpful for us to investigate further and provide the details at the earliest. 
  
  
Regards, 
Dhivya. 


Loader.
Up arrow icon