Добавил скачивание в pptx

src/api/deck/convert.ts

@@ -0,0 +1,35 @@
+import {axios} from '../../lib/axios';
+import {CONVERT_API_URL} from './urlKeys';
+import {MutationConfig} from '../../lib/react-query';
+import {useMutation} from '@tanstack/react-query';
+
+export type ConvertDTO = {
+  pdf: File;
+};
+
+export type ConvertResponse = {
+  pdf: string;
+  pptx: string;
+};
+
+export const convert = (data: ConvertDTO): Promise<ConvertResponse> => {
+  const inputData = new FormData();
+  inputData.append('pdf', data.pdf);
+
+  return axios.post(CONVERT_API_URL, inputData, {
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  });
+};
+
+type UseConvertOptions = {
+  config?: MutationConfig<typeof convert>;
+};
+
+export const useConvert = ({ config }: UseConvertOptions = {}) => {
+  return useMutation({
+    ...config,
+    mutationFn: convert
+  });
+};

src/api/deck/urlKeys.ts

@@ -8,4 +8,6 @@ export const QUESTION_PARAM_QUESTION_ID = 'questionId';
 export const QUESTION_API_URL = `/decks/question/:${FIRST_QUESTION_PARAM}/:${QUESTION_PARAM_QUESTION_ID}`;
 
 export const DECK_PARAM = 'deckId';
-export const DECK_API_URL = `/decks/question/:${FIRST_QUESTION_PARAM}/presentation`;
+export const DECK_API_URL = `/decks/question/:${FIRST_QUESTION_PARAM}/presentation`;
+
+export const CONVERT_API_URL = '/decks/pdf-to-pptx';

src/pages/deck/DeckPage.module.scss

@@ -3,6 +3,7 @@
 .DeckPage {
   position: relative;
   height: 100svh;
+  color: $color-text-dark;
 }
 
 .DeckPage__loader {
@@ -11,4 +12,12 @@
   position: absolute;
   top: calc(50% - 25px);
   left: calc(50% - 25px);
+}
+
+.DeckPage__link {
+  cursor: pointer;
+}
+
+.DeckPage__span {
+  font-size: 14px;
 }

src/pages/deck/DeckPage.tsx

@@ -1,15 +1,16 @@
 import {ReactFCC} from '../../utils/ReactFCC';
-import {PDFViewer} from '@react-pdf/renderer';
+import {PDFDownloadLink} from '@react-pdf/renderer';
 import {useUrlParam} from '../../hooks/useUrlParam';
 import {DECK_PAGE_PARAM} from '../../app/routes';
 import {MyDocument} from './document/Document';
 import {useDeck} from '../../api/deck/getDeck';
-import {useEffect, useRef, useState} from 'react';
+import {useCallback, useEffect, useRef, useState} from 'react';
 import {generateMarketChart} from './document/media/generateMarketChart';
 import {Loader} from '../../components/Loader';
 import s from './DeckPage.module.scss';
 import {generateFinancialChart} from './document/media/generateFinancialChart';
 import {generateGrowChart} from './document/media/generateGrowChart';
+import {useConvert} from '../../api/deck/convert';
 
 export const DeckPage: ReactFCC = () => {
   const deckId = useUrlParam(DECK_PAGE_PARAM, {parser: parseInt});
@@ -70,21 +71,58 @@ export const DeckPage: ReactFCC = () => {
     }, 3000);
   }, []);
 
+  const { mutateAsync: convert, isLoading } = useConvert();
+
+  const getPptxLink = useCallback(async (blob: Blob | null) => {
+    if (!blob || isLoading) {
+      return;
+    }
+
+    const file = new File([blob], "name", {
+      type: 'application/pdf'
+    });
+
+    const data = await convert({ pdf: file });
+
+    if (data.pptx) {
+      window.open(data.pptx,'_blank', 'noopener');
+    }
+  }, [convert, isLoading])
+
   return (
     <div className={s.DeckPage}>
       {!rendered && (
         <Loader className={s.DeckPage__loader} />
       )}
       {data && marketChart && financialChart && growChart ? (
-        <PDFViewer style={{ width: '100vw', height: '100vh' }}>
+        <PDFDownloadLink document={
           <MyDocument
             onRender={() => setRendered(true)}
             data={data}
             marketChart={marketChart}
             financialChart={financialChart}
             growChart={growChart}
-          />
+          />}
-        </PDFViewer>
+          fileName="somename.pdf">
+          {({ blob, url, error }) =>
+            <div style={{ color: 'black' }}>
+              <>
+                {error && `Ошибка: ${error}`}
+
+                {blob && (
+                  <>
+                    <div className={s.DeckPage__link} onClick={() => getPptxLink(blob)}>Скачать PPTX</div>
+                    {isLoading && <div className={s.DeckPage__span}>Загрузка...</div>}
+                  </>
+                )}
+
+                {url && (
+                  <iframe title={'pdf-viewer'} src={url!} style={{ width: '100vw', height: '100vh', border: 'none' }} />
+                )}
+              </>
+            </div>
+          }
+        </PDFDownloadLink>
       ) : (
         <div style={{ visibility: 'hidden' }}>
           <canvas id={'chart1'} />