在线预览ofd文件(ofd.js的使用和遇到的相关问题)

数科:www.ofd.cn/onlinePrevi… 可以在线预览的网页 能解决电脑里没有插件预览ofd的情况

开源包: ofd.js

import React, { useEffect, useRef, useState } from 'react';
import { parseOfdDocument, renderOfd } from 'ofd.js';
import '../index.less';
import { Spin, Typography } from '@arco-design/web-react';

export default ({ url, screenWidth = 800 }) => {
    const ofdContiner = useRef<any>(null);
    const [loading, setLoading] = useState(true);
    const [error,setError] = useState(false)

    useEffect(() => {
        parseOfdDocument({
            ofd:url.replace(/^https?:/, window.location.protocol),
            success: async res => {
                const divs = await renderOfd(screenWidth, res[0]);
                const contentDiv = ofdContiner.current;
                contentDiv.innerHTML = '';
                divs.forEach(div => {
                    contentDiv.appendChild(div);
                });
                setLoading(false);
            },
            fail(error) {
                console.log(error);
                setLoading(false);
                setError(true)
            },
        });
    }, []);

    return (
        <Spin loading={loading} style={{ width: '100%' }}>
            {error?<Typography.Title heading={4} style={{textAlign:'center'}}>加载失败</Typography.Title>:<div ref={ofdContiner} className='ofd-continer' />}
        </Spin>
    );
};

目前已发现的问题:

问题	原因	解决方式
部分文件打开预览没有报错但是显示空白	不可预览用其他格式转换过来的ofd文件	无法解决,只能控制上传源
部分文件打开预览丢失公章,如图1,蓝色的区域本来有章的	没有找到确切的原因,但是据观察,只有增值税类型的电子发票无法显示签章,全电的可以. 所以猜测是ofd暂不支持增值税类型的签章显示,后续有最新紧张再来同步	无法解决,只能控制上传源

图1: