/ViewerJS/#.. This simple doesn't work. Can somebody help?

[786zaidabbas]

tried it with /ViewerJS/#.. as a prefix in my URL which resulted into ViewerJS folder opening within the iframe. The part of the URL after # went undetected. Below is the iframe structure that I used.

<iframe src = "/ViewerJS/#https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" width='400' height='300' allowfullscreen webkitallowfullscreen></iframe>

Note. Both the ViewerJS folder and my html file have been placed in the C:// drive.
Could somebody help me with this? @vielmetti @adityab @vandenoever @thz @szimszon

[thz]

c:\ drive or not. You have to let ViewerJS fetch it with a http request.

[786zaidabbas]

c:\ drive or not. You have to let ViewerJS fetch it with a http request.

Thanks for the reply. Could you provide some more details or point out the mistake in my iframe tag. A correct example would really help. In my case the document url is being brought from the backend which I am trying too feed in the viewer. @thz @vielmetti @adityab @vandenoever

[rorp24]

where did you install the ViewerJS directory in the first place?

Because you have to write the full pass to this directory. Then, if it still don't work, try with ViewerJS/index.html#

[786zaidabbas]

where did you install the ViewerJS directory in the first place?

Because you have to write the full pass to this directory. Then, if it still don't work, try with ViewerJS/index.html#

Thanks @rorp24 for the reply. but i tried it either ways. I have place the viewer js folder in C drive and provided the full path to it. Also tried by adding index.html the link. It didn't work. Could you share a working example of yours. It will be a great help.

[thz]

As already mentioned: the file must be served over the http protocol and not accessed from the filesystem by the browser.
So what is the address you have in the address bar of your browser?

[786zaidabbas]

/ViewerJS/#https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf @thz

[sonisp]

Hi ,

I have downloaded the latest version ( 0.5.8 ), Created a very basic website with a Virtual Directory in IIS with a default page which I can access successfully.

I can also browse the Index.html without any issues with either .

However when I try to access a Sample PDF, the PDF does not show.

I am attaching screenshot for reference. Appreciate some guidance please.

Regards

[thz]

Please download the document and put it on the same server that is serving viewerjs. Use a path without host instead of the full url then.

[benyaminl]

Hi ,

I have downloaded the latest version ( 0.5.8 ), Created a very basic website with a Virtual Directory in IIS with a default page which I can access successfully.

I can also browse the Index.html without any issues with either .

However when I try to access a Sample PDF, the PDF does not show.

I am attaching screenshot for reference. Appreciate some guidance please.

Regards

Hello you can't load a PDF that's not from the same location/host, because of CORS standard, so the file should be also on localhost. see about https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS There, and why ViewerJS got CORS? Because it's using ajax to load the pdf, and ajax will only loaded if cross site origin is allowed by the HTTP header that's returned by the server, try by putting the pdf on localhost and access it using http://localhost:8072/ViewerJS/#/dummy.pdf
That mean the file is at http://localhost:8072/dummy.pdf.

[sprklinginfo]

out of curiosity: my existing website (application) allows users to upload files to the website, and it generates a link so users can use it for <a> tag on a page (e.g. a link for a file could be https://mywebsite.com/attachments/26). So the file is on the same server, can I use ViewerJS to embed the file like this?

<iframe src = "/ViewerJS/#/https://mywebsite.com/attachments/26" width='400' height='300' allowfullscreen webkitallowfullscreen></iframe>

Currently, I embed pdfjs library to allow users to view PDF files, so the <iframe> tag looks like as below. It can use the URL to the file, not the real file path on the server.

<iframe title="PDF viwer" src="/pdfjs/web/viewer.html?file=https://mywebsite.com/attachments/26" width="100%" height="500px"></iframe>

If the ViewerJS also can read file from http URL which is on the same server, I can definitely swap out the pdfJs library as it supports more file formats.

Thanks!

[benyaminl]

@sprklinginfo it can. as far you have same domain, and doesn't hit cors, ViewerJS can load any data type that's ViewerJS support..

[sprklinginfo]

awsome! Thanks @benyaminl

[sprklinginfo]

well, really disappointed. I tested on my existing website, and ViwerJS won't work if I put a https link for the file I uploaded into the same site that I want to embed.

<iframe src = "/ViewerJS/#/https://mywebsite.com/attachments/28" width="100%" height="600px" allowfullscreen webkitallowfullscreen></iframe>

I can see the default viewer background, and visiting https://mywebsite.com/attachments/28 directly in the browser will ask me to download the file. but this file can't be displayed in the ViewJS iframe.

With the above code I saw an 404 error in the console as it tried to prepend the domain name when loading, so I modified the code bit like this:

<iframe src="/ViewerJS/#/attachments/28" width="800" height="600px" allowfullscreen="allowfullscreen"></iframe>

This error is gone this time, and the file is not displayed either. In the console, the xhr loading is ok (200 response code) but the request-response said no data available.

I don't think it is realistic to have to locate the real file path on the server in order to display the file in ViewerJS.

[thz]

@sprklinginfo use a relative URL? src="/ViewerJS/#//attachments/28"
Could be that file extension name is needed to determine type if content-type is not enough

[benyaminl]

@sprklinginfo allow OPTIONS first and allow CORS

see more https://stackoverflow.com/a/9866124/4906348 if you are using PHP... My code works with no relative URL as far as the CORS is allowed...

Read More : https://www.w3.org/TR/2020/SPSD-cors-20200602/

This ViewJS works with any resource as far the CORS and allow origin allowing your domain to access it.. as it's a client side rendering..