{"id":67,"date":"2023-10-15T12:24:52","date_gmt":"2023-10-15T10:24:52","guid":{"rendered":"https:\/\/www.broggi.dev\/blog\/?p=67"},"modified":"2023-10-20T14:11:15","modified_gmt":"2023-10-20T12:11:15","slug":"how-to-download-a-file-in-angular-net","status":"publish","type":"post","link":"https:\/\/www.broggi.dev\/blog\/index.php\/2023\/10\/15\/how-to-download-a-file-in-angular-net\/","title":{"rendered":"How to download a file in Angular .NET"},"content":{"rendered":"\n<p>In this article, I will show you how to download a file in an Angular project with a .NET 5+ Web Api.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/dev.to\/broggi\/how-to-download-a-file-in-angular-net-58ki#net-side\"><\/a> .NET Side<\/h2>\n\n\n\n<p>You need to create a controller, for example DownloadController, with a DownloadFile Api of HttpGet type. If you want you can send the file name to be downloaded as a parameter for this Api.<\/p>\n\n\n\n<p>First, transform your file into a byte array or via a memoryStream, then return it in a FileContentResult by passing your byte array, the &#8220;application\/octet-stream&#8221; type and the name of your file.<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\n&#91;Route(\"api\/&#91;controller]\")]\npublic class DownloadController : Controller\n{\n\n        &#91;HttpGet]\n        public async Task&lt;IActionResult&gt; DownloadFile()\n        {\n            \/\/Set your file path here\n            var path = Path.Combine(Directory.GetCurrentDirectory(), \"Ressources\", \"Example.docx\");\n            \/\/Check if the file exists\n            if (!System.IO.File.Exists(path))\n                return NotFound();\n            \/\/Get Bytes array of your file, you can also to do a MemoryStream\n            Byte&#91;] bytes = await System.IO.File.ReadAllBytesAsync(path);\n\n            \/\/Return your FileContentResult\n            return File(bytes, \"application\/octet-stream\", \"Example.docx\");\n\n        }\n}\n\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/dev.to\/broggi\/how-to-download-a-file-in-angular-net-58ki#angular-side\"><\/a> Angular Side<\/h2>\n\n\n\n<p>In your service create a function to call the .Net Api, you need to specify \u2018blob\u2019 for the responseType like this :<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>  downloadFile() {\n    return this.http.get('http:\/\/localhost:5000\/api\/download\/', { responseType: 'blob' });\n  }\n\n<\/code><\/pre>\n\n\n\n<p>In Angular the best library to download file is file-saver that you can install with :<br>npm i file-saver<\/p>\n\n\n\n<p>Write a function in your component to call your service.<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>  download() {\n    this.fileService.downloadFile()\n      .subscribe(data =&gt; saveAs(data, 'Example.docx'));\n  }\n\n<\/code><\/pre>\n\n\n\n<p>Then add the import for use file-saver.<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { saveAs } from \"file-saver\";\n<\/code><\/pre>\n\n\n\n<p>And it works.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this article, I will show you how to download a file in an Angular project with a .NET 5+ Web Api. .NET Side You need to create a controller, for example DownloadController, with a DownloadFile Api of HttpGet type. If you want you can send the file name to be downloaded as a parameter [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34,33],"tags":[42,25,38,35,36,41,40,39,37],"class_list":["post-67","post","type-post","status-publish","format-standard","hentry","category-net","category-angular","tag-net-5","tag-angular","tag-blob","tag-file-download","tag-file-handling","tag-file-saver-library","tag-filecontentresult","tag-httpget","tag-web-api"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\r\n<title>How to download a file in Angular .NET - Quentin Broggi&#039;s blog about Angular &amp; .Net<\/title>\r\n<meta name=\"description\" content=\"Step-by-step guide on downloading files in an Angular application using .NET 5+ Web API, leveraging byte arrays, FileContentResult, and the file-saver library for a seamless user experience.\" \/>\r\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/www.broggi.dev\/blog\/index.php\/2023\/10\/15\/how-to-download-a-file-in-angular-net\/\" \/>\r\n<meta property=\"og:locale\" content=\"en_US\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\"How to download a file in Angular .NET - Quentin Broggi&#039;s blog about Angular &amp; .Net\" \/>\r\n<meta property=\"og:description\" content=\"Step-by-step guide on downloading files in an Angular application using .NET 5+ Web API, leveraging byte arrays, FileContentResult, and the file-saver library for a seamless user experience.\" \/>\r\n<meta property=\"og:url\" content=\"https:\/\/www.broggi.dev\/blog\/index.php\/2023\/10\/15\/how-to-download-a-file-in-angular-net\/\" \/>\r\n<meta property=\"og:site_name\" content=\"Quentin Broggi&#039;s blog about Angular &amp; .Net\" \/>\r\n<meta property=\"article:published_time\" content=\"2023-10-15T10:24:52+00:00\" \/>\r\n<meta property=\"article:modified_time\" content=\"2023-10-20T12:11:15+00:00\" \/>\r\n<meta name=\"author\" content=\"Broggi Quentin\" \/>\r\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\r\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Broggi Quentin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\r\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.broggi.dev\/blog\/index.php\/2023\/10\/15\/how-to-download-a-file-in-angular-net\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.broggi.dev\/blog\/index.php\/2023\/10\/15\/how-to-download-a-file-in-angular-net\/\"},\"author\":{\"name\":\"Broggi Quentin\",\"@id\":\"https:\/\/www.broggi.dev\/blog\/#\/schema\/person\/720a0c86dcf121f7d788f878e2d6c4bb\"},\"headline\":\"How to download a file in Angular .NET\",\"datePublished\":\"2023-10-15T10:24:52+00:00\",\"dateModified\":\"2023-10-20T12:11:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.broggi.dev\/blog\/index.php\/2023\/10\/15\/how-to-download-a-file-in-angular-net\/\"},\"wordCount\":159,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.broggi.dev\/blog\/#\/schema\/person\/720a0c86dcf121f7d788f878e2d6c4bb\"},\"keywords\":[\".NET 5\",\"Angular\",\"Blob\",\"File Download\",\"File Handling\",\"file-saver library\",\"FileContentResult\",\"HttpGet\",\"Web API\"],\"articleSection\":[\".NET\",\"Angular\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.broggi.dev\/blog\/index.php\/2023\/10\/15\/how-to-download-a-file-in-angular-net\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.broggi.dev\/blog\/index.php\/2023\/10\/15\/how-to-download-a-file-in-angular-net\/\",\"url\":\"https:\/\/www.broggi.dev\/blog\/index.php\/2023\/10\/15\/how-to-download-a-file-in-angular-net\/\",\"name\":\"How to download a file in Angular .NET - Quentin Broggi&#039;s blog about Angular &amp; .Net\",\"isPartOf\":{\"@id\":\"https:\/\/www.broggi.dev\/blog\/#website\"},\"datePublished\":\"2023-10-15T10:24:52+00:00\",\"dateModified\":\"2023-10-20T12:11:15+00:00\",\"description\":\"Step-by-step guide on downloading files in an Angular application using .NET 5+ Web API, leveraging byte arrays, FileContentResult, and the file-saver library for a seamless user experience.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.broggi.dev\/blog\/index.php\/2023\/10\/15\/how-to-download-a-file-in-angular-net\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.broggi.dev\/blog\/index.php\/2023\/10\/15\/how-to-download-a-file-in-angular-net\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.broggi.dev\/blog\/index.php\/2023\/10\/15\/how-to-download-a-file-in-angular-net\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.broggi.dev\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to download a file in Angular .NET\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.broggi.dev\/blog\/#website\",\"url\":\"https:\/\/www.broggi.dev\/blog\/\",\"name\":\"Broggi Quentin blog about Angular & .Net\",\"description\":\"Exploring Angular &amp; .NET Development\",\"publisher\":{\"@id\":\"https:\/\/www.broggi.dev\/blog\/#\/schema\/person\/720a0c86dcf121f7d788f878e2d6c4bb\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.broggi.dev\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/www.broggi.dev\/blog\/#\/schema\/person\/720a0c86dcf121f7d788f878e2d6c4bb\",\"name\":\"Broggi Quentin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.broggi.dev\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.broggi.dev\/blog\/wp-content\/uploads\/2023\/09\/ultralight_photo2-1-scaled.jpg\",\"contentUrl\":\"https:\/\/www.broggi.dev\/blog\/wp-content\/uploads\/2023\/09\/ultralight_photo2-1-scaled.jpg\",\"width\":2560,\"height\":1828,\"caption\":\"Broggi Quentin\"},\"logo\":{\"@id\":\"https:\/\/www.broggi.dev\/blog\/#\/schema\/person\/image\/\"},\"description\":\"I'm an independent .NET \/ Angular developer with a passion for creating dynamic and efficient solutions. With years of experience under my belt, I've had the opportunity to work on diverse projects, always aiming to bridge the gap between technology and user needs. If you're interested in collaborating or just want to connect, feel free to reach out to me on LinkedIn: https:\/\/www.linkedin.com\/in\/quentin-broggi\/. I'm always open to new opportunities and discussions!\",\"sameAs\":[\"https:\/\/www.broggisoft.com\/blog\",\"https:\/\/www.linkedin.com\/in\/quentin-broggi\/\"],\"url\":\"https:\/\/www.broggi.dev\/blog\/index.php\/author\/adminblog\/\"}]}<\/script>\r\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to download a file in Angular .NET - Quentin Broggi&#039;s blog about Angular &amp; .Net","description":"Step-by-step guide on downloading files in an Angular application using .NET 5+ Web API, leveraging byte arrays, FileContentResult, and the file-saver library for a seamless user experience.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.broggi.dev\/blog\/index.php\/2023\/10\/15\/how-to-download-a-file-in-angular-net\/","og_locale":"en_US","og_type":"article","og_title":"How to download a file in Angular .NET - Quentin Broggi&#039;s blog about Angular &amp; .Net","og_description":"Step-by-step guide on downloading files in an Angular application using .NET 5+ Web API, leveraging byte arrays, FileContentResult, and the file-saver library for a seamless user experience.","og_url":"https:\/\/www.broggi.dev\/blog\/index.php\/2023\/10\/15\/how-to-download-a-file-in-angular-net\/","og_site_name":"Quentin Broggi&#039;s blog about Angular &amp; .Net","article_published_time":"2023-10-15T10:24:52+00:00","article_modified_time":"2023-10-20T12:11:15+00:00","author":"Broggi Quentin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Broggi Quentin","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.broggi.dev\/blog\/index.php\/2023\/10\/15\/how-to-download-a-file-in-angular-net\/#article","isPartOf":{"@id":"https:\/\/www.broggi.dev\/blog\/index.php\/2023\/10\/15\/how-to-download-a-file-in-angular-net\/"},"author":{"name":"Broggi Quentin","@id":"https:\/\/www.broggi.dev\/blog\/#\/schema\/person\/720a0c86dcf121f7d788f878e2d6c4bb"},"headline":"How to download a file in Angular .NET","datePublished":"2023-10-15T10:24:52+00:00","dateModified":"2023-10-20T12:11:15+00:00","mainEntityOfPage":{"@id":"https:\/\/www.broggi.dev\/blog\/index.php\/2023\/10\/15\/how-to-download-a-file-in-angular-net\/"},"wordCount":159,"commentCount":0,"publisher":{"@id":"https:\/\/www.broggi.dev\/blog\/#\/schema\/person\/720a0c86dcf121f7d788f878e2d6c4bb"},"keywords":[".NET 5","Angular","Blob","File Download","File Handling","file-saver library","FileContentResult","HttpGet","Web API"],"articleSection":[".NET","Angular"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.broggi.dev\/blog\/index.php\/2023\/10\/15\/how-to-download-a-file-in-angular-net\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.broggi.dev\/blog\/index.php\/2023\/10\/15\/how-to-download-a-file-in-angular-net\/","url":"https:\/\/www.broggi.dev\/blog\/index.php\/2023\/10\/15\/how-to-download-a-file-in-angular-net\/","name":"How to download a file in Angular .NET - Quentin Broggi&#039;s blog about Angular &amp; .Net","isPartOf":{"@id":"https:\/\/www.broggi.dev\/blog\/#website"},"datePublished":"2023-10-15T10:24:52+00:00","dateModified":"2023-10-20T12:11:15+00:00","description":"Step-by-step guide on downloading files in an Angular application using .NET 5+ Web API, leveraging byte arrays, FileContentResult, and the file-saver library for a seamless user experience.","breadcrumb":{"@id":"https:\/\/www.broggi.dev\/blog\/index.php\/2023\/10\/15\/how-to-download-a-file-in-angular-net\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.broggi.dev\/blog\/index.php\/2023\/10\/15\/how-to-download-a-file-in-angular-net\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.broggi.dev\/blog\/index.php\/2023\/10\/15\/how-to-download-a-file-in-angular-net\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.broggi.dev\/blog\/"},{"@type":"ListItem","position":2,"name":"How to download a file in Angular .NET"}]},{"@type":"WebSite","@id":"https:\/\/www.broggi.dev\/blog\/#website","url":"https:\/\/www.broggi.dev\/blog\/","name":"Broggi Quentin blog about Angular & .Net","description":"Exploring Angular &amp; .NET Development","publisher":{"@id":"https:\/\/www.broggi.dev\/blog\/#\/schema\/person\/720a0c86dcf121f7d788f878e2d6c4bb"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.broggi.dev\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/www.broggi.dev\/blog\/#\/schema\/person\/720a0c86dcf121f7d788f878e2d6c4bb","name":"Broggi Quentin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.broggi.dev\/blog\/#\/schema\/person\/image\/","url":"https:\/\/www.broggi.dev\/blog\/wp-content\/uploads\/2023\/09\/ultralight_photo2-1-scaled.jpg","contentUrl":"https:\/\/www.broggi.dev\/blog\/wp-content\/uploads\/2023\/09\/ultralight_photo2-1-scaled.jpg","width":2560,"height":1828,"caption":"Broggi Quentin"},"logo":{"@id":"https:\/\/www.broggi.dev\/blog\/#\/schema\/person\/image\/"},"description":"I'm an independent .NET \/ Angular developer with a passion for creating dynamic and efficient solutions. With years of experience under my belt, I've had the opportunity to work on diverse projects, always aiming to bridge the gap between technology and user needs. If you're interested in collaborating or just want to connect, feel free to reach out to me on LinkedIn: https:\/\/www.linkedin.com\/in\/quentin-broggi\/. I'm always open to new opportunities and discussions!","sameAs":["https:\/\/www.broggisoft.com\/blog","https:\/\/www.linkedin.com\/in\/quentin-broggi\/"],"url":"https:\/\/www.broggi.dev\/blog\/index.php\/author\/adminblog\/"}]}},"_links":{"self":[{"href":"https:\/\/www.broggi.dev\/blog\/index.php\/wp-json\/wp\/v2\/posts\/67","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.broggi.dev\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.broggi.dev\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.broggi.dev\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.broggi.dev\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=67"}],"version-history":[{"count":1,"href":"https:\/\/www.broggi.dev\/blog\/index.php\/wp-json\/wp\/v2\/posts\/67\/revisions"}],"predecessor-version":[{"id":68,"href":"https:\/\/www.broggi.dev\/blog\/index.php\/wp-json\/wp\/v2\/posts\/67\/revisions\/68"}],"wp:attachment":[{"href":"https:\/\/www.broggi.dev\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=67"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.broggi.dev\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=67"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.broggi.dev\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=67"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}