Trigger the download of the PDF document - Angular version 6 or higher

Is there a way I can download a pdf file from a URL without it opening in a new browser tab? I tried using the window.open() method but it didn't work as expected.

downloadPDFFile() {
     window.open('https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf', 'Download');
    }

Answer №1

const saveFile = (fileUrl) => {
        const fileName = fileUrl.split('/').pop();
        try {
            fs.saveAs(fileUrl, fileName);
        } catch (error) {
            console.log(error);
        }
    }

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

An issue occurred during the construction of an angular project: The Tuple type '[]' with a length of '0' does not contain any elements at index '0'

When I run the command ng build --prod, I encounter the following error: ERROR in src/app/inventory/inv-parts-main-table/dialog-component/dialog-component.component.html(5,16): Tuple type '[]' of length '0' has no element at index &apo ...

Use AngularJS to check if an item in a loop matches the current location, and if so, apply

Here is the code snippet I am currently working with: <ul ng-init="urls = ['/home', '/news', '/contactUs']"> <li ng-repeat="url in urls> <a class="current-page" href="{{url}}"> {{url}} </a> </li> ...

A Vue computed property is returning the entire function instead of the expected value

One of my computed properties is set up like this: methods: { url_refresh: function (id) { return `${this.url_base}?start=${Date.now()}` } } However, when I attempt to print the value on mount: mounted() { console.log(this.url_refresh) ...

How can I extend a third-party JavaScript library in TypeScript using a declaration file?

Currently, I am working on creating a .d.ts file for an external library called nodejs-driver. While I have been able to map functions and objects successfully, I am struggling with incorporating the "inherit from objects defined in the JS library" conce ...

Troubleshooting a Node.js Application Deployment Issue on Heroku

2017-09-03T18:50:57.000000+00:00 app[api]: Build initiated by user [me] 2017-09-03T18:51:28.776809+00:00 heroku[web.1]: State transitioned from crashed to starting 2017-09-03T18:51:28.572116+00:00 app[api]: Deploy 20b0544e by user [me] 2017-09-03T18:51: ...

Converting complex mongodb data structures into Backbone.js Models/Collections

Within my mongodb database, I store collections comprising of documents and embedded documents at the posts and comments levels. One example is a post document that includes two comments as embedded documents. { "__v" : 0, "_id" : ObjectId("502d7b ...

What is the best way to showcase a view on the same page after clicking on a link/button in Angular?

Is there a way to show a view on the same page in an Angular application when a link is clicked? Rather than opening a new page, I want it displayed alongside the list component. How can this be accomplished? Here's an illustration of my goal: I&apos ...

Executing Ionic function before application shutdown

Does anyone know of a function that can be triggered when the app is about to exit, close, or go into the background? Essentially any event that indicates "the user has stopped using the app"? In my app, I create a 'user log' that keeps track of ...

In Angular with rxjs, make sure the response is set to null if the json file cannot be found during an http.get request

When working on my Angular app, I often retrieve data from a static JSON file like this: @Injectable() export class ConfigService { constructor(private http: HttpClient) { } getData() { this.http.get('/assets/myfile.json').subscribe(da ...

conceal the .card-body element if the children have the CSS property "display:none"

My challenge involves managing two collapsible cards on a webpage. I am looking for a solution where the .card-body will have its display set to none when there are no inner divs to show in the card upon clicking a letter in the pagination. Otherwise, the ...

Error injecting angular.bootstrap in Angular 1.6.5 version

I have a MeanJS.org skeleton app that I've transformed into hapi-js from express, switched to postgres from mongo, and incorporated OAUTH for authentication (mainly because I liked the server/client module folder structure - haha). Everything seems t ...

Exploring the getInitialProps function in NextJS

I'm currently exploring NextJS and came across a sample page implementation: class IndexPage extends Component { static async getInitialProps(context) { return {}; } render() { return <div>hello world</div>; } } export def ...

What is the proper way to declare app.use using TypeScript with the node.js Express module?

I am working on a node.js app that utilizes typescript with express. In my code, I have defined an error middleware function as shown below: app.use((error:any, req:Request, res:Response, next:NextFunction) => { res.status(500).json({message:error.m ...

Sending a JavaScript string to a PHP script from a Chrome extension content script

I am currently developing a chrome extension that is designed to extract text data from specific websites when I visit them, and then store this data in a SQL database. The JavaScript code for data extraction is functioning correctly and is able to capture ...

Angular - personalized modal HTML

I am facing a challenge where I need to trigger a popup when a button is clicked. There can be multiple buttons, each with its own overlay popup, and these popups should close when clicking outside of them. Currently, I am using TemplateRef (#toggleButton ...

AngularJS: Controller causing an unchecked error

I'm a beginner to AngularJS and I'm struggling to understand why I'm not getting a response when clicking the button. Any help would be greatly appreciated. I've reviewed other examples of controllers being used but I can't seem to ...

Customizing the appearance of selection dropdown options in React

Is it possible to customize the styling of the choices in a React input dropdown? For instance, I am interested in creating an autocomplete dropdown that presents the options neatly arranged in columns. Essentially, I want to design a dropdown data grid t ...

Binary string type definition in Typescript

Is there a way to create a type that ensures each character is either '1' or '0' in JavaScript? type Binary = '1'|'0' The current type works for single characters only. Is it possible to create a type for repeating ...

Immutable parameter in constructor

While analyzing some TypeScript code, I stumbled upon a peculiar declaration within a class definition: constructor(readonly constructorParam : Type) { // no assignment of constructorParam here } Surprisingly, constructorParam is still being used as usu ...

Monaco utilized for Angular web-based code editing platform

We recently created an online code editor in our project using the Monaco editor. Our next goal is to integrate an Angular editor into this platform. To achieve this, we require NPM support to install dependencies directly from the editor. If anyone has ...