Downloading PDF files on IOS while using Angular often results in the PDF opening in the same

Question

Downloading PDF files on IOS while using Angular often results in the PDF opening in the same

I'm currently utilizing file-saver within my Angular application to retrieve a PDF generated from the backend. The library functions smoothly on desktop and Android devices, but I'm encountering issues with downloading files on iOS. Contrary to what is mentioned on the GitHub page, file-saver does not open the blob in a new window; instead, it opens on the same page (which is undesired). Interestingly, it works seamlessly on Safari by prompting a download dialog without opening the file, but fails on other browsers like Opera, Firefox, and Chrome.

I've experimented with various alternatives such as file-saver, downloadJ, creating an anchor tag with the download attribute, utilizing the application/octet-stream mime-type, and exploring different solutions found online. Unfortunately, most of these methods either do nothing or result in the PDF displaying on the same page rather than initiating a download or opening in a new tab (as specified by file-saver for iOS).

As the PDF is being generated in a Google Cloud Function, I am wondering if there might be a way to bypass the client-side processes and have the browser directly download the file from there.

Is there any alternate approach to downloading PDFs on mobile iOS devices (such as implementing a service worker)?

Appreciate any input or suggestions in advance.

javascript angular typescript filesaver.js

Answer 1

Answer №1

Solution that adheres to the latest Chrome specifications can be found here

Utilizing Vanilla JavaScript

public static downloadFile(url: string): void {
     const xmlHttp = new XMLHttpRequest();
     xmlHttp.onreadystatechange = () => {
       if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
         const blobUrl = window.URL.createObjectURL(xmlHttp.response);
         const e = document.createElement('a');
         e.href = blobUrl;
         e.download = blobUrl.substr(blobUrl.lastIndexOf('/') + 1);
         document.body.appendChild(e);
         e.click();
         document.body.removeChild(e);
       }
     };
     xmlHttp.responseType = 'blob';
     xmlHttp.open('GET', url, true);
     xmlHttp.send(null);
   }

If you're working with Angular, consider this approach.

async downloadBrochure(url: string) {
    try {
      const res = await this.httpClient.get(url, { responseType: 'blob' }).toPromise();
      this.downloadFile(res);
    } catch (e) {
      console.log(e.body.message);
    }
  }

  downloadFile(data) {
    const url = window.URL.createObjectURL(data);
    const e = document.createElement('a');
    e.href = url;
    e.download = url.substr(url.lastIndexOf('/') + 1);
    document.body.appendChild(e);
    e.click();
    document.body.removeChild(e);
  }

Answer 2

Solution that adheres to the latest Chrome specifications can be found here

Utilizing Vanilla JavaScript

public static downloadFile(url: string): void {
     const xmlHttp = new XMLHttpRequest();
     xmlHttp.onreadystatechange = () => {
       if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
         const blobUrl = window.URL.createObjectURL(xmlHttp.response);
         const e = document.createElement('a');
         e.href = blobUrl;
         e.download = blobUrl.substr(blobUrl.lastIndexOf('/') + 1);
         document.body.appendChild(e);
         e.click();
         document.body.removeChild(e);
       }
     };
     xmlHttp.responseType = 'blob';
     xmlHttp.open('GET', url, true);
     xmlHttp.send(null);
   }

If you're working with Angular, consider this approach.

async downloadBrochure(url: string) {
    try {
      const res = await this.httpClient.get(url, { responseType: 'blob' }).toPromise();
      this.downloadFile(res);
    } catch (e) {
      console.log(e.body.message);
    }
  }

  downloadFile(data) {
    const url = window.URL.createObjectURL(data);
    const e = document.createElement('a');
    e.href = url;
    e.download = url.substr(url.lastIndexOf('/') + 1);
    document.body.appendChild(e);
    e.click();
    document.body.removeChild(e);
  }

Downloading PDF files on IOS while using Angular often results in the PDF opening in the same

Answer №1

Similar questions

Determine using Lodash whether there is an object in an array that matches the ID from a separate array

Trigger an endless loop upon window.onload event

Tips for loading and updating data simultaneously in VUEJS from a single input

What is the best way to iterate through an array within a class in Angular 2?

NextJS 13 causes tailwind to malfunction when route group is utilized

Error in GraphQL query: specified argument is mandatory, yet not supplied

Changing the font family for a single element in Next.js

The Cross-Origin Resource Sharing request using the PUT method has been denied due to restrictions set by the

performing an AJAX request to the controller method in a Rails application

Node.js process.exec() function allows you to asynchronously spawn a subprocess

Substitute dynamic Angular expressions with fixed values within a string

Updating the positions of Mesh objects in Three.js asynchronously

What is the process for destructuring an interface in TypeScript?

Modify the class of the dropdown and heading 2 elements if they meet specific conditions using Animate.css

Ways to extract only numbers from a string

Sharing Pictures and Messages using angular, express, and multer

When attempting to load a page in Mozilla, the initial DIV code fails to load

Managing environment variables in server-side rendering using Angular Universal

Oops! Next.js Scripts encountered an error: Module '../../webpack-runtime.js' cannot be located

Devising a method to display configurable products as related items along with their customizable options in Magento