OFD文件预览

知行_行知
211 阅读2分钟

一、 OFD是什么

OFD(Open Fixed-layout Document，意为开放式版式文档)，是中国电子技术标准化研究院制定的版式文档国家标准。是中国的自主格式，也是国家正在推行的电子办公文档标准，对标美制版式PDF。OFD具有格式独立、版面固定、固化呈现等特质，同时相对于PDF版式文件，OFD具有更安全可靠，因为文件读取需要通过版式转换。 目前OFD主要是国家机关或者国企央企在使用，特别是航班电子发票。OFD文件不能直接打开，需要专门的OFD阅读器。

二、OFD文件的预览

  1. 考虑原生的、标签，看标签介绍原本以为可以支持，只是兼容性差，实测发现不支持。

  2. ofd.js实现ofd文件的预览

    按照文档安装

    3. npm install ofd.js
import {parseOfdDocument, renderOfd} from "ofd.js";

    用法查看文档，实际使用时从import那步开始会报错，用ai搜或者掘金等搜解决方案，都是互相抄袭，对于解决问题没有用处（也可能是我哪里使用的不对）。

    1. 使用cafe-ofd插件预览
    npm install cafe-ofd --save
    
    
import cafeOfd from 'cafe-ofd';
import 'cafe-ofd/package/index.css';
Vue.use(cafeOfd)
    
<cafe-ofd ref="ofd" :filePath="filePath" @on-success="handleOfdSuccess" @on-error="handleOfdError" />

    在开发环境使用预览正常，兼容性强；在测试环境容易出现读取文件时卡进度条的情况，问题尚未排查，后期有空时补上。 ps：新增火车票电子发票ofd格式读不出来

    1. 使用iframe， 把文件放在外部URL上
        <iframe :src="`https://ofd.xdocin.com/view?src=${encodeURIComponent(filePath)}`" width="100%"
                height="500px" frameborder="0" style="border: 1px solid #eee; border-radius: 10px;"></iframe>

    这个方案预览正常，兼容性也很强，但是因为是放在第三方的URL上，安全性未知。

    1. 使用ofd-viewer.js预览

      按照文档安装插件会报错（npm库没有这个插件），可以查找压缩包（压缩包20多M，挺大的），解压放到CDN上 使用

      zip包下载地址：gitcode.com/open-source…

        <iframe :src="`${CDNUrl}?file=${filePath}`" width="100%"
                height="500px" frameborder="0" style="border: 1px solid #eee; border-radius: 10px;"></iframe>

    预览正常，兼容性也还可以。

    1. 使用lm-ofdpreview插件预览

      这是一个ts插件，如果项目是vue2的，需要修改一下配置

      使用时如下

        npm install lm-ofdpreview --save
    
    <div id="container"></div>
    
    import { parseOfdDocument, renderOfd, setPageScale } from 'lm-ofdpreview'
    
    parseOfdDocument({
        ofd: this.filePath,
        success(res) {
            const ofdDoc = Array.isArray(res) ? res[0] : res
            const width = document.getElementById('container')?.clientWidth
            const pages = renderOfd(width, ofdDoc)
            const root = document.getElementById('container')
            root.innerHTML = ''
            pages.forEach(p => root.appendChild(p))
            console.log(res);

        },
        fail(err) { console.error(err) },
    })

    文档中提供了两种使用方式，另一种通过import jsPreviewOfd from 'lm-ofdpreview' 的方式使用时会报插件内部的错误。

    这种方式能预览，兼容性尚可，会偶发性出现的ofd文件除公章外的内容是黑白的情况。 ps：新增火车票电子发票ofd格式读不出来

    以上几种预览方案是使用的vue2项目测试的，都验证过。

avatar
文章
阅读
粉丝