Getting pdf file from api response

Question

I am calling an api and getting pdf in return.

fetch(`api` + guid, {
   method: "GET",
   headers: {
    "Accept": "application/octet-stream",
    "Authorization": "Bearer " + token,
   },
   responseType: 'arraybuffer',
})
.then((res) => res.text())
.then((data) => {
    fs.writeFileSync('file.pdf', data);
});

I get the pdf file but the issue is the pdf file is always empty. But when I accept response as json, it works fine.

I found similar problems like this but none of the solution worked for me yet.

It would be great if someone can point out the issue.

Yogesh Bhattarai · Accepted Answer · 2022-04-10 21:55:28Z

15

I found the issue. As I am using fetch not Axios. We cannot pass responseType as Fetch's option.

fetch(`api` + guid, {
   method: "GET",
   headers: {
    "Accept": "application/octet-stream",
    "Authorization": "Bearer " + token,
   },
   // responseType: 'arraybuffer' //#1 remove this,
})

Instead the response in itself can be passed as arraybuffer as below.

.then((res) => res.arraybuffer())

instead of

.then((res) => res.text())

Now instead of directly using the response to write our pdf file. We can change the data to base64 string and decode it back again to create our pdf file. I used base64ToPdf npm package to handle that.

.then(data => {
  var base64Str = Buffer.from(data).toString('base64');
  base64.base64Decode(base64Str, "file.pdf");
})

I hope this help others. :)

edited Apr 10, 2022 at 21:55

answered Nov 18, 2020 at 8:42

Yogesh Bhattarai

3611 gold badge2 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Ali Rehman Over a year ago

what is base64?

Yogesh Bhattarai Over a year ago

It is a npm package link const base64 = require('base64topdf');

spazzola Over a year ago

@YogeshBhattarai I've just installed base64topdf package, while using base64.base64Decode I'm getting an error with info "fs.writeFileSync is not a function". Had you similar issue?

spazzola Over a year ago

I did't fix that issue, I've just found another example how to get pdf from response and everything works well.

Karan Kamdar Over a year ago

@spazzola could you please share the example that worked for you?

|

vishal srivastava · Accepted Answer · 2021-03-05 13:25:22Z

0

    Change res.arraybuffer() to  res.arrayBuffer()

Below is the working code with webdriverio-

  var headers = {
            Authorization: "Bearer " + accessToken,
            Accept: 'application/pdf'
        }
       
           fetch(
                apiurl,
                {
                    headers: {
                        Accept: "application/octet-stream",
                        Authorization: "Bearer " + accessToken
                    },
                },
            )
                .then((res) => {
                    if (!res.ok) {
                        return res.status.toString()
                    }
                    return res.arrayBuffer()
                })
                .then((data) => {
                    var base64Str = Buffer.from(data).toString('base64');
                    base64.base64Decode(base64Str, filename);
                })
                .catch(
                    (err) => {
                        return err.Message;
                    })

answered Mar 5, 2021 at 13:25

vishal srivastava

91 bronze badge

1 Comment

Ran Marciano Over a year ago

Please don't post only code as an answer, but also provide an explanation of what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes.

spazzola · Accepted Answer · 2021-11-04 13:38:08Z

Here's example which works for me:

async createPdf(context, data) {
    let url = new URL(baseURL + '/invoice/createPdf');
    url.search = new URLSearchParams({
        id: data
    })

    await fetch(url, {
        method: 'GET',
        headers: {
            'Authorization': "Bearer " + localStorage.getItem("jwt"),
            'Accept': 'application/octet-stream'
        },
    }).then((res) => res.arrayBuffer())
        .then(data => {
            var base64Str = Buffer.from(data).toString('base64');

            var binaryString = window.atob(base64Str);
            var binaryLen = binaryString.length;
            var bytes = new Uint8Array(binaryLen);
            for (var i = 0; i < binaryLen; i++) {
                var ascii = binaryString.charCodeAt(i);
                bytes[i] = ascii;
            }
            var arrBuffer = bytes;

            var newBlob = new Blob([arrBuffer], { type: "application/pdf" });

            if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                window.navigator.msSaveOrOpenBlob(newBlob);
                return;
            }

            data = window.URL.createObjectURL(newBlob);

            var link = document.createElement('a');
            document.body.appendChild(link);
            link.href = data;
            link.download = "Faktura.pdf";
            link.click();
            window.URL.revokeObjectURL(data);
            link.remove();
        })
}

Tyler2P · Accepted Answer · 2022-04-07 17:33:26Z

-2

In my case, the response is same as yours and I'm trying to convert it to a pdf file so that I can preview it on the UI.

For this, I need to fetch the URL already present in the response which is of type blob... to fetch the URL I did URL.createObjectURL(myblob)

const [url,seturl] = useState('');
response
  .then((resp) => resp.blob())
  .then((myBlob) => {
    seturl(URL.createObjectURL(myBlob)); //<-- use this for fetching url from your response
    console.log(myBlob);
  })
  .catch((err) => {
    console.log(err.message());
  });

edited Apr 7, 2022 at 17:33

Tyler2P

2,37030 gold badges26 silver badges34 bronze badges

answered Apr 7, 2022 at 11:29

Tushar Keshari

11 bronze badge

Collectives™ on Stack Overflow

Getting pdf file from api response

4 Answers 4

7 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related