文档服务DOC

    文档阅读器Web-SDK开发指南

    请确保下述前提条件已准备就绪:

    • 上传文档并确保文档已转码成功后,通过API调用阅读文档接口或通过DOC Java SDK调用readDocument方法,获取docId,host,token三个变量。
    • Web Server搭建完成。

    文档阅读器将自动适配PC、WAP页面,将如下代码嵌入到HTML页面中,即可在打开HTML页面看到转码后的文档:

    <div id="reader"></div>
    <script src="http://static.bcedocument.com/reader/v2/doc_reader_v2.js"></script>
    <script>
    (function () {
        var option = {
            docId: 'doc-gkjraanw4f89uu5',
            token: 'TOKEN',
            host: 'BCEDOC',
    		serverHost: 'http://doc.bj.baidubce.com',
            width: 600, //文档容器宽度
    		zoom: false,              //是否显示放大缩小按钮
    		zoomStepWidth:200,
            pn: 3,  //定位到第几页,可选
            ready: function (handler) {  // 设置字体大小和颜色, 背景颜色(可设置白天黑夜模式)
                handler.setFontSize(1);
                handler.setBackgroundColor('#000');
                handler.setFontColor('#fff');
            },
            flip: function (data) {    // 翻页时回调函数, 可供客户进行统计等
                console.log(data.pn);
            },
            fontSize:'big',
            toolbarConf: {
                    page: true, //上下翻页箭头图标
                    pagenum: true, //几分之几页
                    full: false, //是否显示全屏图标,点击后全屏
                    copy: true, //是否可以复制文档内容
                    position: 'center',// 设置 toolbar中翻页和放大图标的位置(值有left/center)
            } //文档顶部工具条配置对象,必选
        };
        new Document('reader', option);
    })();
    </script>

    DOC 阅读器Web SDK支持HTTPHTTPS两种协议类型。为了提升数据的安全性,建议使用HTTPS协议。采用HTTPS 协议时,需要注意下列差异:

    • 指定阅读器路径 <script src="https://static.bcedocument.com/reader/v2/doc_reader_v2.js"></script>
    • DOC 服务域名serverHost: 'https://doc.bj.baidubce.com'

    在线预览示例如下:

    点击查看在线预览效果

    Document类接收两个参数:

    • div容器的id
    • 指定的option

    option参数说明见下表:

    注意:toolbarConf相关参数只在PC页面生效,fontSize只在WAP页面生效。

    参数 类型 说明 是否必选
    docId String readDocument接口返回的docId的值
    token String readDocument接口返回的token的值
    host String readDocument接口返回的host的值
    serverHost String 指定 DOC 服务域名
    width Number 指定阅读器的宽度。单位:像素。最小值500
    toolbarConf Object PC页面设置工具栏
    +page Boolean 是否在PC页面工具栏指定上下翻页箭头图标。默认值:true
    +pagenum Boolean 是否在PC页面工具栏指定几分之几页。默认值:true
    +full Boolean 在PC页面工具栏指定是否显示全屏图标,点击后全屏。默认值:true
    +copy Boolean 在PC页面工具栏指定是否可以复制文档内容。默认值:true
    +position String 在PC页面工具栏位置。有效值:left、center,默认值:left
    zoom Boolean 是否显示放大缩小按键。默认值:true
    zoomStepWidth String 放大缩小按键之间的距离
    ready String 在文档加载完毕后的回调函数,根据handle句柄可以调用setFontSize/setBackgroundColor/setFontColor分别设置文档的字体大小/背景色/文字颜色。其中setFontSize取值为1,2
    flip String 翻页回调函数,用户在翻页时将触发该函数,通过data.pn可以获取用户正在浏览的页码
    上一篇
    简介
    下一篇
    阅读器iOS-SDK