How to make a pdf download on a button click with react? - html

This is what I've tried:
<button className="button">
<a
className="button"
href="../assets/Resume/ResumeOfficial.pdf"
download
>
Download Resume
</a>
</button>
It does try to download but it cannot find the file, yet I'm sure (like 99% unless I made some dumb mistake) that the address is correct.

<button className="button">
<a className="button" href="../assets/Resume/ResumeOfficial.pdf" download = "ResumeOfficial.pdf">
Download Resume
</a>
</button>
so this should solve your problem, generally for downloading .pdf always double check
Download

You can import same file in some variable and then you can use that variable in href it might work.
find below example:
<a href="variable_name" download>

Related

I am unable to input download link in html

I am receiving the error "Failed- No file" whenever I tried to click the download button. Here is the code below:
<a class="btn-ghost" href="Resume/cover letter.pdf" download>Download resume</a>
is there anything I can do to rectify the error?
<a class="btn-ghost" download href="Resume/cover letter.pdf" download>Download resume</a>
You can try this one also and again check the path you have given to the href, if the path is correct then this will gonna run, i have tried it.

HTML - How to Open base64 Image String in New Tab

I'm trying to create an HTML button that will open an image in the form of a base64 string in a new tab. I made a trial version that works fine with static images:
<button type = "button" id = "submit_btn" class="contact100-form-btn">
<a href="static/static_filename.png" class="contact100-form-btn" target="_blank">
Download
</a>
</button>
Now I would like to do things dynamically (the application involves each user creating a new image, so serving from a single static filename will not work). My first attempt:
<button type = "button" id = "submit_btn" class="contact100-form-btn">
<a href="data:image/png;base64,{img_io}" class="contact100-form-btn" target="_blank">
Download
</a>
</button>
Where img_io is the base64 encoded image string.
Clicking the button does nothing, and prompts the message Not allowed to navigate top frame to data URL in the Chrome developer console. I tried adding download explicitly:
<button type = "button" id = "submit_btn" class="contact100-form-btn">
<a download="filename.png" href="data:image/png;base64,{img_io}" class="contact100-form-btn" target="_blank">
Download
</a>
</button>
This causes the image to download successfully on Chrome, but does not work on Firefox. Does anyone know how to make the base64 image string open in a new tab? Or as a fallback a create direct download option that works across browsers? Preferably in pure HTML, as this is part of a python based web app and I know next to nothing about Javascript.
Thanks

href="file://" doesn't work

I have a problem with:
href="file://"
Well I want to point a link in html to file, in browser if I write like
file:///K:/filename.pdf
It works to open a file, but if I point it to:
href="http://file:///K:/AmberCRO%20SOP/2011-07-05/SOP-SOP-3.0.pdf"
It doesn't work. link is changed to:
file///K:/AmberCRO%20SOP/2011-07-05/SOP-SOP-3.0.pdf
The colon after file disappears. Any suggestions as to what to do?
The reason your URL is being rewritten to file///K:/AmberCRO%20SOP/2011-07-05/SOP-SOP-3.0.pdf is because you specified http://file://
The http:// at the beginning is the protocol being used, and your browser is stripping out the second colon (:) because it is invalid.
Note
If you link to something like
yourfile.pdf
The above represents a link to a file called k:/yourfile.pdf on the k: drive on the machine on which you are viewing the URL.
You can do this, for example the below creates a link to C:\temp\test.pdf
test.pdf
By specifying file:// you are indicating that this is a local resource. This resource is NOT on the internet.
Most people do not have a K:/ drive.
But, if this is what you are trying to achieve, that's fine, but this is not how a "typical" link on a web page works, and you shouldn't being doing this unless everyone who is going to access your link has access to the (same?) K:/drive (this might be the case with a shared network drive).
You could try
test.pdf
test.pdf
test.pdf
Note that http://file:///K:/AmberCRO%20SOP/2011-07-05/SOP-SOP-3.0.pdf is a malformed
%20 is the space between AmberCRO SOP.
Try -
href="http://file:///K:/AmberCRO SOP/2011-07-05/SOP-SOP-3.0.pdf"
Or rename the folder as AmberCRO-SOP and write it as -
href="http://file:///K:/AmberCRO-SOP/2011-07-05/SOP-SOP-3.0.pdf"
Share your folder for "everyone" or some specific group and try this:
Download PDF
Although the ffile:////.exe used to work (for example - some versions of early html 4) it appears html 5 disallows this.
Tested using the following:
<a href="ffile:///<path name>/<filename>.exe" TestLink /a>
<a href="ffile://<path name>/<filename>.exe" TestLink /a>
<a href="ffile:/<path name>/<filename>.exe" TestLink /a>
<a href="ffile:<path name>/<filename>.exe" TestLink /a>
<a href="ffile://///<path name>/<filename>.exe" TestLink /a>
<a href="file://<path name>/<filename>.exe" TestLink /a>
<a href="file:/<path name>/<filename>.exe" TestLink /a>
<a href="file:<path name>/<filename>.exe" TestLink /a>
<a href="ffile://///<path name>/<filename>.exe" TestLink /a>
as well as ...
1/ substituted the "ffile" with just "file"
2/ all the above variations with the http:// prefixed before the ffile or file.
The best I could see was there is a possibility that if one wanted to open (edit) or save the file, it could be accomplished. However, the exec file would not execute otherwise.

Set Facebook URL to Share with Parameters

Is it possible to crate SHARE link for specific page in my website? For instance:
http://www.MY-SITE.COM/index.php?page=show_book&book_id=$book_id
I tried:
<a title='Share on Facebook'
href='http://www.facebook.com/sharer.php?u=http://www.MY-SITE.COM/index.php?page=show_book&book_id=$book_id'
target='_blank'>
Share on Facebook
</a>
but it doesn't get the parameters.
If the parameters are getting stripped, try url encoding them (rawurlencode() in PHP).
Also make sure your target share page is serving up different open graph meta tags based on the parameters.
Share button is old. FB recommends to use the like-Button
http://developers.facebook.com/docs/reference/plugins/like/
looks like you need to echo your $book_id:
<a title='Share on Facebook'
href='http://www.facebook.com/sharer.php?u=http://www.MY-SITE.COM/index.php?page=show_book&book_id=<?php echo $book_id ?>'
target='_blank'>
Share on Facebook
</a>
A common approach to this, which will work amongst other providers too (twitter, g+ etc) is to use a url shortening service like http://bit.ly.
replace & with %26 something like
$url = 'http://www.MY-SITE.COM/index.php?page=show_book%26book_id='.$book_id;
<a title="Share on Facebook"
href="http://www.facebook.com/sharer.php?u=<?=$url?>">Share on Facebook</a>

Opening popup windows in HTML

I am working with web apps, and I am wondering if there is a way to open a link in an app-type window using HTML? Something like this:
My App
Something like this?
Click Here
HTML alone does not support this. You need to use some JS.
And also consider nowadays people use popup blocker in browsers.
open popup
I feel like this is the simplest way. (Feel free to change the width and height values).
<a href="http://www.google.com"
target="popup"
onclick="window.open('http://www.google.com','popup','width=600,height=600'); return false;">
Link Text goes here...
</a>
Open a popup, a sample, link with in the same site.
<a onclick="window.open('/Product/Product', 'popup', 'location=0,width=750,height=650,left=500,top=55'); return false;" class="btn btn-primary btn-sm">+</a>