How to Serve CSV files?

Bootstrap Studio Help
1

I’d like to add a downloads feature on my bootstrap studio site for my users to be able to download a CSV file. I’ve tried to add a .csv to the project but it doesn’t accept it and thus I can’t publish one either. Is this supported or do I have to host it elsewhere and simply link to it?

2

You need to host it externally, and then link to it. The program doesn’t support that file type.

3

You can host it on the same server (and even in the same directory) as your BSS files, but you’ll have to get it there by other means (eg, ftps).

2 Likes
4

If you’re hosting it on the hosting Bootstrap Studio offers, you’ll need to put it on some kind of external file service as the easiest method.

If you are exporting your site, and have your own hosting then either using FTP, or a web control panel like cPanel, upload the CSV file to a folder inside your public web folder.

You can then access this by linking to it, similar to website.com/folder/name_of_file.csv

I hope this helps.

1 Like
5

Yes, I’m hosting on bootstrap site hosting. Bummer that it’s not supported but I now understand what I need to do. Thanks.

7

Very interesting. Where does the downloadTableAsCsv come from? Unfortunately I don’t want to display all of the tables and their data though as there are multiple (~20). It’s a solid solution though. Maybe I can encode the data in JS and run that from the site. I just wish I could drop the file though!

9

Nice. How are the CSV’s encoded? Can you please share the JS (not minified, etc.)?

10 
function e(e) {
const t = Object.keys(e[0]);
let n = ‘’;
return n += “”, t.forEach((e => n += <th>${e}</th>)), n += “”, n += “”, e.forEach((e => {
n += “”, t.forEach((t => n += <td>${e[t]}</td>)), n += “”
})), n += “”, n
}
document.getElementById(“downloadBtn”).addEventListener(“click”, (async () => {
const e = document.getElementById(“tableSelect”).value;
if (!e) return alert(“Please select a table first.”);
try {
const {
default: t
} = await import(./tables/${e}.mjs);
let n = “”,
r = e.replace(“.json”, “”).replace(“.csv”, “”) + “.csv”;
n = e.endsWith(“.json”) ? function(e) {
const t = Object.keys(e[0]),
n = [t.join(“,”)];
return e.forEach((e => {
const r = t.map((t => "${String(e[t]??"").replace(/"/g,'""')}"));
n.push(r.join(“,”))
})), n.join(“\n”)
}(t) : t;
const a = new Blob([n], {
type: “text/csv;charset=utf-8;”
}),
l = document.createElement(“a”);
l.href = URL.createObjectURL(a), l.download = r, l.click(), URL.revokeObjectURL(l.href)
} catch (e) {
console.error(e), alert(“Error loading table module.”)
}
})), document.getElementById(“previewBtn”).addEventListener(“click”, (async () => {
const t = document.getElementById(“tableSelect”).value;
if (!t) return alert(“Please select a table first.”);
try {
const {
default: n
} = await import(./tables/${t}.mjs);
let r = “”;
if (t.endsWith(“.json”)) r = e(n);
else {
r = e(function(e) {
const t = e.split(“\n”),
n = t[0].split(“,”);
return t.slice(1).map((e => {
const t = e.match(/(“.?“|[^”,]+)(?=\s,|\s*$)/g);
if (!t) return null;
const r = {};
return n.forEach(((e, n) => {
r[e] = t[n]?.replace(/^”|"$/g, “”) || “”
})), r
})).filter(Boolean)
}(n))
}
document.getElementById(“previewContainer”).innerHTML = r;
new bootstrap.Modal(document.getElementById(“previewModal”)).show()
} catch (e) {
console.error(e), alert(“Error loading table for preview.”)
}
}));