效果
注意
⚠️注意:
部分文件预览存在问题
依赖
bash
$ yarn add docx-preview
$ yarn add jszip
源码
ts
import './index.scss';
import {useRef} from 'react';
import type {UploadRequestOption} from 'rc-upload/lib/interface';
import {Upload, Button, message} from 'antd';
import JSZip from 'jszip';
import * as docx from 'docx-preview';
function PreviewDOCX() {
const containerRef = useRef<HTMLDivElement>(null);
const fileUpload = async (options: UploadRequestOption) => {
if ((options.file as File).name.split('.').pop()!.toLowerCase() !== 'docx') return message.error('仅支持docx文件!');
const zip = await JSZip.loadAsync(options.file as File);
const blob = await zip.generateAsync({type: 'blob'});
docx.renderAsync(blob, containerRef.current!)
.then(res => {
console.log(res);
})
.catch(err => {
console.log({err});
});
};
return (
<>
<Upload className="upload-btn" action="#" customRequest={fileUpload} showUploadList={false}>
<Button type="primary">点击上传</Button>
</Upload>
<div className="docx-preview-wrap" ref={containerRef}></div>
</>
);
}
export default PreviewDOCX;