perf: optimize pdf load (#827)
Co-authored-by: sealday <sealday@gmail.com> Reviewed-on: daoyoucloud/tachybase#827
This commit is contained in:
parent
39447504ec
commit
6bb7e40f7a
6
.changeset/real-rocks-shout.md
Normal file
6
.changeset/real-rocks-shout.md
Normal file
@ -0,0 +1,6 @@
|
||||
---
|
||||
"@hera/plugin-rental": patch
|
||||
"@hera/plugin-core": patch
|
||||
---
|
||||
|
||||
perf
|
@ -39,10 +39,15 @@ export const PDFViewer = forwardRef<PDFViewerRef, PDFViewerProps>((props, ref) =
|
||||
const [numPages, setNumPages] = useState<number>(0);
|
||||
const [contentWindow, setContentWindow] = useState<Window>(null);
|
||||
const { file, width = 960 } = props;
|
||||
const { loading, data, run } = useRequest({
|
||||
const { loading, data } = useRequest(
|
||||
{
|
||||
url: file,
|
||||
responseType: 'arraybuffer',
|
||||
});
|
||||
},
|
||||
{
|
||||
refreshDeps: [file],
|
||||
},
|
||||
);
|
||||
useImperativeHandle(ref, () => ({
|
||||
download() {
|
||||
const blob = new Blob([data as ArrayBuffer], { type: 'application/pdf' });
|
||||
@ -52,9 +57,6 @@ export const PDFViewer = forwardRef<PDFViewerRef, PDFViewerProps>((props, ref) =
|
||||
contentWindow.print();
|
||||
},
|
||||
}));
|
||||
useEffect(() => {
|
||||
run();
|
||||
}, [file]);
|
||||
useEffect(() => {
|
||||
if (loading || !data) {
|
||||
return;
|
||||
@ -74,15 +76,14 @@ export const PDFViewer = forwardRef<PDFViewerRef, PDFViewerProps>((props, ref) =
|
||||
document.body.removeChild(iframe);
|
||||
};
|
||||
}, [data, loading]);
|
||||
console.log('width', width);
|
||||
|
||||
return (
|
||||
<LoadingSpin spinning={loading}>
|
||||
<Document
|
||||
options={options}
|
||||
file={data as ArrayBuffer}
|
||||
loading={(props) => (
|
||||
<LoadingSpin {...props} spinning={true}>
|
||||
loading={() => (
|
||||
<LoadingSpin spinning={true}>
|
||||
<div style={{ height: '100vh' }}></div>
|
||||
</LoadingSpin>
|
||||
)}
|
||||
|
@ -1,5 +1,5 @@
|
||||
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';
|
||||
|
||||
export const PdfIsDoubleContext = createContext({
|
||||
@ -35,7 +35,11 @@ export const useRecordPdfPath = () => {
|
||||
const { isDouble } = useContext(PdfIsDoubleContext);
|
||||
const { settingType } = useContext(PdfIsLoadContext);
|
||||
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) => {
|
||||
|
@ -4,6 +4,9 @@ import { Inject, Action, Controller, Db } from '@nocobase/utils';
|
||||
import { renderIt } from '../pdf-documents/settlements-document';
|
||||
import { SettlementService } from '../services/settlement-service';
|
||||
import { QueryTypes } from 'sequelize';
|
||||
import { Cache } from '@nocobase/cache';
|
||||
import getStream from 'get-stream';
|
||||
import { stringify } from 'flatted';
|
||||
|
||||
@Controller('settlements')
|
||||
export class SettlementController {
|
||||
@ -54,8 +57,25 @@ export class SettlementController {
|
||||
});
|
||||
const utcOffset = ctx.get('X-Timezone');
|
||||
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')
|
||||
|
Loading…
Reference in New Issue
Block a user