文档阅读器Web-SDK开发指南
更新时间:2019-06-14
请确保下述前提条件已准备就绪:
- 上传文档并确保文档已转码成功后,通过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支持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可以获取用户正在浏览的页码 | 否 |