0

I am using pdf.js to view pdf in my website. However, the viewer.html won't load the viewer.css, pdf.js, and viewer.js. My viewer.html is in the same directory as my viewer.css and viewer.js. The pdf.js is in build directory. My viewer html won't load all these files.

I've tried the solution listed in here : HTML not loading CSS file. But nothing helped.

This is my code

<link rel="stylesheet" type="text/css" href="./viewer.css">
<script src="build/pdf.js"></script>
<script src="./viewer.js"></script>

Chrome throw error 404 on these three files. I'm using Coldfusion and I'm putting pdf.js on the iframe, could that be the reason?

Edit#1: My folder structure Edit#2 : Console error

jdow
  • 59
  • 1
  • 1
  • 11
  • 1
    use `../` for the path – Sai Manoj Jul 03 '19 at 05:44
  • in scr just add this link https://raw.githubusercontent.com/webodf/ViewerJS/master/viewer.js. if it works for you then copy the content and paste it in seperate js file – Amaresh S M Jul 03 '19 at 05:58
  • @Amr I've tried . It still won't load – jdow Jul 03 '19 at 06:21
  • @SaiManoj, I've tried this as well, but it still doesn't work – jdow Jul 03 '19 at 06:21
  • Can you please share the google chrome console error screenshot? – Ankush Jain Jul 03 '19 at 06:59
  • @AnkushJain, I've updated my question – jdow Jul 04 '19 at 00:40
  • Screenshot simply says that it is expecting the files in eDoc folder but unable to find them there. I will still recommend you to inspect elements on viewer.html page & find these links. Then try to open these links in a new tab. By this, you will come to know where these links are pointing at. And you can update the path in viewer.html & again reload the page & repeat the same activity until you get accurate paths. – Ankush Jain Jul 04 '19 at 05:59

2 Answers2

2

try this ../viewer.css instead of ./viewer.css

<link rel="stylesheet" type="text/css" href="../viewer.css">
<script src="build/pdf.js"></script>
<script src="../viewer.js"></script>
Ravi Kadyan
  • 323
  • 1
  • 9
0

As both css and js are in the same folder of your html file, you can directly use as

<link rel="stylesheet" type="text/css" href="viewer.css">
<script src="viewer.js"></script>

pdf is in different folder, so you need to come out of the current folder using ../ and apply the path for that. So it would be ../build/pdf.js. Which means come back from the html file folder and go to the folder where pdf.js is present(that is inside the build folder)

<script src="../build/pdf.js"></script>

Hope you got this cleared

Sai Manoj
  • 3,809
  • 1
  • 14
  • 35
  • I've tried this, and it still doesn't work. However, I've tried bringing the html file outside the web folder and into the main folder, and it calling the css file. The only issue there, it is still not calling the pdf.js file in build folder. – jdow Jul 04 '19 at 00:42