Force a Download with HTML5

Fri, 09 Feb 2018 17:32:43 +0000

HTML5 is the greatest version of HTML ever! (Well, at least until the next awesome version comes out). I just learned how trivially easy it is to force downloads with HTML5.

I was just trying to force a download of a PDF file because the customers need to sign it and send it back and it’s harder to do that online. I was going to use JavaScript, but decided that I’d do a quick search in case there was a better way.

Forcing Downloads is Easy—HTML5 to the Rescue!

Not only is there a better way, but it’s trivially easy to implement. I just add the keyword download to my anchor and BAM! the browser will pop a dialog box. I haven’t tested it in a lot of browsers (or devices), but it’s still huge! I mean, as a fallback I can attach a download function only to links that have the download keyword in them.

Now my download links look like this:

<a href="link to file" download="">Download the PDF</a>

I’m practically crying, I love HTML5 so much!!!

I'm loving SVG

Tue, 03 Jul 2012 19:48:31 +0000

One of the great things about HTML5 is that there is a proposal in the W3C to allow HTML5 and XHTML to include SVG inline in the documents. But what’s especially great is that if you’re using a modern browser (IE 9+, Firefox, Safari, Chrome, or Opera) you can embed SVG graphics in your HTML5 documents quickly and painlessly.

I am loving SVG because I don’t have to learn anything new. I can simply create vector graphics in Adobe Illustrator and then embed the SVG code into my HTML like I would any other image or embedded element. I don’t even have to use any special tags to call it out, I just paste everything from the starting <svg> tag to the closing </svg> tag.

Here’s an example. Note, I have added a <switch> tag to call a fallback image if your browser doesn’t support inline SVG. This might result in you seeing the image twice, but I hope not. :-) If, when you right-click on this graph, you see a PNG image, then you’re seeing the fallback image.

[iframe_loader src=“https://www.html5in24hours.com/examples/inline-svg.html" height=“310”]

If you look at the HTML for that image, you’ll see a lot of <g> and <path fill="#FED7B8" d="M149.878,150.489l52.584,112.768c-62.28,29.041-136.311,2.097-165.353-60.184 c-14.521-31.14-15.905-62.854-4.154-95.141L149.878,150.489z"/> and other stuff that might look like gobbledygook, but it’s all SVG, and I didn’t have to come up with any of it. My program, Illustrator, did all the heavy lifting.

The ability to add smooth, crisp vector images to my HTML pages is a huge benefit to using HTML5. I hope that we see more of this type of graphics in the future.

Comments:

Beth - Jul 4, 2012

Love getting your helpful hints.

Stan - Jul 0, 2012

Just starting to learn into this Canvas/HTML5 & need more patience for better understanding. Sounds very positive & looks good! Thanks for this kick-start help. God bless! Stan from Windhoek

Bob - Sep 2, 2012

Stan, Canvas/HTML5 and SVG are different. Canvas is a raster image while SVG is a scalable image.

Examples on HTML5 in 24 Hours

Force a Download with HTML5

Forcing Downloads is Easy—HTML5 to the Rescue!

I'm loving SVG

The ability to add smooth, crisp vector images to my HTML pages is a huge benefit to using HTML5. I hope that we see more of this type of graphics in the future.

Comments: