25:["$","title",null,{"children":"Download data button | Franz Zieher's Workspace | Observable"}] 49:T47f,{ const div = DOM.element('div'); const csvBtn = await button(data, 'fips.csv'); const jsonBtn = await button(data, 'fips.json'); const xlsxBtn = await button(data, 'fips.xlsx'); const csvText = md`# Download data button The button function takes two positional arguments: 1. **Required** - An array of the data to download as a CSV or a JSON file 2. The name of the file to be downloaded, defaults to data.csv For example, this code will create the following button

button(data, 'fips.csv')

`; const jsonText = md`And if you use a filename that ends in .json, then the button will download a JSON document instead of a CSV.

button(data, 'fips.json')

`; const xlsxText = md`And if you use a filename that ends in .xlsx, then the button will download a xlsx document instead of a CSV.

button(data, 'fips.xlsx')

`; div.appendChild(csvText); div.appendChild(csvBtn); div.appendChild(jsonText); div.appendChild(jsonBtn); div.appendChild(xlsxText); div.appendChild(xlsxBtn); return div; }4a:Tf88,data = [ { fips: "01", abbreviation: "AL", name: "Alabama" }, { fips: "02", abbreviation: "AK", name: "Alaska" }, { fips: "03", abbreviation: "AS", name: "American Samoa" }, { fips: "04", abbreviation: "AZ", name: "Arizona" }, { fips: "05", abbreviation: "AR", name: "Arkansas" }, { fips: "06", abbreviation: "CA", name: "California" }, { fips: "07", abbreviation: "CZ", name: "Canal Zone" }, { fips: "08", abbreviation: "CO", name: "Colorado" }, { fips: "09", abbreviation: "CT", name: "Connecticut" }, { fips: "10", abbreviation: "DE", name: "Delaware" }, { fips: "11", abbreviation: "DC", name: "District Of Columbia" }, { fips: "12", abbreviation: "FL", name: "Florida" }, { fips: "13", abbreviation: "GA", name: "Georgia" }, { fips: "14", abbreviation: "GU", name: "Guam" }, { fips: "15", abbreviation: "HI", name: "Hawaii" }, { fips: "16", abbreviation: "ID", name: "Idaho" }, { fips: "17", abbreviation: "IL", name: "Illinois" }, { fips: "18", abbreviation: "IN", name: "Indiana" }, { fips: "19", abbreviation: "IA", name: "Iowa" }, { fips: "20", abbreviation: "KS", name: "Kansas" }, { fips: "21", abbreviation: "KY", name: "Kentucky" }, { fips: "22", abbreviation: "LA", name: "Louisiana" }, { fips: "23", abbreviation: "ME", name: "Maine" }, { fips: "24", abbreviation: "MD", name: "Maryland" }, { fips: "25", abbreviation: "MA", name: "Massachusetts" }, { fips: "26", abbreviation: "MI", name: "Michigan" }, { fips: "27", abbreviation: "MN", name: "Minnesota" }, { fips: "28", abbreviation: "MS", name: "Mississippi" }, { fips: "29", abbreviation: "MO", name: "Missouri" }, { fips: "30", abbreviation: "MT", name: "Montana" }, { fips: "31", abbreviation: "NE", name: "Nebraska" }, { fips: "32", abbreviation: "NV", name: "Nevada" }, { fips: "33", abbreviation: "NH", name: "New Hampshire" }, { fips: "34", abbreviation: "NJ", name: "New Jersey" }, { fips: "35", abbreviation: "NM", name: "New Mexico" }, { fips: "36", abbreviation: "NY", name: "New York" }, { fips: "37", abbreviation: "NC", name: "North Carolina" }, { fips: "38", abbreviation: "ND", name: "North Dakota" }, { fips: "39", abbreviation: "OH", name: "Ohio" }, { fips: "40", abbreviation: "OK", name: "Oklahoma" }, { fips: "41", abbreviation: "OR", name: "Oregon" }, { fips: "42", abbreviation: "PA", name: "Pennsylvania" }, { fips: "43", abbreviation: "PR", name: "Puerto Rico" }, { fips: "44", abbreviation: "RI", name: "Rhode Island" }, { fips: "45", abbreviation: "SC", name: "South Carolina" }, { fips: "46", abbreviation: "SD", name: "South Dakota" }, { fips: "47", abbreviation: "TN", name: "Tennessee" }, { fips: "48", abbreviation: "TX", name: "Texas" }, { fips: "49", abbreviation: "UT", name: "Utah" }, { fips: "50", abbreviation: "VT", name: "Vermont" }, { fips: "51", abbreviation: "VA", name: "Virginia" }, { fips: "52", abbreviation: "VI", name: "Virgin Islands" }, { fips: "53", abbreviation: "WA", name: "Washington" }, { fips: "54", abbreviation: "WV", name: "West Virginia" }, { fips: "55", abbreviation: "WI", name: "Wisconsin" }, { fips: "56", abbreviation: "WY", name: "Wyoming" } ]4b:[] 29:{"id":"a8d89cc0b52aeaa2","slug":null,"title":"Download data button","thumbnail":"7d5a31b5b0fa5589f73b22523e2833bf3b245fb660d478b60f8de27301aebe1b","access_level":"public","create_time":"$D2025-01-26T10:16:14.870Z","update_time":"$D2025-01-26T11:17:24.001Z","view_time":null,"first_public_time":"$D2025-01-27T22:18:06.696Z","has_unpublished_edits":null,"fork":{"id":"bedb50933413e557","slug":"download-data-button","title":"Download data button","owner":{"id":"53ab69aac59784dd","login":"jeremiak","name":"Jeremia Kimelman"}},"stars":0,"starred":false,"owner":{"type":"team","id":"465c6b9a04f212be","login":"franz-zieher-ws","name":"Franz Zieher's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/f5fe24eca5059ce7711ad5e4490553cf1e5496a5ba4ed380ac8489468dd8fc5b","tier":"starter_2024","bio":"","following":false},"version":83,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b03c4bc5b42f95ed","login":"franz-zieher","name":"Franz Zieher","avatar_url":"https://avatars-next.observableusercontent.com/f39788147d6bf39e265a874be5ff68b23ba06db1661abdf3294330507f9f5790","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"b03c4bc5b42f95ed","login":"franz-zieher","name":"Franz Zieher","avatar_url":"https://avatars-next.observableusercontent.com/f39788147d6bf39e265a874be5ff68b23ba06db1661abdf3294330507f9f5790","tier":null,"role":"editor"},{"type":"team","id":"465c6b9a04f212be","login":"franz-zieher-ws","name":"Franz Zieher's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/f5fe24eca5059ce7711ad5e4490553cf1e5496a5ba4ed380ac8489468dd8fc5b","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Download data button","cells":[{"id":0,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"button = async (data, filename = 'data.csv') => {\n if (!data) throw new Error('Array of data required as first argument');\n\n let downloadData;\n if (filename.includes('.csv')) {\n downloadData = new Blob([d3.csvFormat(data)], { type: \"text/csv\" });\n } else if ( filename.includes('.xlsx') ) {\n downloadData = new Blob([await createExcelBuffer(data)], { \n type: \"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\"\n });\n } else {\n downloadData = new Blob([JSON.stringify(data, null, 2)], {\n type: \"application/json\"\n });\n } \n\n console.log(downloadData);\n const size = (downloadData.size / 1024).toFixed(0);\n const button = DOM.download(\n downloadData,\n filename,\n `Download ${filename} (~${size} KB)`\n );\n return button;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"ExcelJS = require(\"exceljs\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"async function createExcelBuffer(data) {\n // Create a new workbook\n const workbook = new ExcelJS.Workbook();\n\n // Add a worksheet\n const worksheet = workbook.addWorksheet('Sheet 1');\n\n // Get keys from the first object to use as headers\n const headers = Object.keys(data[0]);\n\n // Add headers to the worksheet\n worksheet.columns = headers.map(header => ({\n header,\n key: header,\n width: 20 // Adjust the width as needed\n }));\n\n // Add rows to the worksheet\n data.forEach(item => {\n worksheet.addRow(item);\n });\n\n // Generate the Excel file as a buffer\n const buffer = await workbook.xlsx.writeBuffer();\n return buffer;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 24:null