Changing the document path to local pdf doesnt show the pdf

[priya]

added the below code and it works fine...

public service = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer';

  public document = 'FormDesigner.pdf';

but when i replaced the path with a local pdf inside assets folder, nothing shows up. How shld i use syncfusion to view and edit my pdf form

[Vasugi Sivajothi]

Hi Priya,

You can load the PDF document from the path using the open icon in the default toolbar or programmatically using the load and documentPath API.

Please refer to the below code snippet and sample.

Code Snippet to load document from server location:

 

viewer.load('PDF_Succinctly.pdf', null);

 

or

 

documentPath:"PDF_Succinctly.pdf"

 

Note: We need to place the PDF documents in the server location

 

Code Snippet to load document as base64 string:

 

Viewer.load(“data:application/pdf;base64,…..”,null);

 

Documentation: https://ej2.syncfusion.com/angular/documentation/pdfviewer/how-to/load-document/

https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#load

https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#documentpath

Kindly try this and let us know if this helps you.

Regards,

Vasugi.

[priya]

.html file

<ejs-pdfviewer id="pdfViewer" #pdfviewer [serviceUrl]='service'

[documentPath]='document' (documentLoad)='documentLoaded($event)'

 style="height:640px;display:block"></ejs-pdfviewer>

.ts file

  public service: string = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer';

   public document: string = 'FormDesigner.pdf';

ngOnInit(): void {

    this.load_2();

  }

  load_2() {

    // Load PDF document using file name

    var viewer = (<any>document.getElementById('pdfViewer')).ej2_instances[0];

    viewer.load('myform.pdf', null);

  } 

where myform.pdf is my pdf file inside assets folder.

i get the below error

core.mjs:6494

       ERROR TypeError: Cannot read properties of undefined (reading '0')

    at PdfviewComponent.load_2....

ej2_instances[0] is undefined here.....

How should i proceed now. Any help appreciated

[Vasugi Sivajothi]

Hi Priya,

We have checked with the provided details and found that the reported issue is due to loading the PDF document before the component is rendered. We suggest you place the document in the server path and use documentPath property to load the document initially in the PDF Viewer component. You can also load the document after rendering the PDF Viewer component using the load() method. Please refer to the below code snippet and sample.

Code Snippet:

 

public document: string = 'PDF_Succinctly.pdf'; // Need to place this document in server location

 

or

 

<button (click)="loadDocument()">LoadDocument</button>

 

  loadDocument() {

    // Load PDF document using file name

    var viewer = (<any>document.getElementById('pdfViewer')).ej2_instances[0];

    viewer.load('HTTP Succinctly.pdf', null); // Need to place this document in server location

  }

 

 

Sample: https://stackblitz.com/edit/angular-pkft33?file=app.component.ts

Web service: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Web_Service1870692264

Please refer to the below link to create PDF Viewer web service project and provide that URL to the serviceUrl property in the PDF Viewer,

https://www.syncfusion.com/kb/10346/how-to-create-pdf-viewer-web-service-application-in-asp-net-core

https://www.syncfusion.com/kb/11063/how-to-create-the-pdf-viewer-web-service-application-in-net-core-3-0-and-above-version

Kindly try this and let us know if this suits your requirement.

Regards,

Vasugi.

[prakash E]

Hi vasugi i'm also facing the same issue ... i can't able to read the pdf data coming from api .... popup shows up like invalid pdf file type ... but i also checked the res pdf like opening directly into the browser ... its working ...but not syncfuion gives error.    ......   I need add my local pdf which coming from api to the web service data folder can help with this or any other way to solve this issue

Iam using the default web service which syncfusion provide in the sample

 public service: string = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer

[prakash E]

Hi priya,

Currently I am also facing this issue. Did you find solutions for this

[Chinnamunia Karthik Chinna Thambi]

Only a limited number of documents are available in the provided demo service URL (https://ej2services.syncfusion.com/production/web-services/api/pdfviewer). If you wish to load your own default document, we recommend creating your own web service. To learn how to create your own web service, please refer to the link below:

KB link: https://www.syncfusion.com/kb/10346/how-to-create-pdf-viewer-web-service-application-in-asp-net-core

We have also shared a sample on GitHub, which you can find at the link below:

GitHub link: https://github.com/SyncfusionExamples/EJ2-PDFViewer-WebServices/tree/main/ASP.NET%20Core

To load the default document initially, follow these steps:

• Clone or download the ASP.NET Core web service from the provided GitHub repository.
• Place the required document in a data folder within the web service.
• Run the web service.
• Copy the URL generated by the web service project.
• Open the Angular sample at the following link: (https://stackblitz.com/edit/angular-ejd9ol?file=src%2Fmain.ts,src%2Fapp.component.ts,src%2Fapp.component.html)
• In the Angular sample, paste the URL of the generated web service into the `serviceURL` field.
• Specify the document name in the `documentPath` field to refer to the desired document.

[prakash E]

Thank you for your response Mr Chinnamunia Karthik Chinna Thambi, my case i want create a web service using php, is that syncfusion pdf viewer supports it and i don't wants to store my pdf document it should be load even the selected file is not placed in the web service data

[Chinnamunia Karthik Chinna Thambi]

Sorry, we don't have the support to create the web service in PHP. We have provided the support only in .NET framework. Please refer to the below link to create PDF Viewer web service project in .NET framework, 

 

https://www.syncfusion.com/kb/11063/how-to-create-the-pdf-viewer-web-service-application-in-net-core-3-0-and-above-version  

[???????? K. ??????????]

Hi Everyone ,

I tried to with a input file as File Object  which reads the file as URL and pass it into the viewer.

Below code i have tried with VueJs

function readFile(args) {

  return new Promise((resolve, reject) => {

    let reader = new FileReader();

    reader.onload = function (e) {

      let argsUrl = e.currentTarget.result;

      resolve(argsUrl);

    };

    reader.onerror = function (error) {

      reject(error);

    };

    reader.readAsDataURL(args);

  });

}

//Note : DataFromchild is a File Object

  var viewer = this.$refs.pdfviewer.ej2Instances;     

      var res = await readFile(dataFromChild);

      viewer.dataBind();

      viewer.load(res, null);

      viewer.fileName = dataFromChild.name;

//Now render the component

[Chinnamunia Karthik Chinna Thambi]

We are uncertain about your update. Kindly verify if you encounter any challenges when loading the PDF document from file object. In case you are experiencing difficulties, please provide the sample where the issue arises along with the issue details.