Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

HTML5 Download Link

See original GitHub issue

I’m trying to do something fairly simple - offer a file for download, but am finding much difficulty in the process. I’m specifically wanting to offer a yaml and a pdf for download. Should this be done using the static folder? Thank you for the assistance!

Specifically looking to do something like: <a href="/src/pages/category/_fields.yaml" download="fields.yaml">Download</a>

Issue Analytics

State:
Created 6 years ago
Comments:7 (3 by maintainers)

Top GitHub Comments

2reactions

benforsheycommented, Nov 30, 2017

Neat project! Glad that importing is working well for you. You might have some trouble turning an imported *.yaml file into an downloadable asset (just a guess, not proven).

From the repo, I noticed that your static folder is not at the project root. It has to live at root level for Gatsby: /static/* will end up at /public/*. For instance, if you were to drop your favicon.ico in /static/, and then run gatsby build, it would end up in /public/favicon.ico.

I hope that helps! I’m definitely going to star that repo.

2reactions

benforsheycommented, Nov 30, 2017

Your /src/pages/category folder won’t exist in your production site (after you run gatsby build), so you can use the static folder like you suggested. If you placed the file in /static/documents/, your href would be /documents/_fields.yaml.

Let me know how it works out for you! 😃

Top Results From Across the Web

HTML a download Attribute - W3Schools

The download attribute specifies that the target (the file specified in the href attribute) will be downloaded when a user clicks on the...

Create a Downloadable Link using HTML5 Download Attribute

The download attribute only works for same-originl URLs. So if the href is not the same origin as the site, it won't work....

<a>: The Anchor element - HTML: HyperText Markup Language

The HTML element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the ...

How can I create download link in HTML? - Stack Overflow

In modern browsers that support HTML5, the following is possible: <a href="link/to/your/download/file" download>Download link</a>. You also can use this:

Quick Tip: Using the HTML5 Download Attribute

The download attribute is part of the HTML5 spec and expresses a link as download link rather than a navigational link. The download...