(#69) Import & Export Csv, Excel Files

Author: phongnguyend

src/UIs/angular/src/app/products/list-products/list-products.component.html

@@ -6,6 +6,10 @@
         Export as Pdf
       </button>
       &nbsp;
+      <button type="button" class="btn btn-secondary" (click)="exportAsCsv()">
+        Export as Csv
+      </button>
+      &nbsp;
       <a
         class="btn btn-primary"
         routerLinkActive="active"

src/UIs/angular/src/app/products/list-products/list-products.component.ts

@@ -99,4 +99,18 @@ export class ListProductsComponent implements OnInit {
       error: (err) => (this.errorMessage = err),
     });
   }
+
+    exportAsCsv() {
+    this.productService.exportAsCsv().subscribe({
+      next: (rs) => {
+        const url = window.URL.createObjectURL(rs);
+        const element = document.createElement("a");
+        element.href = url;
+        element.download = "Products.csv";
+        document.body.appendChild(element);
+        element.click();
+      },
+      error: (err) => (this.errorMessage = err),
+    });
+  }
 }

src/UIs/angular/src/app/products/product.service.ts

@@ -57,6 +57,12 @@ export class ProductService {
       .pipe(catchError(this.handleError));
   }
 
+  exportAsCsv() {
+    return this.http
+      .get(this.productUrl + "/ExportAsCsv", { responseType: "blob" })
+      .pipe(catchError(this.handleError));
+  }
+
   private handleError(err: HttpErrorResponse) {
     // in a real world app, we may send the server to some remote logging infrastructure
     // instead of just logging it to the console

src/UIs/reactjs/src/containers/Products/ListProducts/ListProducts.tsx

@@ -55,6 +55,16 @@ class ListProducts extends Component<any, any> {
     element.click();
   };
 
+  exportAsCsv = async () => {
+    const rs = await axios.get("/ExportAsCsv", { responseType: "blob" });
+    const url = window.URL.createObjectURL(rs.data);
+    const element = document.createElement("a");
+    element.href = url;
+    element.download = "Products.csv";
+    document.body.appendChild(element);
+    element.click();
+  };
+
   deleteProduct = (product) => {
     this.setState({ showDeleteModal: true, deletingProduct: product });
   };
@@ -229,6 +239,14 @@ class ListProducts extends Component<any, any> {
                 Export as Pdf
               </button>
               &nbsp;
+              <button
+                type="button"
+                className="btn btn-secondary"
+                onClick={this.exportAsCsv}
+              >
+                Export as Csv
+              </button>
+              &nbsp;
               <NavLink className="btn btn-primary" to="/products/add">
                 Add Product
               </NavLink>

src/UIs/vuejs/src/views/products/List.vue

@@ -7,6 +7,10 @@
           Export as Pdf
         </button>
         &nbsp;
+        <button type="button" class="btn btn-secondary" @click="exportAsCsv">
+          Export as Csv
+        </button>
+        &nbsp;
         <router-link class="btn btn-primary" to="/products/add"
           >Add Product</router-link
         >
@@ -214,6 +218,16 @@ export default Vue.extend({
         document.body.appendChild(element);
         element.click();
       });
+    },
+    exportAsCsv() {
+      axios.get("/ExportAsCsv", { responseType: "blob" }).then(rs => {
+        const url = window.URL.createObjectURL(rs.data);
+        const element = document.createElement("a");
+        element.href = url;
+        element.download = "Products.csv";
+        document.body.appendChild(element);
+        element.click();
+      });
     }
   },
   components: {