Adding a “Download” button to a SuiteCommerce website is a common need for companies. However, SuiteCommerce does not (to my knowledge) have a built-in way to generate downloadable files in the browser. Thus, we turn to “Blob.”
Simple Blob Use Case: CSV
I will outline a simple use case here. There are many other ways to use Blob. See the linked documentation above.
define("DownloadBlob.View", [], function () {
"use strict";
return Backbone.View.extend({
events: {
'click [data-action="download"]': "generateCSVFile"
},
/**
* Send call to service to return data for a csv.
*/
generateCSVFile: function () {
let model = new SomeModel();
model
.fetch({
data: {
savedSearchId: this.search.savedSearchId,
recordsPerPage: this.collection.recordsPerPage,
csvDownload: true,
},
killerId: AjaxRequestsKiller.getKillerId(),
})
.done((response) => {
//convert data for use in the Blob
let records = response.records.map((record) => {
let columns = record.map((column) => {
return column.value || record.text || "";
});
columns.push("\n"); //add new line
return columns;
});
//add headers
let headers = response.columns.map((column) => column.label || column.name);
headers.push("\n");
records.unshift(headers);
let blob = new Blob(records, { type: "text/csv" });
// Creating an object for downloading url
const url = window.URL.createObjectURL(blob);
// Creating an anchor(a) tag of HTML
const a = document.createElement("a");
// Passing the blob downloading url
a.setAttribute("href", url);
// Setting the anchor tag attribute for downloading
// and passing the download file name
a.setAttribute("download", `${this.title}.csv`);
// Performing a download with click
a.click();
});
}
});
});Breaking Down this Use of Blob in SuiteCommerce
- In the example above, a function was added to a view that triggers when a download button is clicked (line 8 ).
- The function then calls a service file to fetch some data.
- The returned data is then converted into an Array that can be used to generate a “Blob”.
- An a tag element containing the bob is then created and “clicked” (line 59).
- This will cause the Blob content to be downloaded, in this case as a CSV file.
Author: Sam Gagliardi
Got stuck on a step in this article?
We like to update our blogs and articles to make sure they help resolve any troubleshooting difficulties you are having. Sometimes, there is a related feature to enable or a field to fill out that we miss during the instructions. If this article didn't resolve the issue, please use the chat and let us know so that we can update this article!
FREE SuiteCommerce Book
If you liked this article, you'll LOVE our book on SuiteCommerce! Order the free SuiteCommerce book today, and we'll even pay for shipping!
Oracle NetSuite Alliance Partner & Commerce Partner
If you have general questions about SuiteCommerce or more specific questions about how our team can support your business as you implement NetSuite or SuiteCommerce, feel free to contact us anytime. Anchor Group is a certified Oracle NetSuite Alliance Partner and Commerce Partner equipped to handle all kinds of NetSuite and SuiteCommerce projects, large or small!
We are a premium SuiteCommerce agency that creates powerful customer portals. Unlike our competitors, we have already solved your problems.