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

Prisma unexpectedly updates the main SQL Server database instead of the specified database in the connection string

I have recently transitioned from using SQLite to SQL Server in the t3 stack with Prisma. Despite having my models defined and setting up the database connection string, I am encountering an issue when trying to run migrations. Upon running the commands: ...

javascriptsql-servertypescriptnext.jsprisma

Combine objects by selecting attributes from multiple objects

declare type A = {type: 'TypeA', attr1: string} declare type B = {type: 'TypeB', attr2: string} declare type U = A | B When I use type X = Pick<U, 'type'>, I get: { type: 'TypeA' | 'TypeB' } But I a ...

typescript

Calculating the length of time based on a specific date in Angular 2+: A step-by-step

API: { data:{ "duration": 12, "startDate": "27-01-2020 16:09" } } I am currently working with Angular 2+. In the API response, the duration is set to 12 (in months) and the start date is provided as well... Task at hand: My goal is to ...

angularangular6angular5angular7

Angular: Execute a function once all BehaviorSubject subscriptions have been initialized

In order to facilitate the sharing of parameters across components in my Angular application, I have implemented a "global" service as shown below: import { Injectable } from '@angular/core'; import { BehaviorSubject } from 'rxjs/BehaviorSu ...

angularangular2-servicesbehaviorsubject

How can errors be captured when working with chained rxjs observables in an combineLatest scenario?

After reading through this thread, I encountered the following scenario: Observable.combineLatest( this.translate.get("key1"), this.translate.get(""), this.translate.get("key3"), this.translate.get("key4") ) .subscr ...

angularionic2reactivexng2-translate

Creating a personalized menu using Nextron (electron) - Step by step guide

I'm currently in the process of developing an app with Nextron (Electron with Nextjs and Typescript). Although I have the foundation of my Next app set up, I've been encountering issues when attempting to create a custom electron menu bar. Every ...

typescriptnext.jselectron

Incorporating JQuery Plugin into Angular 2 Component

Currently, I am attempting to incorporate a jQuery code snippet into a component that I acquired online. This is the specific component. Although I have successfully integrated the HTML and CSS into the code, I am encountering difficulties with loading th ...

jqueryangular

The correct way to add to a string array that has been passed as props to a functional component

There is a parent component that establishes a useState hook with a string array. Then, there is a child component tasked with updating the string array. To accomplish this, both the string array and the useState function are passed to the child component. ...

reactjstypescriptreact-hooksuse-state

Intellisense fails to function properly after attempting to import a custom npm package

I've encountered an issue with a custom npm package that I created using storybook. The components function properly in other projects when imported, but the intellisense feature is not working as expected. Interestingly, when I import the same compon ...

reactjstypescriptnpmstorybook

Exploring Angular: Enhancing Routing through GET Requests

I've been working on a cutting-edge application that combines an Angular 2 frontend with a powerful Java backend. An exciting feature of this application is a dynamic form, consisting of various search criteria. Upon submission, I execute an http get ...

angularangular-ui-routerangular2-routingangular2-forms

Using Typescript to create an interface that extends another interface and includes nested properties

Here is an example of an interface I am working with: export interface Module { name: string; data: any; structure: { icon: string; label: string; ... } } I am looking to extend this interface by adding new properties to the 'str ...

typescriptsyntax

Jasmine encountered an error while trying to compare the same string: 'Expected the values to match.'

I'm encountering an error message, despite verifying that the strings are identical: Expected { $$state : { status : 1, value : { customerNumber : 'customerNumber', name : 'name', userId : 'buId', customerType : 'ty ...

angularjstypescriptjasminekarma-jasmine

PhpStorm 2019.2 introduces Material UI components that have optional props instead of being mandatory

My PhpStorm 2019.2 keeps showing me a notification that the Button component from Material UI needs to have an added href prop because it is required. However, when I refer to the Material UI API, I see something different. Take a look at this screenshot: ...

javascriptreactjstypescriptphpstormmaterial-ui

Is it possible to apply two ngClass directives to a single div element in Angular 4?

When I click to start editing, a component is called for the editing process. In this component, I am unable to click on anything and the background turns black, which is okay. However, I would like for each ID that I select to edit to become active with a ...

htmlcssangulartypescript

Guide to configuring Nodemailer with Angular 4

I've been searching everywhere for a tutorial that can walk me through the steps of setting up nodemailer in Angular 4. I'm feeling lost about where to place the ts code snippet from nodemailer's website: 'use strict'; const nodem ...

node.jsangularnodemailer

Utilize @ngrx/store to merge various reducers from feature modules

I'm currently immersed in developing a test app to delve deeper into the @ngrx/store framework. Within this project, I've set up a module called TrainingModule that aims to store various exercises and related information. The code is functioning ...

angularngrxngrx-store-4.0

What is the process for defining functions with distinct data types while allowing variables to have multiple data types?

I am facing a declaration issue - or rather, a challenge in comprehending Typescript. Let me illustrate the scenario: public migrationSource: Skater | Rink; public migrationDestination: Skater | Rink; public migrationMode: MigrationMode; ngOnInit() { ...

angulartypescripttypescript-generics

Unable to retrieve iFrame window due to an error

My challenge lies in obtaining the window of an iFrame using this particular code: var frameWindow = document.getElementById("loginframe"); var iWindow = frameWindow.contentWindow; However, I am consistently encountering this error message: Property ...

javascriptangular

Angular 9 is throwing an error that specifies that the options provided in the @ViewChild decorator must be in

After successfully upgrading my Angular project from version 8 to 9, I encountered an error when trying to run the project on localhost or build it. The error message states: ERROR in @ViewChild options must be an object literal The @ViewChild syntax that ...

angularangularjsangular9viewchildangular-upgrade

Angular: bypassSecurityTrustHtml sanitizer does not render the attribute (click)

I'm facing an issue where a button I rendered is not executing the alertWindow function when clicked. Can anyone help?: app.component.ts: import { Component, ElementRef, OnInit, ViewEncapsulation } from '@angular/core'; import ...

htmlangulartypescript