How can I open a link in a new tab using Angular components?

Currently, I am retrieving a base64 encoded PDF from an API REST service.

After some trial and error, I came up with this method for decoding and downloading the PDF:

const linkSource = 'data:application/pdf;base64,' + apiResponse;
const downloadLink = document.createElement('a');
const fileName = 'xx.pdf';
downloadLink.href = linkSource;
downloadLink.download = fileName;
downloadLink.click();

While the code works as intended, I actually need the PDF to be opened in a new tab instead of being downloaded.

I attempted the following approach, but it doesn't appear to be successful:

window.open(linkSource, '_blank');

Is there a way I can modify the downloadLink element so that it opens in a new tab instead of triggering a download? Essentially, I am looking for the behavior similar to using 

<a target="_blank">
.

javascriptangulartypescript

Answer №1

Here's a straightforward fix. Develop a webpage that accepts a filename as an input and dynamically generates the following HTML:

<object data="file.pdf" type="application/pdf" width="900px" height="1800px">
    Your browser does not support PDFs. 
  </object>

Answer №2

Feel free to give this a try!

let newLink = document.createElement('a');
let fileToSave = 'test.docx';
newLink.href = 'https://www.example.com';
newLink.download = fileToSave;
newLink.target = "_blank";
newLink.click();

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

Tips on using a dropdown menu to choose an item and automatically navigate to its specific details within an Angular framework

Here is the structure of my data : groups: [ { collections:[] }, { collections:[] }] I am utilizing nested *ngFor to showcase all groups and collections on a single page, which can make the list lengthy as more groups and collections are added. The hea ...

javascriptangulardomscrollngfor

Want to know more about the font-face onload method?

I'm currently working on a loading screen which not only performs an animation, but also generates multiple img objects in JavaScript. These images are linked to an onload method that counts their progress. The loading process is completed once the co ...

javascriptcssfont-faceloading

Warning: Uncontrolled Input Issue with React Google Autocomplete

Within my React application, I have incorporated the react-google-autocomplete and antd packages. Here is how I am utilizing them: import { Button, Input, Form, Row, Col } from "antd"; .... const getCityFromPlace = (place) => { let city ...

javascriptreactjsformsautocompleteantd

Elements that are added dynamically will not inherit the correct CSS styles, requiring JavaScript to style them properly

My <ul> element dynamically adds <li> elements, and I am attempting to make the first <li> wider at 63% while the others are at 60%. However, the first one is only getting a width of 60%. Any thoughts on why this might be happening? I ne ...

javascriptjqueryhtmlcss

Propagate image URLs through props

I'm facing an issue trying to pass icons as props between two components. I have imported the URLs and used them to create a prop object in my main file. import { useState } from 'react'; import SapIcon from '../images/logo_sap.png&apos ...

javascriptreactjsreact-props

What causes Promise.all to misbehave in mapping an array?

I've been using Vue and attempting to make some axios requests within a map method over an array, but I'm getting unexpected results. Here's my function: async getFavoriteRecipes(){ try{ let myRecipes=[] ...

javascriptvue.jsdictionarypromise

Setting the environment variable "NODE_EXTRA_CA_CERTS" in a Node.js environment

Currently, I am in the process of developing a mobile application utilizing Ionic, Angular, Cordova, and Node.js. The application communicates with an HTTPS server using window.XMLHttpRequest: module.exports = function request (method, url, body, headers ...

node.jsangularsslionic2tls1.2

Unable to make changes to the AWS Dynamo array

I am currently attempting to update a JSON array. I have a table in DynamoDB where I successfully inserted the JSON data using the PUT method. Partition key : _id , Type : S Below is the JSON data that has been saved into the database: { "_id": ...

javascriptjsonnode.jsamazon-dynamodbaws-sdk

Continuously receiving unhandled promise rejection errors despite implementing a try-catch block

Every time I run my code, I encounter the following issue: An UnhandledPromiseRejectionWarning is being thrown, indicating that a promise rejection was not properly handled. This can happen if you throw an error inside an async function without a catch bl ...

javascriptnode.jsparsingpromiseparse-platform

Is there a way to send a variable to PHP and execute it on the current page?

I need to integrate an inventory search feature on a local clothing store's website. The challenge lies in setting up the PHP script that pulls and organizes the data to run on the same page as the search form itself. Given my limited experience with ...

javascriptphpjqueryajax

Adjusting the size of the scrollbar within an iframe

[How do I adjust the size of an iframe scrollbar?](https://i.sstatic.net/zyr4y.png) I attempted to change the scrollbar width with the following style, but it did not work. /* Adjusting scrollbar width */ ::-webkit-scrollbar { width: 10px; } /* Track */ ...

javascripthtmlcss

How can the action value be passed in effects for switchMap using both another switchMap and filter?

There is a certain code snippet @Effect() myEffect$ = this.actions$.pipe( ofType(MyActions.doSomething), tap(() => this.store.dispatch(MyActions.doSomething2())), switchMap(action => { that is functioning as expected. In order to inj ...

angulartypescriptfiltereffectsswitchmap

Performing a JavaScript AJAX request to send a complex object containing an array of other complex objects within it

My issue arises from encountering an empty array of objects at the backend. To illustrate, I have established two classes at the backend... public class ScoreModel { public string Subject { get; set; } public float Score { get; set; } ...

javascriptc#ajax

How do I modify a response within a subscribe in Angular?

Having a scenario where multiple components are utilizing a function that expects an array of objects to be returned. However, there is one specific case where I need to modify the array based on the return value from an observable before returning it: let ...

angularasynchronousasync-awaitobservable

The appearance of Bootstrap-Navbar is altered when viewed on a mobile device

After creating a website that was compatible with both web and mobile devices, I encountered an issue where the navbar would not collapse on my smartphone. However, when I resized the browser window to match the size of the smartphone screen, it worked per ...

javascriptjqueryhtmlcsstwitter-bootstrap

Implementing a Vue.js search function with two v-for loops

I have computed the following filter: <script> export default { data() { return { columns:{}, search:"", trovato:{}, }; }, computed: { ...

javascriptvue.jsvuejs2vuetify.js

Unable to assign observable data to a local variable within an Angular application

Custom Service import { Injectable } from '@angular/core'; import {Observable} from 'rxjs'; import { HttpClient,HttpParams } from '@angular/common/http'; @Injectable() export class UserService { constructor(private http: ...

angularhttpget

Utilizing the Angular @HostListener to retrieve the current viewport width upon loading - a simple guide

Currently, I am utilizing the Angular @HostListener to retrieve the current width of the viewport onResize() in the following manner: @HostListener('window:resize', ['$event']) onResize(event?) { window.innerWidth <= 400 ? ...

javascriptangulartypescriptleafletngx-leaflet

Encountering a problem with Angular 2 router functionality

As a beginner in programming with Node.js, Angular2, and Typescript, I decided to explore the Angular forms and Angular router to enhance my application with new pages. Utilizing Material Design Lite (MDL) for material components in my application, I encou ...

node.jsangulartypescript

Submitting an event on an Angular modal component

I recently created a modal component using the following template structure: <div class="header"></div> <div class="body"> <ng-content></ng-content> </div> <div class="footer" ...

javascriptangulartypescript