1. Home
  2. Forum
  3. Vue
  4. PDF viewer is not render the pdf document while using online .pdf document url and also local files

PDF viewer is not render the pdf document while using online .pdf document url and also local files

As per the documentation and which you shared vue project (VuePdfViewer1753388049.zip), we are integrated the PDFViewer in my project

But i facing the below issue :

PDFViewer tool is rendering without pdf document while using online .pdf document URL like (http://www.africau.edu/images/default/sample.pdf)

It's just spinning while giving local folder path and also online document URL. At a same time, i didn't get any issues in console.log

In inspect element network, the response is coming like this
http://www.africau.edu/images/default/sample.pdf is not found


5 Replies
VS Vasugi Sivajothi Syncfusion Team September 15, 2021 03:56 PM UTC

Hi Muhilan, 
 
Thank you for contacting Syncfusion support.      
 
Syncfusion PDF Viewer does not have the support to load a PDF document from a URL directly. However, you can convert the URL to a byte array at the server-side Load() web action method, and then can display the same in PDF Viewer. 
 
So, you need to create the your own web service and add the below code snippet in load method. 
 
 
Code Snippet in Server-side: 
 
string fileName = jsonObject["document"].Split(new string[] { "://" }, StringSplitOptions.None)[0]; 
 
                        if (fileName == "http" || fileName == "https") 
 
                        { 
 
                            WebClient WebClient = new WebClient(); 
 
                            byte[] pdfDoc = WebClient.DownloadData(jsonObject["document"]); 
 
                            stream = new MemoryStream(pdfDoc); 
 
                        } 
 
 
 
And you need to provide the document URL in the document path property on the client-side. 
 
Code Snippet in client-side: 
 
 
export default Vue.extend({ 
  name: "PdfViewer", 
  data () { 
        return { 
            //Specifying the view for PDF Viewer 
            view:"Details", 
             serviceUrl: 'https://localhost:44398/pdfviewer', 
             document: http://www.africau.edu/images/default/sample.pdf,  
        }; 
  }, 
 
 
 
 
 
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, 
 
 
 
 
Note: If you load the document using the document name in the documentPath or load APIs, you need to place those PDF documents in the server location. 
 
 
 
Kindly try this and let us know if you have any concerns about this. 
 
 
Regards, 
Vasugi. 


MS Muhilan Subramanian September 16, 2021 05:01 AM UTC

@Vasugi Sivajothi Thanks for the reply.

Actually my platform is vuejs and nodejs not in asp.net & C# platform. How can i achieve the above functionalities within in my platform (vuejs & nodejs)

Already 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 help me out in this issue

Thanks in Advance


VS Vasugi Sivajothi Syncfusion Team September 16, 2021 01:43 PM UTC

Hi Muhilan,  
 
At present we do not have support for PDF Viewer Web service in node js application. PDF Viewer control is client-server oriented. PDF viewer control processes the PDF document at 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.  
 
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. As we mentioned earlier, you need to create the PDF Viewer Web Service project in ASP.NET Core/ ASP.NET MVC with the help of the below links. 
 
 
 
Please let us know if you have any concerns about this. 
 
Regards, 
Vasugi. 


AT atul December 7, 2021 10:22 AM UTC

"Document Reference pointer does not exist in the cache"

how can resolve this asp.net mvc




SK Shamini Kiruba Sobers Syncfusion Team December 8, 2021 02:29 PM UTC

Hi Atul, 

 
In the load balancing environment, the request will be sent to different server machines, in which the cache data will not be available. However, we have implemented the feature ‘Achieve load balancing environment in MVC framework’ and shared the PDF Viewer web-service sample. Kindly download it from the below link. Please find the steps to configure the cache in your application to get the issue resolved. 

 
    

 
      
Kindy refer the below documentation for more details about using the Redis cache in your end.   

 
    

 

 
Kindly try this and let us know if you have any concerns about this. 

 

 
Regards, 
Shamini 


Loader.
Up arrow icon