Creating Files in JavaScript on your Browser

Creating Files in JavaScript on your Browser

Did you know you can create files using JavaScript right inside your browser and have users download them? You can create files with a proper name and mime type and it only takes a few lines of code. Creating downloadable files with JavaScript in your browser only takes a few lines of code. Check out the image and read more in my latest article: https://t.co/ZEarSpftMN pic.twitter.com/6D5GKLxgGp — Kilian Valkhof (@kilianvalkhof) May 19, 2020 For the new Create workspace feature in Polypane, which lets you create a Polypane workspace with panes from the most used browser sizes from your Google Analytics data, I needed an easy way to create a “.ppws” file that Polypane knows how to read an import. I already knew it was possible, I just didn’t know how little work it turned out to be. Here’s how it works: first you get your data ready. Your data can be either binary or text. In my case it was json structure, but you can also get image data from the canvas, for example. Then when you have this data, you store it in a Blob, the “file-like object” that JavaScript supports. Blobs have been supported since IE10, so you can use them without any transpilation. const workspace = { … } const file = new Blob( [JSON.stringify(workspace)], { type: ‘application/json’ } ); A blob takes your data in the form of an array or array-like object (like an arraybuffer or another blob). In my case, it only has the text string of my json structure so that was pretty simple. The second argument are options and it’s where you set the type. There’s type, which you use to specify the mime type of your file. After you’ve done this, the Blob exists but it’s not yet ready for downloading. For that we need to create an Object URL: const fileURL = URL.createObjectURL(file); This creates an actual link that we can use to link to our created blob, it starts with blob:. Now we have a file URL that refers to our blob, but you’ll notice it doesn’t actually have a name yet. For that we actually need a little bit of DOM/HTML. The a element has an attribute called “download”. If it’s present without value, it means that the URL should download when a user clicks on it. But we can also give it a value, and that value will be used as a suggestion for the file name. Because we created our file in JavaScript, we’ll also create the link in JavaScript, then add it to the page: const linkElement = document.createElement(a); linkElement.setAttribute(‘href’, fileURL); linkElement.setAttribute(‘download’, ‘polypane-workspace.ppws’) document.body.appendChild(linkElement); You’d add it to a specific element of course, not just at the end of the document, but this is just for illustration. And there you have it, In just a few lines of code you’ve created a file and given it mime type and file name. If you want to try it out, create a Polypane workspace here. Related articles Using Google Analytics to gather usage statistics in Electron Apps Electron , 24 April 2018 The Electron App framework makes it really easy to build cross-platform applications. I know this, because I’ve made a bunch. But how do you find out if people are using the features in your application?  » Read More

Like to keep reading?

This article first appeared on kilianvalkhof.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply