react项目里js实现数据预览及下载

定义参数

// 打印功能参数
    const [printData, setPrintData] = useState([])
    const [printGroupData, setPrintGroupData] = useState([])
定义页面宽度,根据页面宽度赋值表单的宽
let screenWidth = document.documentElement.scrollWidth || body.scrollWidth

定义打印的每一列数据

const printCol = [
        { key: 'number', name: '序号', },
        { key: 'customer_name', name: '客户名称', },
        { key: 'name', name: '项目名称', },
        { key: 'category_name', name: '品类', },
        { key: 'fabric_sn', name: '面料编号', },
        { key: 'composition', name: '面料成分', },
        { key: 'quantity', name: '件数', },
        { key: 'size', name: '尺码', },
        { key: 'style_describe', name: '款式描述', },
        { key: 'technic_describe', name: '工艺要求', },
        { key: 'fabric_fee', name: '面料费', },
        { key: 'process_fee', name: '加工费', },
        { key: 'clothes_fee', name: '成衣费', },
        { key: 'delivery', name: '交期', },
        { key: 'remark', name: '备注', },
        { key: 'image', name: '图片', },
    ];

创建打印数据

const createPrintData = (data) => {
        let printArr = []
        data.forEach((item, index) => {
            const colData = {};
            printCol.forEach(j => {
                colData[j.key] = item[j.key];
            })
            colData.number = index + 1;
            colData.state = GOG_STATE[colData.state];
            printArr.push(colData)
        });
        setPrintData(printArr)
        setPrintGroupData([printArr])
    }

创建表单标题

const createTitle = (title) => (
        <table style={{ width: screenWidth }}>
            <tbody style={styleObj.title}>
                <tr><th colSpan="10">{title}</th></tr>
            </tbody>
        </table>
    )

创建表单头部信息

const createHeader = (headerData) => {
        headerData = [
            { l: '日期', value: `${searchData[0]}至${searchData[1]}`, },
            { l: '报表时间', value: getNowTime(), }
        ];
        return (
            <table style={{ width: screenWidth, marginTop: 20 }}>
                <tbody style={styleObj.header}>
                    <tr>
                        {headerData.map((d, i) => <Fragment key={i}><th colSpan="3" style={{ textAlign: "right" }}>{d.l}:</th>
                            <th colSpan="3" style={{ textAlign: "left" }}>{d.value}
                            </th></Fragment>)}
                    </tr>
                </tbody>
            </table>
        )
    }

antd的upload组件显示图片

 const dealData = (item) => {
        let arr = [];
        for (let i in item) {
            let obj = {}, uid = i, name = item[i].name, type = item[i].file_type,
                url = proxy + item[i].path, path = item[i].path;
            obj.uid = uid, obj.name = name, obj.type = type, obj.status = 'done', obj.url = url, obj.path = path;
            arr.push(obj);
        }
        return arr;
    }
    const printImage = (data) => {
        const fileList = data != null ? dealData(stringToJsonArr(data)) : [];
        const props = {
            showUploadList: {
                showPreviewIcon: true,
                showRemoveIcon: false,
            }
        }
        return <Upload
            disabled={true}
            listType="picture"
            {...props}
            fileList={fileList}
        > </Upload>
    }

创建表单

const createForm = (printCol, printList) => (
        <table style={styleObj.printTable} style={{ width: screenWidth, marginTop: 10 }}>
            <tbody >
                {
                    (
                        <tr style={styleObj.printTableTr}>
                            {printCol.map((item, i) => <th key={i} style={{ ...styleObj[item.key], ...styleObj.printTableTtable }}><div>{item.name}</div></th>)}
                        </tr>
                    )
                }
                {
                    printList.map((item, i) => (
                        <tr key={i} style={styleObj.printTableTr}>
                            {Object.keys(item).map(m =>
                                <th key={m} style={styleObj.printTableTh}>{m == 'image' ?
                                    printImage(item[m])
                                    : item[m]
                                }</th>
                            )}
                        </tr>
                    ))

                }
            </tbody>
        </table >
    )

打印方法

   const handlePrint = () => {
        const win = window.open('', 'printwindow');
        win.document.write(window.document.getElementById('printArea').innerHTML);
        win.print();
        win.close();
    }

创建打印的全部内容

 const createPrintArea = (printCol) => {
        return (
            printGroupData.map((item, index) => {
                if (item.length) {
                    return (
                        <div style={styleObj.printArea} key={index} style={{ width: printArea }}>
                            {createTitle(form.data_type == 1 ? '样品信息报表' : '业务详情报表')}
                            {createHeader()}
                            {createForm(printCol, item)}
                        </div>
                    )
                }
            })
        )
    }

return 返回

<div id='printArea'>
                        <div style={styleObj.printArea}>
                            {printCol.length && printData.length > 0 ? createPrintArea(printCol) : null}
                        </div>
                    </div>