Question:

How to Open a file on the browser that is received as a Readable Stream?

Problem

I'm building an API on Node.js that receives some parameters and the server generates a PDF file with said parameters and I want the browser to open the generated file.

The file is generated successfully but I don't know how to open the file on the browser that is received as a ReadableStream object.

It's my first time working with ReadableStream so I don't know what the best way to handle this is.

My app.js

const express = require('express');

const fs = require('fs');

const app = express()

app.use(express.json())

const port = process.env.PORT || 8080;

app.listen(port, () => console.log(`Listening on port ${port}...`));

//import the function to generate the PDF file

const pdf = require('./pdf');

app.post("/pdf", async (req, res) => {

const parameterData = req.body

await pdf(parameterData);

//We create the ReadableStream from the generated file

var data = fs.createReadStream('./test/output.pdf');

var stat = fs.statSync('./test/output.pdf');

res.setHeader('Content-Length', stat.size);

res.setHeader('Content-Type', 'application/pdf');

res.setHeader('Content-Disposition', 'attachment; filename=output.pdf');

data.pipe(res);

})

app.get("/", (req, res) => {

res.sendFile(__dirname + '/index.html');

})

My index.html file

<!DOCTYPE html>

<head>

</head>

<body>

</body>

const paramData = {

//object that contains the parameters

}

document.querySelector('button')

.addEventListener('click', (e) => {

fetch('/pdf', {

method: 'POST',

headers: {

'Content-Type': 'application/json',

body: JSON.stringify(paramData)

})

.then((res) => {

console.log(res.body)

//This is where I would want to create the logic to open the file on the browser

})

});

</script>

I can confirm on my browser that the ReadableStream object is received on the Network tab when opening the DevTools and checking the Response

Solution

You could use Blob - this should get the result you want.

.then((res) => {

return res.blob();

})

.then((blob) => {

const blobData = URL.createObjectURL(blob);

window.open(blobData, '_blank');

})

Answered by: >MacHatter1

Credit: >StackOverflow

Blog Links:

>How do I customize controller actions in Laravel Jetstream?

>Run Laravel Project to Active Local Server

>How to show encrypted user id in URL in Laravel?

>How to fix Laravel LiveWire listener?

Node Js

Nisha Patel

Your Answer

Submit

Nisha Patel

0 Answers

Top Questions

Nisha Patel

0 Answers

Top Questions

Related Questions