How to use TypeScript to print a blob (PDF) in Internet Explorer or Microsoft Edge?

I need to print a pdf blob using typescript. I've tried the following code, which works in Chrome but not in Edge.

Code 1 (works in Chrome but prints blank in Edge) -

    const fileURL = URL.createObjectURL(blob);
    const iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    iframe.src = fileURL;
    iframe.name = fileName;
    document.body.appendChild(iframe);
    iframe.contentWindow.print();

Code 2 (works in Chrome but throws error for contentWindow.document being null) -

    const fileURL = URL.createObjectURL(blob);
    const iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    iframe.src = fileURL;
    iframe.name = fileName;
    document.body.appendChild(iframe);
    document.getElementsByTagName('iframe')[0].contentWindow.document.execCommand('print', false, null)

I have searched for solutions but haven't found any satisfying answers. Since I'm using Angular 6, is there a more direct method or library that can achieve this?

angulartypescriptinternet-exploreriframeblob

Answer №1

The reason why the code isn't functioning is due to IE and Edge not supporting iframes with data URL as the src attribute. This can be confirmed on caniuse. For further details, you may want to refer to my response in another discussion thread.

As a result, direct printing of the blob PDF in IE and Edge is not possible. However, there are two alternatives:

  1. Saving the file in IE and Edge, then printing it manually. Both browsers have their own API called msSaveOrOpenBlob for file creation and download. Sample code snippet:

    var blob = new Blob([byteArray], { type: 'application/pdf' });
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
    window.navigator.msSaveOrOpenBlob(blob);
}
else {
    var objectUrl = URL.createObjectURL(blob);
    ...
}

  2. Utilizing PDF.js to interpret and display the PDF. It uses the following link format to showcase the PDF:

    http://your_webserver_address/your_PDFjs_foldername/web/viewer.html?file=your_pdf_address

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

It appears that the Angular 2 HTTP header is being produced or transmitted erroneously

Trying to send a request to my backend that uses HTTP Basic authentication for testing purposes. username: user password: password The correct header should be: Authorization: Basic dXNlcjpwYXNzd29yZA== Request tested with this header in Chrome Advance ...

angularjshttpheaderangularangular2-services

Obtain the combination of values within an array object

I am attempting to write the specifications for a function that can take records of any structure and convert the values into a discriminated union. For example: const getKeys = <T extends {key: string}>(items: T[]): T['key'] => { // ...

typescripttypescript-generics

Tips for simulating mouse events in Jasmine tests for Angular 2 or 4

New to Jasmine testing, I'm exploring how to test a directive that handles mouse events such as mouse down, up, and move. My main query is regarding passing mouse coordinates from the Jasmine spec to my directive in order to simulate the mouse events ...

javascriptangularunit-testingjasmine

Utilize JSX attributes across various HTML elements

I'm looking for a solution to efficiently add JSX attributes to multiple elements. Here are the example attributes I want to include: class?: string; id?: string; style?: string; And here are the example elements: namespace JSX { interface Int ...

typescriptjsx

Using Angular 2+ to make an http-get request with parameters

I am looking to create a GET method with multiple parameters. Currently, my example works with one parameter but I need to add another. In the backend code segment below, you can see where I am trying to pass the second parameter, 'created_by', b ...

angularapi

I am searching for answers to solve issues related to a JSON file

I am currently working on a tool that searches for matches in an input field by comparing the keywords entered by the user with a JSON. During my testing phase, I focused on using a single API that provides information about different countries and fortun ...

htmljsonangulartypescript

Discovering the array item by its ID using Angular 2 with Typescript

Hey everyone, I'm currently working with asp.net mvc 5 and running into an issue. When attempting to retrieve an object by its id, it keeps returning undefined. The strange thing is that the objects display fine when checking console.log(this.vtypes). ...

arraysangulartypescript

Errors are not displayed in vee-validate for objects

When utilizing [email protected] [email protected] the problem arises while attempting to validate a nested object and displaying an error. An example was created based on the documentation. However, when trying to include :has-error="Bo ...

typescriptvue.jsvuejs3yupvee-validate

What is the process for setting up a list of sub-components externally from the main host system?

I am looking to develop an Angular component that can display a set of buttons. <div class="button-group"> <button (onclick)="handleClick1">First text</button> <button (onclick)="handleClick2">Anoth ...

angular

The output.library.type variable in WebPack is not defined

Currently, I am delving into WebPack with a shortcode. As part of my learning process, I am working on a code snippet that involves calculating the cube and square of a number, which are then supposed to be stored in a variable outlined in the webpack.conf ...

javascriptnode.jstypescriptwebpackwebpack-dev-server

Having to reinstall node modules is a repetitive task that must be done after each build of an Angular

Formulating this question has been quite challenging for me. I really hope it is clear. Despite my extensive searches, both on this platform and beyond, I have not been able to find any reference to the behavior I am experiencing. For the past few ...

angularnpmbuildangular-librarynpm-link

Is foreach not iterating through the elements properly?

In my code, I have a loop on rxDetails that is supposed to add a new field payAmount if any rxNumber matches with the data. However, when I run the forEach loop as shown below, it always misses the rxNumber 15131503 in the return. I'm not sure what I ...

javascriptarraystypescriptforeach

NextJS Typescript Player

Encountering an issue during the build process, specifically with the error in audioRef.current.play(). The error message indicates that there is no play function available. I attempted to use an interface but it seems to not accept boolean values. Could ...

typescriptnext.js

Steps to avoid reinitializing the component upon changing routes in an Angular 9 component

In my component, the width of a chart is stored in a variable (because I can't use style for d3). However, every time the route changes, all variables in this class component become undefined. I have tried using ngIf, services (which also become unde ...

javascriptangular

Unlocking the full potential of Ionic 4 with push notifications, omitting

Currently, I am encountering an issue where I need to disable the display of notification alerts (local notification) while the application is running in the foreground on both Android and iOS. I only want to capture the push notification in the code witho ...

angularfirebaseionic-frameworkionic-nativeionic4

Add a class to a button in an Angular btn-group if a specific string is found within an

I am currently working on a project where I have multiple buttons that need to toggle an active class when selected in order to change their color. Below is a snippet of what I have: In the array called 'selected', I have: this.selected = [&ap ...

javascriptangulartypescript

Updating Angular components by consolidating multiple inputs and outputs into a unified configuration object

When I develop components, they often begin with numerous @Input and @Output properties. However, as I continue to add more properties, I find it beneficial to transition to utilizing a single config object as the input. For instance, consider a component ...

javascriptangularangular-components

Automatically align a Div to the right within an ngFor directive in an Angular 6 application

<div class="row"> <div class="col-lg-4 col-xs-6" *ngFor="let client of clients;index as i"> <!-- small box --> <div class="small-box bg-dashboard-box" > <div class="inner"> <div class="text-black"> ...

htmlcssangulartwitter-bootstrap

Attempting to integrate the Angular2 module text-mask-addon into the project

Currently, I am in the process of integrating text-mask-addons into my Angular application. You can find more information at https://github.com/text-mask/text-mask/tree/master/addons Despite attempting to follow the npm links suggestion, I am encountering ...

javascripthtmlnode.jsangularnpm

Error message in Typescript with React: "The type 'ComponentClass<StyledComponentProps<{}>>' cannot be assigned to type 'typeof MyComponent'"

Currently experimenting with integrating the Material UI 1.0 (beta) @withStyles annotation into a React component. The documentation provides a JavaScript example (), however, it results in a compilation error when using Typescript. Despite the error, the ...

reactjstypescriptmaterial-ui