mirror of
https://github.com/spbleadersofdigtal/frontend.git
synced 2024-11-10 21:16:32 +03:00
Добавил скачивание в pptx
This commit is contained in:
parent
4f2e22af03
commit
ca4ed6c676
35
src/api/deck/convert.ts
Normal file
35
src/api/deck/convert.ts
Normal 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
|
||||
});
|
||||
};
|
|
@ -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';
|
|
@ -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;
|
||||
}
|
|
@ -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'} />
|
||||
|
|
Loading…
Reference in New Issue
Block a user