Following the recommendation from @Sandip Nirmal, I decided to utilize the downloadjs library and found it to be quite effective! I did have to tweak some parts of my code, but in the end, everything worked smoothly.

Here is my updated code:

// npm i downloadjs
import download from 'downloadjs'

// method
downloadFile(file) {
    const specificationId = this.$route.params.specificationId;

    axios
        .get(`${this.$API_URL}/api/v1/suppliersmanagement/product-specifications/${specificationId}/fileupload/${file.id}/download`, {
            headers: this.headers,
            responseType: 'blob', // had to add this one here
        })
        .then(response => {
           const content = response.headers['content-type'];
           download(response.data, file.file_name, content)
        })
        .catch(error => console.log(error));
},

To handle binary data in your axios request, utilize the 'responseType' option like this:

axios.get(
  url, 
  {responseType: 'blob'} // This is important!
).then((response) => {
  window.open(URL.createObjectURL(response.data));
})

There are two ways to go about this task. If you're working with a Node.js backend, you can easily accomplish it using the res.download method of express. Check out this answer for more details: Download a file from NodeJS Server using Express.

However, if you prefer handling it from the client side, there are limited options since direct file downloads using axios, XHR, or fetch is not possible. You can utilize download.js or write your own code as shown below.

return axios({
    url: '/download', // download url
    method: 'get',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
      mode: 'no-cors'
    }
  })
    .then(response => response.blob())
    .then(blob => {
      var url = window.URL.createObjectURL(blob)
      var a = document.createElement('a')
      a.href = url
      a.download = fileName
      a.click()
      a.remove()
      setTimeout(() => window.URL.revokeObjectURL(url), 100)
    })

Since the server response is in json format, you'll need to convert it into an ObjectURL and assign it to the anchor tag.

If you explore the code within download.js, you'll notice a similar implementation.

Discover a new approach for 2022: leveraging node.js, fs.promises, and the power of async/await

Incorporate the use of responseType: 'stream' as recommended in the Axios documentation.

import axios from 'axios';
import { writeFile } from 'fs/promises';

const downloadFile = async () => {
  const response = await axios.get('https://someurl', {
    params: {
      // ...
    },
    // Make sure to set responseType to 'stream' as outlined in the docs
    responseType: 'stream',
  });
  const pdfContents = response.data;
  await writeFile('file.pdf', pdfContents);
};

function generatePDFLink(id, name) {
    fetchPdf(`https://api.example.com/pdf/invoice/${id}`, name);
}

const fetchPdf = async (url, fileName) => {
    try {
        const response = await fetch(url, {
            method: 'GET',
            headers: {
                'Authorization': 'Bearer ' + localStorage.getItem('token'),
                'Content-Type': 'application/json'
            }
        });
        
        if (!response.ok) {
            throw new Error('Failed to download PDF');
        }

        const blob = await response.blob();
        const urlObject = URL.createObjectURL(blob);

        const a = document.createElement('a');
        a.href = urlObject;
        a.download = `${fileName}.pdf`;
        document.body.appendChild(a);
        a.click();
        a.remove();
    } catch (error) {
        console.error(error);
    }
}

Follow this method to achieve the desired outcome

saveFileToDownload(fileName) {
  fetch(url , { headers })
  .then(response => response.blob())
  .then(blobData => URL.createObjectURL(blobData))
  .then(fileUrl => {
    var newLink = document.createElement("a");
    newLink.href = fileUrl;
    newLink.download = fileName + ".csv";
    document.body.appendChild(newLink);
    newLink.click();
    document.body.removeChild(newLink);
  });
}

In this code snippet, I am demonstrating how to download a CSV file by appending .csv extension to the filename.

I faced a similar issue, but I managed to resolve it successfully.

Here's how I downloaded the PDF using NodeJs and Axios:

 const url = `https://www.buds.com.ua/images/Lorem_ipsum.pdf`;
 return await axios.get(url, { responseType: 'stream' });

If you need to pass on the .pdf content through your own API, you'll need to send it as a data stream. Here's how you can implement this:

response.data.pipe(res);

Therefore, the complete code for your API would look like this:

async function forwardPDF(req, res) {
  try {
    // Fetch the PDF from the URL
    const url = `https://www.buds.com.ua/images/Lorem_ipsum.pdf`;
    const response = await axios.get(url, { responseType: 'stream' });

    // Pipe the PDF to the response
    response.data.pipe(res);

  } catch (error) {
    const header = Header(true, error.statusCode, error.message, error.stack);
    res.send(Response(header, {}));
  }
}