Скачать или смотреть How to Open PDF Files in a New Tab in Angular 9

Discover how to effectively open PDF files in a new tab in Angular 9 using the latest practices. This guide covers working with blobs and handling PDF responses from an API.
---
This video is based on the question https://stackoverflow.com/q/62467898/ asked by the user 'developer1' ( https://stackoverflow.com/u/11753107/ ) and on the answer https://stackoverflow.com/a/62468112/ provided by the user 'developer1' ( https://stackoverflow.com/u/11753107/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Open pdf file in new tab in Angular

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Open PDF Files in a New Tab in Angular 9

In web applications, it's common to allow users to download or view files directly in their browsers. However, developers often face challenges when trying to open PDF files in new tabs, especially when using frameworks like Angular. If you're working with Angular 9 and have encountered issues while attempting to open a PDF blob URL due to deprecated methods, this guide is for you! We will walk through a solution that leverages the latest best practices to successfully open PDF files in a new tab.

The Problem

You may have faced the following scenario: you are trying to fetch a PDF file from an API as a blob and encounter the following error when using window.URL.createObjectURL(blob):

[[See Video to Reveal this Text or Code Snippet]]

This typically occurs because the createObjectURL method has been deprecated in some contexts. The solution involves using a more modern technique that still accomplishes the same goal without running into this issue.

The Solution

Here, we'll break down the steps needed to successfully fetch and open a PDF file in a new tab. We'll address two main components: the service that requests the PDF and the component that handles the display.

Step 1: Update the Agreement Service

First, you need to create a service method that properly fetches the PDF file. In Angular, services are commonly used for handling HTTP requests.

Code Implementation

Modify your agreement.service.ts file as follows:

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Handle PDF Opening in the Component

Now that the service is ready to return the PDF as a blob, we need to create a function in the component that consumes this service and opens the PDF in a new tab.

Code Implementation

In your component file, update it as follows:

[[See Video to Reveal this Text or Code Snippet]]

Explanation of the Code

Service:

We use HttpClient to make the HTTP call.

The method getPdfReport fetches the PDF file as a blob and processes the response appropriately.

Component:

The downloadFile method calls the service, which returns an observable.

Upon receiving the response, it converts the blob into a URL using URL.createObjectURL.

The PDF is then opened in a new browser tab using window.open.

Conclusion

By following these steps, you can effectively handle PDF files in an Angular 9 application, adhering to the latest best practices. This approach bypasses the issues associated with deprecated methods while leveraging powerful tools provided by Angular and TypeScript.

If you have any questions or further clarifications, feel free to leave your comments below! We're eager to help you get the most out of your Angular projects.