download a local file, on button click - javascript

Hi there I'm trying to download a local file on button click in VueJs
<a href="./documentation.docx" download>Download</a>
I have the documentation in the same folder as index
But when I'm trying to download, its saying No File

This should work properly as you've written it. It's essentially comes down to the given path, try something like this structure and this code (with an absolute path):
<a href="/azuki.jpg" download> download stuff </a>
Also, check the official documentation page here: https://cli.vuejs.org/guide/html-and-static-assets.html#the-public-folder

Related

How do I create a button that allows for downloading CV on personal website in HTML5, CSS, JS

I am trying to create a button for my personal portfolio website that allows users to download my CV from clicking on a button. I am not sure went wrong in my HTML5 file. Right now, when the button is clicked on, it simply opens up the CV on a new page.
<div class="d-block d-sm-flex align-items-center"><a class="btn content-download button-main button-scheme" href="resume/BenZhaoResumeSWE.pdf" download="" role="button">Download CV</a>
Let me know if further context around the code is needed. Here is what the frontend looks like the on webpage so far. The button itself is there and clicking on opens up a new webpage with the CV instead of downloading it.](https://i.stack.imgur.com/cLmS5.jpg)
I tried using the above line of code and expected it to download the CV straight from the webpage. Instead it opens up a new page with the CV. Is this simply because I have not yet put the webpage on a host domain or is this a coding issue?
You can try this one:
<a class="btn content-download button-main button-scheme" href="resume/BenZhaoResumeSWE.pdf" download="proposed_file_name" >Download CV</a>
href is a path that resolves to an URL on the same origin. That means the page and the file must share the same domain, subdomain, protocol (HTTP vs. HTTPS), and port (if specified). Exceptions are blob: and data: (which always works), and file: (which never works).
proposed_file_name is the filename to save to. If it is blank, the browser defaults to the file's name.
You can use:
<p>Download <a href="/path/to/mycv.txt" download>my cv</a> please.</p>
You will need to get the path correct so that there is a file called mycv.txt in the relevant directory. The key point here is the use of the download attribute in the anchor element.
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a and https://itnext.io/how-to-download-files-with-javascript-d5a69b749896

Linking the file to download in a form without page url change

I'm writing a simple page with a form in JS. I also use ajax in this form. At the bottom of this form I have a checkbox with a link to pdf file with terms. I want to be able to download this file by clicking on a link.
<a href="#file_name" download="File.pdf" target="_top">
Downloading a file works, but the url changes - "#file_name" is added to my current url. How can I get rid of this "#" or prevent adding it?
Try it. It should solve the problem
<a href="File.pdf" download >Download</a>

Download pdf/word button javascript /jquery

I have data that saved in csv file. The data was used for creating some interactive graphs using d3.js and javascript. The files I have to run the graphs are some js files, css and html files. I don't need any server to run it.
Now, I want to add a download button on the page where the graphs are displayed. When user click download button, the csv will be downloaded as pdf/word file. Does anyone know how to do that? Any plugin to recommend?
Thanks a lot!
This might work for you. There is an HTML5 rule called "download" that can be added to an anchor tag.
<a href="documents/message.csv" target="_blank" download><button>Download</button></a>
In most browsers this "download" command forces the browser to open the download box. The download box itself will allow users to select their download format.
You can create an online cloud account with any free cloud-base storage (mega.nz is good), create folders for the files you want the public to see, upload those different formatted files into its own folder > copy file link and paste it in your button code like:
<a href="FILE LOCATION" target="_blank" download><button>BUTTON NAME</button></a>
on your site, it will show a rectangled grey download button that will redirect public to the folder with all those files they can choose to download.

How to download a file without the "Leave the Page" dialog or any other prompt?

In Internet Explorer 10; When i try to download a file; i get following dialog box:
Is there someway in Jquery or HTML with which this box does not get appear when user tries to download a file in application?
Update:
Also could not user target blank as flashing of new tab should not be there(customer requirements).
As asked for code, it is simple link:
<a href="www.something.com/something/something.pdf" >
jquery.fileDownload.js will help you in this.
apply file path to
function downloadPDF(thisobj) {
$.fileDownload($(thisobj).attr("href"));
}
Call this funciton on
<a href="www.something.com/something/something.pdf" onclick="downloadPDF(this)">
I'd suggest you look into HTML5's download attribute.
Excerpt from the site:
Place the download attribute on a link...
<!-- will download as "expenses.pdf" -->
Download Your Expense Report
...and when the user clicks the link, the download attribute appears
in the save dialog instead of the garbled mess that was there before.
In this case, the file will be downloaded as expenses.pdf. The
download attribute also triggers a force download, something that I
used to do on the server side with PHP.

Image Download Button for Wordpress

How can I add custom image download button for Wordpress?
I mean when we click on download button, instantly image downloading starting without any pop up or warning.
Please help me with all required codes.
Thanks...
from the formatting of your question, I'll assume that you're not too technical. To do this properly you'll need to do some work on the server, to send the file requested by the client with the correct headers.
There is a simple dom method to do it though, have a look at
http://caniuse.com/#feat=download
Though its not widely supported, it may be a viable and simple solution.
<a href="/path/to/image" download>
<img src="/path/to/image" />
</a>
There is also a handy plugin for WordPress that will help with downloads, there may be others, but have a look at
https://wordpress.org/plugins/wp-downloadmanager/
There is also many discussion on SO here regarding this, so in the interest of brevity have a look at these if you'd like a more robust and complete solution
Example given with PHP
href image link download on click
Expamle given with server config and JS
Force Download an Image Using Javascript
Do you want like this link updated
<a href="#" download="image.jpg" title="ImageName">
<img src="http://www.teluguone.com/photos/images/download_new.png" alt="ImageName">
</a>

Categories

Resources