PDF Viewer does not have support to load the URL

[Muhilan Subramanian]

How can i render the pdf document based on the URL in PDF Viewer. I tried two ways and both are not working. There are given below :
1) using document-path :

<ejs-pdfviewer

id="pdfviewer"

ref="pdfViewer_instance"

:service-url="serviceUrl"

document-path="http://www.africau.edu/images/default/sample.pdf"

/>

Facing issue while using document-path : Pdf viewer is render, but the pdf document is not render within pdfviewer

2) using base64data :

async getBase64 (filePath) {

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

const xhr = new XMLHttpRequest()

xhr.open('GET', filePath, true)

xhr.responseType = 'blob'

xhr.onload = function (e) {

const myBlob = this.response

const reader = new window.FileReader()

// read the blob data

reader.readAsDataURL(myBlob)

reader.onloadend = function () {

const base64data = reader.result

// Typecast the HTMLElement to avoid Typescript lint issue

const pdfviewer = document.getElementById('pdfviewer').ej2_instances[0]

// load the base64 string

pdfviewer.load(base64data, null)

}

}

xhr.send()

})

Facing issue while using base64data : Some error dialog popup will trigger and the error message is like "Corrupted data"

Expectation output is : Need to render the online pdf (based on the URL) within the pdf viewer using vuejs and nodejs platform not in asp.net & C#

Please someone help me out in this issue

Thanks in Advance

[Dhivyabharathi Mohan]

Hi Muhilan, 

 

 

Thank you for contacting Syncfusion support. 

 

 

Please find the details, 

 

 

Query	Details
How can i render the pdf document based on the URL in PDF Viewer. I tried two ways and both are not working. There are given below : 1) using document-path :  <ejs-pdfviewer        id="pdfviewer"        ref="pdfViewer_instance"        :service-url="serviceUrl"        document-path="http://www.africau.edu/images/default/sample.pdf"      />    Facing issue while using document-path : Pdf viewer is render, but the pdf document is not render within pdfviewer  2) using base64data :  async getBase64 (filePath) {        await new Promise((resolve, reject) => {          const xhr = new XMLHttpRequest()          xhr.open('GET', filePath, true)          xhr.responseType = 'blob'          xhr.onload = function (e) {            const myBlob = this.response            const reader = new window.FileReader()            // read the blob data            reader.readAsDataURL(myBlob)            reader.onloadend = function () {              const base64data = reader.result              // Typecast the HTMLElement to avoid Typescript lint issue              const pdfviewer = document.getElementById('pdfviewer').ej2_instances[0]              //  load the base64 string              pdfviewer.load(base64data, null)            }          }          xhr.send()        })    Facing issue while using base64data : Some error dialog popup will trigger and the error message is like "Corrupted data"	You can’t load the PDF documents from a URL directly in our PDF Viewer control. You need to load them into the PDF Viewer control by creating your own web service as provided in the link  and replacing the below load method on the created web service.     In this, you have to download the PDF document by using the WebClient class and loaded the same in the PDF Viewer control. Please find the below code snippet for loading the PDF file directly from the static URL.     Controller code:       PdfViewerController.cs:     public IActionResult Load([FromBody] Dictionary<string, string> jsonObject)          {              PdfRenderer pdfviewer = new PdfRenderer(_cache);              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                      {                          string fileName = jsonObject["document"].Split("://")[0];                          if (fileName == "http" || fileName == "https")                          {                              var WebClient = new WebClient();                              byte[] pdfDoc = WebClient.DownloadData(jsonObject["document"]);                              stream = new MemoryStream(pdfDoc);                          }                          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));          }         public service: string = ‘http:localhost://xxxx';       public document: string = 'https://datastoredinblob        Note: The service URL ('https://ej2services.syncfusion.com/production/web-services/api/pdfviewer') is only for demo purposes. We need to create the own web service and run the same and refer to the localhost link in the serviceUrl property of our PDF Viewer control.     Please find the UG documentation link for more details about using the PDF Viewer control
Expectation output is : Need to render the online pdf (based on the URL) within the pdf viewer using vuejs and nodejs platform not in asp.net & C#  Please someone help me out in this issue	At present there is no support for PDF Viewer Web service in Node Js and Vue Js applications. PDF Viewer control is client-server oriented. PDF viewer control processes the PDF document on the server-side (developed with the .NET environment)  and sends the processed PDF data to the client using the web service to render the PDF document and for further operations in PDF viewer.            Please find the below UG link to getting started with PDF Viewer,          https://ej2.syncfusion.com/angular/demos/#/material/pdfviewer/default       UG: https://ej2.syncfusion.com/angular/documentation/pdfviewer/getting-started/         We need all the web action methods provided in the below link to rendering the PDF pages and for further operations in PDF Viewer. We will send the necessary data through the AJAX request from the source level. You can create the PDF Viewer Web Service project in ASP.NET Core/ ASP.NET MVC with the help of the below links.       ASP.NET Core: https://www.syncfusion.com/kb/10346/how-to-create-pdf-viewer-web-service-application-in-asp-net-core         ASP.NET MVC: https://ej2.syncfusion.com/documentation/pdfviewer/how-to/create-pdfviewer-service/

 

 

 

Kindly try this and revert us, if you have any concerns. 

 

 

Regards, 

Dhivya.