所有文档

          文档服务 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