Generating and saving a PDF file using a binary string in JavaScript or TypeScript

Question

Generating and saving a PDF file using a binary string in JavaScript or TypeScript

A server response to an Axios request contains the content of a PDF as a binary string.

export const fetchPDFfile = async (id: string): Promise<string> => {
  const { data } = await http.get<string>(`${baseUrl}/${id}.pdf`);
  return data;
};

When viewed in Chrome devtools or logged in the console, the data appears as follows:

%PDF-1.4
%âãÏÓ
2 0 obj <</ColorSpa ......
..........
startxref
10991
%%EOF

Is defining string as the expected type of response body from Axios correct, or should it be (cast to) Blob?

Now, I aim to download this as a PDF file on the client-side. Despite numerous attempts and unanswered questions, I have not been successful.

My current approach (in a React component) involves:

    const data = await fetchPDFfile(props.id);
    const blob = new Blob([data], { type: 'application/pdf' });
    const href = window.URL.createObjectURL(blob);
    const theLink = document.createElement('a');
    theLink.href = href;
    theLink.download = props.id + '.pdf';
    document.body.appendChild(theLink);
    theLink.click();
    document.body.removeChild(theLink);

Downloading this results in a PDF file with 3 blank pages. The original document should be 3 pages long, but the pages are empty.

const href = window.URL.createObjectURL(data); // instead of blob

throws an error.

What is the correct way to convert and download this PDF file? Generally, is the above process necessary, or should I directly download it from the server (similar to what cordova-plugin-file-transfer does)?

javascript typescript cross-browser axios binary-data

Answer 1

Answer №1

Situation

If you wish for the file to be downloaded upon the user clicking the link.

Approach 1-

Simply insert the link within the <a> tag.

Drawback- In case of any errors, no error message can be displayed on the screen.

Thus, this leads to the alternative solution.

Approach 2-

Invoke the URL as an API to download the file upon receiving a success message. For this, I utilize File-server.js

**Remember to specify the {responseType: 'blob'}, while initiating the request

http.get<string>(`${baseUrl}/${id}.pdf`, {responseType: 'blob'})

as we do not desire a response with Content-Type: application/json

illustrative code:

import FileSaver from 'file-saver';

downloadPdf() {
    var blob = new Blob([data], {type: "application/pdf"});
    FileSaver.saveAs(blob, "filename");
}

Answer 2

Situation

If you wish for the file to be downloaded upon the user clicking the link.

Approach 1-

Simply insert the link within the <a> tag.

Drawback- In case of any errors, no error message can be displayed on the screen.

Thus, this leads to the alternative solution.

Approach 2-

Invoke the URL as an API to download the file upon receiving a success message. For this, I utilize File-server.js

**Remember to specify the {responseType: 'blob'}, while initiating the request

http.get<string>(`${baseUrl}/${id}.pdf`, {responseType: 'blob'})

as we do not desire a response with Content-Type: application/json

illustrative code:

import FileSaver from 'file-saver';

downloadPdf() {
    var blob = new Blob([data], {type: "application/pdf"});
    FileSaver.saveAs(blob, "filename");
}

Answer 3

Answer №2

To begin, utilize Blob as the generic argument for Promise.

Let's use the fetch API for easy testing.

fetch('https://www.jianjunchen.com/papers/CORS-USESEC18.slides.pdf').then(x => x.blob()).then(b => console.log(b.type))

This should output "application/pdf" if the file is indeed a PDF.

Converting non-PDF blobs to a PDF type can break the data. Similarly, converting a true string to a PDF Blob could result in an invalid PDF file.

To verify if b is indeed a blob, simply use console.log(b instanceof Blob) which should return true. If you have already received a blob, there is no need to create a new one using new Blob([data]).

The following example functions correctly:

fetch('https://www.jianjunchen.com/papers/CORS-USESEC18.slides.pdf').then(x => x.blob()).then(b => {
  const url = window.URL.createObjectURL(b);
  var a = document.createElement("a");
  document.body.appendChild(a);
  a.style = "display: none";
  a.href = url;
  a.download = "a.pdf";
  a.click();
  window.URL.revokeObjectURL(url);
})

Apologies for the formatting issues in the code, it was challenging to paste it correctly.

Answer 4

To begin, utilize Blob as the generic argument for Promise.

Let's use the fetch API for easy testing.

fetch('https://www.jianjunchen.com/papers/CORS-USESEC18.slides.pdf').then(x => x.blob()).then(b => console.log(b.type))

This should output "application/pdf" if the file is indeed a PDF.

Converting non-PDF blobs to a PDF type can break the data. Similarly, converting a true string to a PDF Blob could result in an invalid PDF file.

To verify if b is indeed a blob, simply use console.log(b instanceof Blob) which should return true. If you have already received a blob, there is no need to create a new one using new Blob([data]).

The following example functions correctly:

fetch('https://www.jianjunchen.com/papers/CORS-USESEC18.slides.pdf').then(x => x.blob()).then(b => {
  const url = window.URL.createObjectURL(b);
  var a = document.createElement("a");
  document.body.appendChild(a);
  a.style = "display: none";
  a.href = url;
  a.download = "a.pdf";
  a.click();
  window.URL.revokeObjectURL(url);
})

Apologies for the formatting issues in the code, it was challenging to paste it correctly.

Answer 5

Answer №3

When using NestJS framework

Within the service:

async download() {
        try {
            const url = `https://example.com`;
            
            const headers = {
              Authorization: `Bearer ${this.accessToken}`,
              'Content-Type': 'application/pdf'
            };
            const response: AxiosResponse<any> = await this.httpService.get(url, { headers, responseType: 'arraybuffer' }).toPromise();
      
            return response.data;
        } catch (error) {
            throw new Error('Unable to download '+ error);
        }
    }

Inside the Controller:

@Get('download')
    async download(@Res() res) {
        const data = await this.appService.download();

        res.setHeader('Content-disposition', 'attachment; filename="file.pdf"');
        res.setHeader('Content-type', 'application/pdf');

        res.send(data);
    }

Answer 6

When using NestJS framework

Within the service:

async download() {
        try {
            const url = `https://example.com`;
            
            const headers = {
              Authorization: `Bearer ${this.accessToken}`,
              'Content-Type': 'application/pdf'
            };
            const response: AxiosResponse<any> = await this.httpService.get(url, { headers, responseType: 'arraybuffer' }).toPromise();
      
            return response.data;
        } catch (error) {
            throw new Error('Unable to download '+ error);
        }
    }

Inside the Controller:

@Get('download')
    async download(@Res() res) {
        const data = await this.appService.download();

        res.setHeader('Content-disposition', 'attachment; filename="file.pdf"');
        res.setHeader('Content-type', 'application/pdf');

        res.send(data);
    }

Generating and saving a PDF file using a binary string in JavaScript or TypeScript

Answer №1

Answer №2

Answer №3

Similar questions

Effectively accessing the Templater object within a user script for an Obsidian QuickAdd plugin

In the past, my code would run smoothly without any issues, but now I am encountering a runtime error even though the code comp

`Adding data to Rails database and displaying without the need for reloading using AngularJS`

Trouble with styling the Ngx-org-chart in Angular

Angular is not programmed to automatically reflect updates made to my string array

Retrieve the total count of tables within a specific div element

Using Node.js to display the outcome of an SQL query

Triggering this function when clicked

Issue with React filter function where data is not being displayed when search query is left

Several DIVs with the same class can have varying CSS values

What is the best way to retrieve an element that has been altered in its state?

Error: Provider not recognized

Angular virtual scrolling not populating the list with data

`Weaving mesh into place with three.js`

Guide to inheriting functions from a parent component in Angular 2

Tips for adding two values simultaneously to an array in JavaScript

What is the best way to store and present data dynamically in D3.js?

Is there a way to prevent a 'keyup' event from being triggered by a 'keydown' event?

Error: Module not found - Imported Node Module

HTML5 enables users to pick their preferred font style