diff --git a/app/controllers/orders/view.js b/app/controllers/orders/view.js
index 20601a37172..5e30bf22352 100644
--- a/app/controllers/orders/view.js
+++ b/app/controllers/orders/view.js
@@ -2,23 +2,43 @@ import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
 
 export default Controller.extend({
-  isLoading : false,
-  printThis : service(),
-  actions   : {
-    downloadInvoice() {
-      const selector = '.print';
-      const options = {
-        header     : 'Order Invoice',
-        printDelay : 800
-      };
-      this.get('printThis').print(selector, options);
+  isLoadingInvoice : false,
+  isLoadingTickets : false,
+  printThis        : service(),
+  actions          : {
+    downloadInvoice(eventName, orderId) {
+      this.set('isLoading', true);
+      this.loader
+        .downloadFile(`/orders/invoices/${this.model.order.identifier}`)
+        .then(res => {
+          const anchor = document.createElement('a');
+          anchor.style.display = 'none';
+          anchor.href = URL.createObjectURL(new Blob([res], { type: 'application/pdf' }));
+          anchor.download = `${eventName}-Invoice-${orderId}.pdf`;
+          document.body.appendChild(anchor);
+          anchor.click();
+          this.notify.success(this.l10n.t('Here is your Order Invoice'));
+          document.body.removeChild(anchor);
+        })
+        .catch(e => {
+          console.warn(e);
+          const selector = '.print';
+          const options = {
+            header     : 'Order Invoice',
+            printDelay : 800
+          };
+          this.printThis.print(selector, options);
+        })
+        .finally(() => {
+          this.set('isLoadingInvoice', false);
+        });
     }
   },
 
   downloadTickets(eventName, orderId) {
-    this.set('isLoading', true);
-    this.get('loader')
-      .downloadFile(`/tickets/${this.get('model.order.identifier')}`)
+    this.set('isLoadingTickets', true);
+    this.loader
+      .downloadFile(`/tickets/${this.model.order.identifier}`)
       .then(res => {
         const anchor = document.createElement('a');
         anchor.style.display = 'none';
@@ -26,15 +46,15 @@ export default Controller.extend({
         anchor.download = `${eventName}-Tickets-${orderId}.pdf`;
         document.body.appendChild(anchor);
         anchor.click();
-        this.get('notify').success(this.get('l10n').t('Here are your tickets'));
+        this.notify.success(this.l10n.t('Here are your tickets'));
         document.body.removeChild(anchor);
       })
       .catch(e => {
         console.warn(e);
-        this.get('notify').error(this.get('l10n').t('An unexpected Error occurred'));
+        this.notify.error(this.l10n.t('An unexpected Error occurred'));
       })
       .finally(() => {
-        this.set('isLoading', false);
+        this.set('isLoadingTickets', false);
       });
   }
 });
diff --git a/app/templates/orders/view.hbs b/app/templates/orders/view.hbs
index 20bd99ac43b..f0b5e1363ca 100644
--- a/app/templates/orders/view.hbs
+++ b/app/templates/orders/view.hbs
@@ -34,13 +34,13 @@
         </div>
       </div>
       <br>
-      <a class="ui labeled icon button" href="#" {{action downloadTickets model.event.name model.order.identifier}} target="_blank" rel="noopener nofollow">
+      <a class="ui labeled icon {{if isLoadingTickets 'loading'}} button" href="#" {{action downloadTickets model.event.name model.order.identifier}} target="_blank" rel="noopener nofollow">
         <i class="ticket alternate icon"></i>
         {{t 'Download Tickets'}}
       </a>
       <br>
       <br>
-      <a href="#" {{action 'downloadInvoice'}} class="ui labeled icon blue button">
+      <a href="#" {{action 'downloadInvoice' model.event.name model.order.identifier }} class="ui labeled icon blue {{if isLoadingInvoice 'loading'}} button">
         <i class="print alternate icon"></i>
         {{t 'Print Invoice'}}
       </a>