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

This commit is contained in:
Pavel Torbeev 2023-08-27 10:59:41 +03:00
parent 4f2e22af03
commit ca4ed6c676
4 changed files with 90 additions and 6 deletions

35
src/api/deck/convert.ts Normal file
View File

@ -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
});
};

View File

@ -9,3 +9,5 @@ export const QUESTION_API_URL = `/decks/question/:${FIRST_QUESTION_PARAM}/:${QUE
export const DECK_PARAM = 'deckId';
export const DECK_API_URL = `/decks/question/:${FIRST_QUESTION_PARAM}/presentation`;
export const CONVERT_API_URL = '/decks/pdf-to-pptx';

View File

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

View File

@ -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'} />