File size: 2,773 Bytes
ebf2bde 8dff6d9 ebf2bde 8dff6d9 ebf2bde 8dff6d9 ebf2bde 8dff6d9 ebf2bde 8dff6d9 ebf2bde 8dff6d9 ebf2bde 8dff6d9 ebf2bde 8dff6d9 ebf2bde 8dff6d9 ebf2bde |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
import jsPreviewExcel from '@js-preview/excel';
import axios from 'axios';
import mammoth from 'mammoth';
import { useCallback, useEffect, useRef, useState } from 'react';
export const useCatchError = (api: string) => {
const [error, setError] = useState('');
const fetchDocument = useCallback(async () => {
const ret = await axios.get(api);
const { data } = ret;
if (!(data instanceof ArrayBuffer) && data.retcode !== 0) {
setError(data.retmsg);
}
return ret;
}, [api]);
useEffect(() => {
fetchDocument();
}, [fetchDocument]);
return { fetchDocument, error };
};
export const useFetchDocument = () => {
const fetchDocument = useCallback(async (api: string) => {
const ret = await axios.get(api, { responseType: 'arraybuffer' });
return ret;
}, []);
return { fetchDocument };
};
export const useFetchExcel = (filePath: string) => {
const [status, setStatus] = useState(true);
const { fetchDocument } = useFetchDocument();
const containerRef = useRef<HTMLDivElement>(null);
const { error } = useCatchError(filePath);
const fetchDocumentAsync = useCallback(async () => {
let myExcelPreviewer;
if (containerRef.current) {
myExcelPreviewer = jsPreviewExcel.init(containerRef.current);
}
const jsonFile = await fetchDocument(filePath);
myExcelPreviewer
?.preview(jsonFile.data)
.then(() => {
console.log('succeed');
setStatus(true);
})
.catch((e) => {
console.warn('failed', e);
myExcelPreviewer.destroy();
setStatus(false);
});
}, [filePath, fetchDocument]);
useEffect(() => {
fetchDocumentAsync();
}, [fetchDocumentAsync]);
return { status, containerRef, error };
};
export const useFetchDocx = (filePath: string) => {
const [succeed, setSucceed] = useState(true);
const { fetchDocument } = useFetchDocument();
const containerRef = useRef<HTMLDivElement>(null);
const { error } = useCatchError(filePath);
const fetchDocumentAsync = useCallback(async () => {
const jsonFile = await fetchDocument(filePath);
mammoth
.convertToHtml(
{ arrayBuffer: jsonFile.data },
{ includeDefaultStyleMap: true },
)
.then((result) => {
setSucceed(true);
const docEl = document.createElement('div');
docEl.className = 'document-container';
docEl.innerHTML = result.value;
const container = containerRef.current;
if (container) {
container.innerHTML = docEl.outerHTML;
}
})
.catch(() => {
setSucceed(false);
});
}, [filePath, fetchDocument]);
useEffect(() => {
fetchDocumentAsync();
}, [fetchDocumentAsync]);
return { succeed, containerRef, error };
};
|