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);
}