perf: optimize pdf load (#827)

Co-authored-by: sealday <sealday@gmail.com>
Reviewed-on: daoyoucloud/tachybase#827
This commit is contained in:
sealday 2024-04-24 03:29:59 +08:00
parent 39447504ec
commit 6bb7e40f7a
4 changed files with 45 additions and 14 deletions

View File

@ -0,0 +1,6 @@
---
"@hera/plugin-rental": patch
"@hera/plugin-core": patch
---
perf

View File

@ -39,10 +39,15 @@ export const PDFViewer = forwardRef<PDFViewerRef, PDFViewerProps>((props, ref) =
const [numPages, setNumPages] = useState<number>(0); const [numPages, setNumPages] = useState<number>(0);
const [contentWindow, setContentWindow] = useState<Window>(null); const [contentWindow, setContentWindow] = useState<Window>(null);
const { file, width = 960 } = props; const { file, width = 960 } = props;
const { loading, data, run } = useRequest({ const { loading, data } = useRequest(
{
url: file, url: file,
responseType: 'arraybuffer', responseType: 'arraybuffer',
}); },
{
refreshDeps: [file],
},
);
useImperativeHandle(ref, () => ({ useImperativeHandle(ref, () => ({
download() { download() {
const blob = new Blob([data as ArrayBuffer], { type: 'application/pdf' }); const blob = new Blob([data as ArrayBuffer], { type: 'application/pdf' });
@ -52,9 +57,6 @@ export const PDFViewer = forwardRef<PDFViewerRef, PDFViewerProps>((props, ref) =
contentWindow.print(); contentWindow.print();
}, },
})); }));
useEffect(() => {
run();
}, [file]);
useEffect(() => { useEffect(() => {
if (loading || !data) { if (loading || !data) {
return; return;
@ -74,15 +76,14 @@ export const PDFViewer = forwardRef<PDFViewerRef, PDFViewerProps>((props, ref) =
document.body.removeChild(iframe); document.body.removeChild(iframe);
}; };
}, [data, loading]); }, [data, loading]);
console.log('width', width);
return ( return (
<LoadingSpin spinning={loading}> <LoadingSpin spinning={loading}>
<Document <Document
options={options} options={options}
file={data as ArrayBuffer} file={data as ArrayBuffer}
loading={(props) => ( loading={() => (
<LoadingSpin {...props} spinning={true}> <LoadingSpin spinning={true}>
<div style={{ height: '100vh' }}></div> <div style={{ height: '100vh' }}></div>
</LoadingSpin> </LoadingSpin>
)} )}

View File

@ -1,5 +1,5 @@
import { useRecord } from '@nocobase/client'; import { useRecord } from '@nocobase/client';
import React, { createContext, useContext, useState } from 'react'; import React, { createContext, useContext, useMemo, useState } from 'react';
import { SettlementStyleContext } from '../schema-initializer/actions/SettlementStyleSwitchActionInitializer'; import { SettlementStyleContext } from '../schema-initializer/actions/SettlementStyleSwitchActionInitializer';
export const PdfIsDoubleContext = createContext({ export const PdfIsDoubleContext = createContext({
@ -35,7 +35,11 @@ export const useRecordPdfPath = () => {
const { isDouble } = useContext(PdfIsDoubleContext); const { isDouble } = useContext(PdfIsDoubleContext);
const { settingType } = useContext(PdfIsLoadContext); const { settingType } = useContext(PdfIsLoadContext);
const { margingTop } = useContext(PdfMargingTopContext); const { margingTop } = useContext(PdfMargingTopContext);
return `/records:pdf?recordId=${record.id}&isDouble=${isDouble}&settingType=${settingType}&margingTop=${margingTop}`; const path = useMemo(
() => `/records:pdf?recordId=${record.id}&isDouble=${isDouble}&settingType=${settingType}&margingTop=${margingTop}`,
[record.id, isDouble, settingType, margingTop],
);
return path;
}; };
export const WaybillsProvider = (props) => { export const WaybillsProvider = (props) => {

View File

@ -4,6 +4,9 @@ import { Inject, Action, Controller, Db } from '@nocobase/utils';
import { renderIt } from '../pdf-documents/settlements-document'; import { renderIt } from '../pdf-documents/settlements-document';
import { SettlementService } from '../services/settlement-service'; import { SettlementService } from '../services/settlement-service';
import { QueryTypes } from 'sequelize'; import { QueryTypes } from 'sequelize';
import { Cache } from '@nocobase/cache';
import getStream from 'get-stream';
import { stringify } from 'flatted';
@Controller('settlements') @Controller('settlements')
export class SettlementController { export class SettlementController {
@ -54,8 +57,25 @@ export class SettlementController {
}); });
const utcOffset = ctx.get('X-Timezone'); const utcOffset = ctx.get('X-Timezone');
const { calc, contracts } = await this.settlmentService.settlement(settlement as any, utcOffset); const { calc, contracts } = await this.settlmentService.settlement(settlement as any, utcOffset);
const pdf = await renderIt({ calc, contracts, result: systemSetting });
ctx.body = pdf; const cache = ctx.app.cacheManager.getCache('@hera/plugin-rental') as Cache;
const key = stringify({ calc, contracts, result: systemSetting });
const result = await cache.get(key);
if (result) {
if (Buffer.isBuffer(result)) {
ctx.body = result;
} else {
ctx.body = Buffer.from(result.data);
}
} else {
const buf = await getStream.buffer(
// @ts-ignore
await renderIt({ calc, contracts, result: systemSetting }),
);
ctx.body = buf;
await cache.set(key, buf);
}
} }
@Action('excel') @Action('excel')