diff --git a/src/pages/14_report/MainPage.vue b/src/pages/14_report/MainPage.vue
index e66d0662..70d8fb4a 100644
--- a/src/pages/14_report/MainPage.vue
+++ b/src/pages/14_report/MainPage.vue
@@ -296,7 +296,19 @@ watch([() => pageState.currentTab], async () => {
           <template v-if="pageState.currentTab === ViewMode.Sale">
             <div class="q-gutter-y-md">
               <Expansion default-opened>
-                <template #header>{{ $t('report.sale.byCustomer') }}</template>
+                <template #header>
+                  <div class="flex full-width items-center">
+                    {{ $t('report.sale.byCustomer') }}
+                    <SaveButton
+                      style="margin-left: auto"
+                      :icon="'material-symbols:download'"
+                      :label="$t('general.download')"
+                      @click.stop="
+                        reportStore.downloadReportSale('by-customer')
+                      "
+                    />
+                  </div>
+                </template>
                 <template #main>
                   <TableReport
                     :row="
@@ -324,7 +336,17 @@ watch([() => pageState.currentTab], async () => {
               </Expansion>
               <Expansion default-opened>
                 <template #header>
-                  {{ $t('report.sale.byProductGroup') }}
+                  <div class="flex full-width items-center">
+                    {{ $t('report.sale.byProductGroup') }}
+                    <SaveButton
+                      style="margin-left: auto"
+                      :icon="'material-symbols:download'"
+                      :label="$t('general.download')"
+                      @click.stop="
+                        reportStore.downloadReportSale('by-product-group')
+                      "
+                    />
+                  </div>
                 </template>
                 <template #main>
                   <TableReport
@@ -346,7 +368,17 @@ watch([() => pageState.currentTab], async () => {
                 </template>
               </Expansion>
               <Expansion default-opened>
-                <template #header>{{ $t('report.sale.bySale') }}</template>
+                <template #header>
+                  <div class="flex full-width items-center">
+                    {{ $t('report.sale.bySale') }}
+                    <SaveButton
+                      style="margin-left: auto"
+                      :icon="'material-symbols:download'"
+                      :label="$t('general.download')"
+                      @click.stop="reportStore.downloadReportSale('by-sale')"
+                    />
+                  </div>
+                </template>
                 <template #main>
                   <TableReport
                     :row="
diff --git a/src/stores/report/index.ts b/src/stores/report/index.ts
index c82cabaa..7bddfdf9 100644
--- a/src/stores/report/index.ts
+++ b/src/stores/report/index.ts
@@ -74,6 +74,15 @@ export async function getReportReceipt() {
   return null;
 }
 
+export async function downloadReportSale(
+  category: 'by-product-group' | 'by-sale' | 'by-customer',
+) {
+  await _download(
+    baseUrl + '/' + ENDPOINT + '/sale/' + category + '/download',
+    'sale-' + category + '-report',
+  );
+}
+
 export async function getReportSale() {
   const res = await api.get<ReportSale>(`/${ENDPOINT}/sale`);
 
@@ -133,6 +142,7 @@ export const useReportStore = defineStore('report-store', () => {
     getReportInvoice,
     downloadReportReceipt,
     getReportReceipt,
+    downloadReportSale,
     getReportSale,
     downloadReportProduct,
     getReportProduct,