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

更新时间：2019-06-14

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

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

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

Plain Text

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

DOC 阅读器Web SDK支持HTTP和HTTPS两种协议类型。为了提升数据的安全性，建议使用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

文档服务 DOC

文档服务 DOC

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