parser_x_min.js

vue2.0 ofdview使用

npm 参考demo https://github.com/DLTech21/ofd-vue-demo

npm 安装

npm i ofd-view parser_x.js -S

在 main.js 中写入以下内容：

import OfdView from "ofd-view";
import 'ofd-view/lib/viewer.css'

Vue.use(OfdView);

vue3.0 ofdview使用

npm 参考demo https://github.com/DLTech21/ofd-vue3-demo

npm 安装

npm i ofdview-vue3 parser_x.js -S

在 main.ts 中写入以下内容：

import ofdview from 'ofdview-vue3';
import 'ofdview-vue3/viewer.css'

const setupAll = async () => {
    const app = createApp(App)
    app.use(ofdview);
    app.mount('#app')
}

react ofdview使用

参考demo https://github.com/DLTech21/ofd-view-react-demo

npm 安装

npm i ofd-view-react parser_x.js -S

import OfdView from "ofd-view-react";
const mem = require('parser_x');

 <OfdViewer file={this.state.file}
             mem={mem}
                />
或者
 <OfdViewer fileBase64={this.state.file}
             mem={mem}
                />

组件参数

参数	说明	是否必填
file	OFD文件。支持File、ArrayBuffer及url，与fileBase64二选一	是
fileBase64	OFD文件base64，与file二选一	是
mem	核心库，按demo方式	是
secret	核心库授权	否
digest	核心库授权密钥	否
sidebar-force-open	侧边栏默认打开	否
signature-viewer-force-check	侧边栏中的签名签章默认验签	否
water_text	水印内容	否
canOpen	是否允许通过按钮打开ofd文件，默认false	否
canDownload	是否允许通过按钮下载ofd文件，默认false	否
canPrint	是否允许通过按钮打印ofd文件，默认false	否
displayToolbar	是否显示操作栏，默认true	否

ofd html使用

参考demo在html.zip

主要代码及说明

function webViewerLoad() {
    const config = getViewerConfiguration(); // getViewerConfiguration方法主要是定义view上所有的div
    let img = new Image();
    img.style.position = 'absolute';
    img.style.left = 0;
    img.style.right = 0;
    img.style.margin = 'auto';
    img.style.top = 0;
    img.style.bottom = 0;
    img.src = 'data:image/gif;base64,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';
    img.draggable = false;
    config.loadingContainer = img
    config.parserOFDSuccess = function () { //解析ofd成功的回调
    }
    config.parserOFDFail = function (error) { //解析ofd失败的回调
        console.log(error)
    }
    config.downloadCallback = blob => { //需要重载下载事件的方法可以添加
        console.log(blob)
        let url = window.URL.createObjectURL(blob)
        let link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', '1.ofd')
        document.body.append(link)
        link.click()
    }
   
    config.signaturesCallback = res => { //获取ofd所有签章或签名列表的回调
        console.log(res)
    }
    config.secret = '' //库的授权码
    config.digest = '' //库的授权码
    parser_x.openOFDViewer(config) //库的初始化函数
}

window.onload = function () {
    webViewerLoad()
    parser_x.openOFD(getQueryVariable('file')) 
    //openOFD为打开ofd的方法，可以传入url及arraybuffer及blob
    //当需要打开的url地址带有header时，可以调用openOFDWithHeader(url, headers)
    //当需要打开base64的ofd文件，可以调用openFileBase64(base64)

}

function getQueryVariable(variable)
{
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i=0;i<vars.length;i++) {
        var pair = vars[i].split("=");
        if(pair[0] == variable){return pair[1];}
    }
    return(false);
}