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

I couldn't identify the Material import within the child modules of Angular 2

Developing a custom function that analyzes two distinct arrays and sends any corresponding pairs to a component

Building a single-page app optimized for mobile viewing with Foundation framework

Guide on altering the background color of a table row depending on the data in its cells with the help of AngularJS

Ways to utilize a field from an interface as a type of index

Exploring the differences between an XMLHTTP request and a string and establishing a callback mechanism

Tips for adding styling to HTML in Vue by entering CSS code into the CodeMirror editor

Submit button in React form not activating the onSubmit method

Filtering out Objection/Knex query results based on withGraphFetched results

Is there a way to update the href attribute within the script section in vue.js?

The ngx-translate library could not be located within Ionic Framework 6

Manually assigning a value to a model in Angular for data-binding

Issue encountered while serializing the `.product` object retrieved from the `getStaticProps` function in NextJS, in conjunction with

The AngularJS component materializes almost instantaneously

Need to import Vue component TWICE

Executing the AngularJS nested controller only once

Fetching data from a Django view using a JavaScript AJAX POST call

Ways to access subscription value in Angular without relying on async await

Vuejs tutorial: Toggle a collapsible menu based on the active tab status

The implementation of combineSlices in reduxjs/[email protected] is an essential feature for managing