文档阅读器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可以获取用户正在浏览的页码