ofd.js - npm explorer

vue2.0 ofdview使用

$3



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使用



$3



$3



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使用



$3



$3



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



import OfdView from "ofd-view-react";

const mem = require('parser_x');



              mem={mem}

                />

或者

              mem={mem}

                />





$3



| 参数        | 说明                                          | 是否必填 |

|-----------|---------------------------------------------|------|

| 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使用



$3



$3



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        var pair = vars[i].split("=");

        if(pair[0] == variable){return pair[1];}

    }

    return(false);

}

vue2.0 ofdview使用

$3



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使用



$3



$3



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使用



$3



$3



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



import OfdView from "ofd-view-react";

const mem = require('parser_x');



              mem={mem}

                />

或者

              mem={mem}

                />





$3



| 参数        | 说明                                          | 是否必填 |

|-----------|---------------------------------------------|------|

| 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使用



$3



$3



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        var pair = vars[i].split("=");

        if(pair[0] == variable){return pair[1];}

    }

    return(false);

}