How do Ilink to a pdf file in html?

Question

I am building a javascript app using vite js and I am having a problem linking an html file when I finally build and deploy the app to firebase. When I am in dev mode the code opens a new window and displays the pdf file normally ,however it wont show up when i finally build it...

<div id="link1"> <button id="button"><a class="pdf" href="assets/Hindes_Resume.pdf" target = "blank">Resume</a></button> </div>

I did that, however it is still just reloading my webpage in another tab. I have feeling it has nothing to do with the html and more to do with the build itself? This is a vite project deployed to firebase hosting — Jackson34, Feb 16 '22 at 21:37
"I did that, however it is still just reloading my webpage in another tab. " - Then the URL is wrong. We don't know enough about your build system / deployment process / server configuration to determine exactly how. — Quentin, Feb 17 '22 at 15:37

flydev · Answer 1 · 2022-02-17T15:45:26.843

The root cause of your issue is the path given to the href attribute of the anchor. You should use root absolute path.

As we do not have more details, I am assuming you have the assets directory in the public folder - something similiar to the following tree:

| public
|-- assets
|---- Hindes_Resume.pdf
| src
| package.json
...

Using absolute path : href="/assets/Hindes_Resume.pdf"

<div id="link1"> <button id="button"><a class="pdf" href="/assets/Hindes_Resume.pdf"  target = "blank">Resume</a></button> </div>

You can learn more about vite's static assets handling by reading the offical documentation.

OT Note:

Also, as Quentin stated, you should not nest an a element into a button element, I suggest you to give a read to this answer: Can I nest a <button> element inside an <a> using HTML5?

How do Ilink to a pdf file in html?

1 Answers1