利用antd添加文件预览

Posted 2023-04-27

参考技术A import styles from './style.scss'; // 自定义样式，文件名称不可修改

import Button, Upload, Modal, Alert from 'antd';

import React, Children, cloneElement, isValidElement, useState, useEffect, useRef from 'react';

import axios from 'axios'

const Previewer = ( url, onClose, isEditing, onEditSave ) =>

    return (

        <Modal className=styles.modalshow title=isEditing ? "文档编辑" : "文档预览" visible width=1200 onCancel=onClose footer=

            isEditing ? [

                <Button key="back" onClick=onClose>

                    返回

                </Button>,

                <Button key="submit" type="primary" onClick=onEditSave>

                    提交

                </Button >

            ] : null >

            <iframe src=url title='wps' width='100%' height='592' />

        </Modal >

    )



const mapDOMTree = (children, matchChild) =>

    if (typeof children === 'function') return null

    return Children.map(children, (child) =>

        if (!child) return null;

        if (matchChild(child)) return matchChild(child);

        return isValidElement(child) ? cloneElement(child, child.props, mapDOMTree(child.props.children, matchChild)) : child;

    );

;

const baseUrl2 = getUrl('/contract/api/xft-contract-procode/object/v1/attachments/service/create-uri-by-id');

function CUpload( onPreview, onEdit, onEditSave, children, showDownloadIcon = true, showRemoveIcon = true, showEditButton = true, showPreviewIcon = true, ...rest )

    const [visible, setVisible] = useState(false)

    const [url, setUrl] = useState()

    const [editing, setEditing] = useState(false)

    const toggle = () =>

        setVisible(prevVisible => !prevVisible)

   

    const onPreviewFile = async (file) =>

        const previerUrl = await onPreview?.(file)

        setUrl(previerUrl)

        toggle()

   

    const onEditFile = async (file) =>

        const previerUrl = await onEdit?.(file)

        setUrl(previerUrl)

        setEditing(true)

        toggle()

   

    const handleUpload = files =>

        return

            fileName: files.name,

            fileType: files.type

       

   

    const onClose = () =>

        setEditing(false)

        toggle()

   

    const downloadd = (file) =>

        axios.post(`$baseUrl2?id=$file.id `)

            .then(res =>

                let data = res.data.data;

                download(data.tempUri, data.fileName)

           

            ).catch((error) =>

                Modal.showServeError(error);

            )

   

    const download = (url, fileName) =>

        // for IE

        // if (window.navigator.msSaveOrOpenBlob)

        //     window.navigator.msSaveOrOpenBlob(url, fileName);

        // else

        const link = document.createElement('a');

        link.style.display = 'none';

        link.href = url;

        link.download = fileName;

        // document.body.appendChild(link);

        link.click();

        // window.URL.revokeObjectURL(link.href);

        link.remove();

        //

    ;

    const editClose = async () =>

        await onEditSave()

        onClose()

   

    const baseUrl = getUrl('contract/api/xft-contract-procode/object/v1/attachments')

    return (

        <>

            <Upload

                ...rest

                maxCount=1

                data=handleUpload

                accept='application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/msword'

                action=baseUrl

                showUploadList=

                    showDownloadIcon,

                    showRemoveIcon,

               

                onDownload=downloadd

                itemRender=(originNode, file) =>

                    if (originNode.type !== 'div' || !showPreviewIcon) return originNode;

                    return mapDOMTree(originNode, (children) =>

                        if (children.key === 'download-delete')

                            return cloneElement(

                                children,

                                children.props,

                                <>

                                    <Button

                                        type="text"

                                        size="small"

                                        onClick=() => onPreviewFile(file)

                                        className="ant-upload-list-item-card-actions-btn"

                                        icon=<EyeOutlined />

                                        title="Preview File"

                                    />

                                    showEditButton && <Button

                                        type="text"

                                        size="small"

                                        onClick=() => onEditFile(file)

                                        className="ant-upload-list-item-card-actions-btn"

                                        icon=<EditOutlined />

                                        title="Edit File"

                                    />

                                    children.props.children

                                </>,

                            );

                       

                        return false;

                    );

               

            >children</Upload>

            visible && <Previewer url=url onClose=onClose isEditing=editing onEditSave=editClose />

        </>

    );

;

export default function UploadButton(props)

    const setValue, id, mingzi, formItemValue, setPrinstineValue, isEdit = props;

    const [list, setList] = useState([]);

    const editingRef = useRef(false);

    console.log('props--', props)

    useEffect(() =>

        if (formItemValue?.fileId)

            setList([ ...formItemValue, name: formItemValue?.fileName, id: formItemValue?.fileId, status: 'done' ])

       

    , [formItemValue])

    const onChange = (info) =>

        console.log('info---', info);

        if (info.file.status === 'done')

            setValue( [id]: info.file.response.data.data, [mingzi]: info.fileList[0].name );

       

        if (info.file.status === 'removed')

            setPrinstineValue(undefined);

            setValue(undefined)

       

        setList(info.fileList)

   

    const onPreview = (e) =>

        editingRef.current = false

        return Http.get('/contract/api/xft-contract-procode/common/v1/preview?attachId=' + e.fileId).then(res => res.data.data.data).catch((error) =>

            Modal.showServeError(error);

        )

   

    const onEdit = (e) =>

        editingRef.current = true

        return Http.get(`/contract/api/xft-contract-procode/contract/v1/institution/file/onlineEdit?attachId=$props.formItemValue?.fileId&id=$props.data.__super.id`).then(

            res => res.data.data.data).catch((error) =>

                Modal.showServeError(error);

            )

   

    const onEditSave = () =>

        if (editingRef.current)

            editingRef.current = false

            return Http.get(`/contract/api/xft-contract-procode/common/v1/complete/fileEdit/$props.formItemValue?.fileId`)

       

   

    const uploadButton = <Button>上传</Button>

    return (

        <CUpload

            onPreview=onPreview

            onEdit=onEdit

            onEditSave=onEditSave

            onChange=onChange

            fileList=list

            showRemoveIcon=isEdit

            showEditButton=isEdit

        >

            list.length >= 1 ? null : uploadButton

        </CUpload>

    )

vue前端利用ofd.js实现ofd类型在线预览

国家正在推行办公文档的OFD格式。 简单来说，OFD是我们国家自主定制，PDF是美国公司制定。 目前OFD主要是在政府机关使用，不能直接打开文件，需要专业的OFD阅读器。 ofd.js实现ofd文件的预览功能 ofd.js是github上的一个开源项目JavaScript工具包。地址：https:/