Click on the button to generate a PDF report using Internet Explorer 11

After encountering some challenges with printing a PDF report specifically on IE 11, I am reaching out for help. The code snippet below works perfectly in Chrome, but when it comes to IE 11, everything falls apart. Just to provide some context, I am developing an Angular 5 reporting application where users can view, download, and print reports. I have been successful in implementing all the functionalities except for printing on IE 11!

      const iframe = document.createElement('iframe');
      iframe.style.display = 'none';
      iframe.src = window.URL.createObjectURL(new Blob([result], { type: 'application/pdf' }));
      document.body.appendChild(iframe);
      iframe.contentWindow.print();

I would greatly appreciate any advice or input on this issue.

angulartypescriptinternet-explorer-11

Answer №1

I found a clever workaround to successfully print on IE, and it worked like a charm.

  const iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  iframe.src = window.URL.createObjectURL(new Blob([result], { type: 'application/pdf' }));
  document.body.appendChild(iframe);
  iframe.load = () => {
  setTimeout(() => {
  iframe.focus();
  iframe.contentWindow.print();
   }); 
  };

This clever trick made printing function smoothly even on the latest IE version.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporate a dropdown selection option into a clickable Angular 6 table row using Bootstrap 4 styling

I am currently updating a financial account book that displays all available accounts in a table format. Each row provides essential details about a specific account, and when a user clicks on a row, Angular redirects them to a detailed view for that parti ...

angularbootstrap-4

"Is it possible to add an entire object to formData in one

I am looking to send both an image list and product data to an ASP.net api using formData. I have successfully sent the images, but now I am struggling with appending the entire object. I have come across some methods in JS like JSON.stringfy(object) or Ob ...

asp.netangulartypescript

Protecting Your Angular Application with the Angular App Shell Architecture

I have a significant project that utilizes Angular's App Shell Model combined with Angular MSAL.js (v2). One issue I am encountering is ensuring that the guard checks are invoked before the app shell is built, rather than just for the projects injecte ...

angularazureangular-cliazure-ad-b2cazure-ad-msal

The art of transforming properties into boolean values (in-depth)

I need to convert all types to either boolean or object type CastDeep<T, K = boolean> = { [P in keyof T]: K extends K[] ? K[] : T[P] extends ReadonlyArray<K> ? ReadonlyArray<CastDeep<K>> : CastDeep<T[P]> ...

javascriptnode.jstypescript

Having trouble with Typescript in React and Firestore? Wondering why you are receiving the error message "Variable 'l' implicitly has type 'any[]' in some locations where its type cannot be determined.ts"?

For my To Do List project, I am utilizing Next.js/React with Firebase as the backend. The task items consist of name, time required for task completion, and due date fields. My goal is to retrieve the items from the Firebase collection and set them in setD ...

reactjstypescriptgoogle-cloud-firestorenext.js

Issue with implementing JQuery datepicker within Angular 7 CLI application

I've been working on my application and trying to implement the jQuery datepicker functionality. It's an Angular CLI app, and I have installed jquery-datepicker and jquery using npm. Here is a snippet of the dependencies in my package.json: "@a ...

jqueryangularjquery-plugins

Is it possible to configure a unique Bearer Access Token in the "angular-oauth2-oidc" library?

For my Facebook login, I have set up a custom endpoint where the client sends the Facebook access token. In my Ionic App, I use the '@ionic-native/facebook/ngx' package to retrieve this token. Within a Laravel Json API controller, I utilize Soci ...

phptypescriptionic4laravel-socialiteangular-oauth2-oidc

Is there any way I can verify the invocation of signOut in this Jest test case?

I am attempting to perform testing on my home page within a next app. However, I have encountered an issue with a button in the Home component that triggers a logout firebase function. Despite my attempts to mock this function and verify whether or not i ...

reactjstypescriptjestjs

Creating Angular components in *ngFor loop

I have set up multiple radio button groups by dynamically populating options using ngFor within a ngFor loop. categories:string[] = [category_1, ..., category_n]; options:string[] = [option_1, ..., option_n]; <fluent-radio-group *ngFor='let ca ...

angularangularjstypescriptfluent-ui

Customize button appearance within mat-menu in Angular versions 2 and above

Is there a way to style my mat-menu to function similar to a modal dialog? I am having difficulty with the styling aspect and need advice on how to move the save and reset buttons to the right while creating space between them. I have attempted to apply st ...

cssangularangular-materialstyles

Is there a way to access a specific argument in yargs using typescript?

The idea behind using yargs is quite appealing. const argv = yargs.options({ env: { alias: 'e', choices: ['dev', 'prod'] as const, demandOption: true, description: 'app environment&apos ...

typescriptyargs

How can one retrieve videos from a YouTube channel using Angular 2 within the Ionic 2 Framework?

Can someone help me understand how to fetch and display videos in my Angular 2 Android App using Ionic 2? I am new to both technologies. .component.js File export class HomePage implements OnInit { private videoListArr = []; private title = []; privat ...

androidangularionic-frameworkyoutubeionic2

Error: The page "..." contains an invalid "default" export. The type "..." is not recognized in Next.js

Currently, I have a functional component set up for the Signup page. My goal is to define props within this component so that I can pass the necessary values to it from another component. This is my current approach: export default function SignupPage({mod ...

javascriptreactjstypescriptnext.jstypes

Optimal data structure for storage in a Next.js project with TypeScript

What is the appropriate data type for store in export let store: any; other than any? I have used @ts-igore to suppress TypeScript errors on the last line. How can I address the TypeScript error for that as well? I mentioned the boilerplates utilized in ...

reactjstypescriptreduxnext.jsredux-persist

Defining a state in Typescript and passing it as a prop

export interface ISideBarProps { open: boolean; setOpen: React.Dispatch<React.SetStateAction<boolean>>; } export default function SideBar({ open, setOpen }: ISideBarProps) { return ( <div className={`absolute left-0 top-0 h- ...

reactjstypescriptfunctionnext.js

Modifying values in a reactive form does not function as expected for dropdown selections

I'm currently working on a project in Angular2 and I am facing an issue with setting the (change) event in a select element inside a reactive form. Unfortunately, it does not seem to be working. What steps should I take to resolve this? Below is the ...

angular

The 'ObjectID' property is not present in the 'CollectionStatic' data type

Encountering an issue with the MongoDB npm module: mongoId = new Mongo.Collection.ObjectID()._str; Attached is a screenshot for reference. Appreciate any assistance. ...

javascriptnode.jsmongodbtypescript

Is it possible to use ng-bootstrap with vertical tabs?

I'm experimenting with displaying ng-Bootstrap tabs vertically, but the provided example doesn't quite fit my needs. I'm envisioning a layout similar to what I've sketched in the diagram. Do you think it's achievable? Any suggestio ...

angularng-bootstrap

Tips for successfully importing $lib in SvelteKit without encountering any TypeScript errors

Is there a way to import a $lib into my svelte project without encountering typescript errors in vscode? The project is building and running smoothly. import ThemeSwitch from '$lib/ThemeSwitch/ThemeSwitch.svelte'; The error message says "Canno ...

typescriptvisual-studio-codesveltesveltekit

Arranging JSON elements according to a separate array in Angular 2 or Node.js

Looking for a solution with optimal performance, I am seeking to achieve the rearrangement of a list using either Angular2 or NodeJS. My input consists of user fruit preferences' IDs {15, 43, 55, 67, 98}; In addition, I have a JSON object containin ...

javascriptjsonnode.jsangular