What are the steps to transform a blob into an xlsx or csv file?

Question

What are the steps to transform a blob into an xlsx or csv file?

An interesting feature of the application is the ability to download files in various formats such as xlsx, csv, and dat. To implement this, I have utilized a library called fileSaver.js.

While everything works smoothly for the dat/csv format, there seems to be an issue with the xlsx files being corrupted.

To troubleshoot this problem, I experimented with different conversion formats including:

utf8
base64
binary

Here's a snippet of how I implemented this:

// /* SERVER */ //
// Read data from file
fs.readFile(filePath, (err, data) {...})

// The API responds with the important parts "filename" & "data"
{"status":"ok","context":"writing the intermediate file","target":"/temp/","fileName":"name.xlsx","data":{"type":"Buffer","data":[72,82,65,67,67,69,83,83,32,10]}}

// /* CLIENT */ //
let json = JSON.stringify(data)
let buffer = Buffer.from(JSON.parse(json).data)
let read = buffer.toString('utf8')
let blob = new Blob([read])
FileSaver.saveAs(blob, fileName)

javascript csv dataset blob xlsx

Answer 1

Answer №1

For those delving into this topic, here is my solution:

(Note that a more efficient solution for downloading a file would be to send the file in the API response with the header 'Content-disposition' or utilize Express for this purpose like this)

The backend (Node) operates as follows:

 fs.readFile(filePath, (err, data) => {
    if (err) {
      console.log(`-------- whoops error - read --------`)
      console.log(err)
      res.send({ status: `error`, context: `read the source file`, id: err.errno, code: err.code, message: err.message.replace(/\\/g, '/') })
    } else {
      res.send({ status: `ok`, context: `send data file`, target: target, fileName: fileName, data: data })
    } 
  })

Details:

target represents the path for the front end including the file name and extension (/path/name.ext)
fileName simply contains the name and extension (name.ext)

data is the information sent by readFile (

{"type":"Buffer","data":[72,82,65,67,67,69,83,83,32,10]}

)

The frontend (React) functions like this:

fetch(targetUrl)
    .then(res => res.json())
    .then(res => {
      if (res.status !== `ok`) {
        this.setState({
          errorDlFile: true,
          errorDlFile_context: res.context,
          errorDlFile_id: res.id,
          errorDlFile_code: res.code,
          errorDlFile_message: res.message
        })
      } else {  
        const target = res.target
        const fileName = res.fileName
        const data = res.data
        const splitName = res.fileName.split('.')
        const format = splitName[splitName.length-1]

        // file saver blob solution
        let json = JSON.stringify(data)
        let buffer = Buffer.from(JSON.parse(json).data)
        let readUTF8 = buffer.toString('utf8')
        let blob = ''

        if (format === 'xlsx') {
          blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
        } else if (format === 'csv') {
          blob = new Blob([readUTF8], { type: 'application/vnd.ms-excel' })
        } else {
          blob = new Blob([readUTF8])
        }

        FileSaver.saveAs(blob, fileName)

      }
    })

Answer 2

For those delving into this topic, here is my solution:

(Note that a more efficient solution for downloading a file would be to send the file in the API response with the header 'Content-disposition' or utilize Express for this purpose like this)

The backend (Node) operates as follows:

 fs.readFile(filePath, (err, data) => {
    if (err) {
      console.log(`-------- whoops error - read --------`)
      console.log(err)
      res.send({ status: `error`, context: `read the source file`, id: err.errno, code: err.code, message: err.message.replace(/\\/g, '/') })
    } else {
      res.send({ status: `ok`, context: `send data file`, target: target, fileName: fileName, data: data })
    } 
  })

Details:

target represents the path for the front end including the file name and extension (/path/name.ext)
fileName simply contains the name and extension (name.ext)

data is the information sent by readFile (

{"type":"Buffer","data":[72,82,65,67,67,69,83,83,32,10]}

)

The frontend (React) functions like this:

fetch(targetUrl)
    .then(res => res.json())
    .then(res => {
      if (res.status !== `ok`) {
        this.setState({
          errorDlFile: true,
          errorDlFile_context: res.context,
          errorDlFile_id: res.id,
          errorDlFile_code: res.code,
          errorDlFile_message: res.message
        })
      } else {  
        const target = res.target
        const fileName = res.fileName
        const data = res.data
        const splitName = res.fileName.split('.')
        const format = splitName[splitName.length-1]

        // file saver blob solution
        let json = JSON.stringify(data)
        let buffer = Buffer.from(JSON.parse(json).data)
        let readUTF8 = buffer.toString('utf8')
        let blob = ''

        if (format === 'xlsx') {
          blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
        } else if (format === 'csv') {
          blob = new Blob([readUTF8], { type: 'application/vnd.ms-excel' })
        } else {
          blob = new Blob([readUTF8])
        }

        FileSaver.saveAs(blob, fileName)

      }
    })

Answer 3

Answer №2

@Hadock To download a file with a .csv extension, you must specify the type of file like this:

let blob = new Blob([csv], { type: 'application/vnd.ms-excel' });

instead of

let blob = new Blob([read])

And remember to include the filename with the extension (test.csv). I have also used a different plugin for excel files called exceljs. You can see a demo of it here: demo.

Answer 4

@Hadock To download a file with a .csv extension, you must specify the type of file like this:

let blob = new Blob([csv], { type: 'application/vnd.ms-excel' });

instead of

let blob = new Blob([read])

And remember to include the filename with the extension (test.csv). I have also used a different plugin for excel files called exceljs. You can see a demo of it here: demo.

Answer 5

Answer №3

To convert JSON data to an Excel (.xlsx) file, you cannot directly save it in that format. However, you can achieve this by using a library such as 'sheetjs' ().

var sheet_name = filename;//"SheetJS";
var workbook = new Workbook(), worksheet = sheet_from_array_of_arrays(data);
/* add the worksheet to the workbook */
workbook.SheetNames.push(sheet_name);
workbook.Sheets[sheet_name] = worksheet;
var workbook_output = XLSX.write(workbook, { bookType: 'xlsx', bookSST: true, type: 'binary' });
saveAs(new Blob([s2ab(workbook_output)], { type: "application/octet-stream" }), filename + ".xlsx")

Answer 6

To convert JSON data to an Excel (.xlsx) file, you cannot directly save it in that format. However, you can achieve this by using a library such as 'sheetjs' ().

var sheet_name = filename;//"SheetJS";
var workbook = new Workbook(), worksheet = sheet_from_array_of_arrays(data);
/* add the worksheet to the workbook */
workbook.SheetNames.push(sheet_name);
workbook.Sheets[sheet_name] = worksheet;
var workbook_output = XLSX.write(workbook, { bookType: 'xlsx', bookSST: true, type: 'binary' });
saveAs(new Blob([s2ab(workbook_output)], { type: "application/octet-stream" }), filename + ".xlsx")

What are the steps to transform a blob into an xlsx or csv file?

Answer №1

The backend (Node) operates as follows:

The frontend (React) functions like this:

Answer №2

Answer №3

Similar questions

Identifying when a fetch operation has completed in vue.js can be accomplished by utilizing promises

Creating an Add-in using the Excel JavaScript API based on an already existing spreadsheet

What is the best way to divide an array while extracting data from a JSON object using

I am trying to include the Css Baseline from @mui/material in my project. However, even though it is present in my JSON file, I am encountering an error stating that '@mui/material' needs to be included in the project

The React component does not trigger a re-render

Locating specific text within an <li> element using the provided value

Check the document's location if the page contains a class with a specific value

Turn off error notifications from eslint parsing

What is the best way to enable horizontal scrolling for textarea overflow in a smooth manner like input, without any sudden jumps?

Is there a way to access and parse a CSV file from a URL within a Next.js project?

When velocity exceeds a certain threshold, collision detection may become unreliable

Detecting Unflushed Requests in Jasmine and AngularJS

Tips for integrating the C++ icon into a ReactJs project

Using AngularJS forEach to assign properties to objects within a found set in ng-repeat

Update D3 data, calculate the quantity of rows in an HTML table, and add animations to SVGs in the final

JavaScript's asynchronous callbacks

Exploring the power of Vue.js with dynamic HTML elements and utilizing Vue directives within Sweet Alert

What is the best way to display the value of a new object's property in Angular?

What can be done to stop the event handler from executing?

Is it possible to trigger JavaScript after loading a page in jqTouch with AJAX?