标签：

<template>
<div> <div></div> </div>

</template> <script>
　　//doc.js文件地址 import doc from ‘../../libs/doc‘;
export default {
data(){
　　　　　　return{
　　　　　　　　loading:false
　　　　　　}　　　　　　
　　　　　},
created() {
this.getInfo(this.$route.query.id); },
methods:{
getInfo(id){
this.loading = true;
this.$api.recommend.show(id).then(result =>{
if(result.success){
let textId =result.result.content.id;
　　　　　　　　　　　　　　　　//获取到文档id 请求接口获取docId，host，，token三个变量　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　this.$api.recommend.getDoc(textId).then(res =>{
// console.log(res);
this.getDocInfo(res.result);
this.loading = false;
});

}
})
},

getDocInfo(result){
var option = {
docId: result.documentId,
token: result.token,
host: result.host,
serverHost: ‘https://doc.bj.baidubce.com‘,
width: document.documentElement.clientWidth, //文档容器宽度
zoom: false, //是否显示放大缩小按钮
zoomStepWidth:200,
pn:1, //定位到第几页，可选
ready: function (handler) { // 设置字体大小和颜色, 背景颜色（可设置白天黑夜模式）
handler.setFontSize(1);
handler.setBackgroundColor(‘#fff‘);
handler.setFontColor(‘#000‘);
},
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);
}
},
destroyed() {

}

}
</script>
百度文库 文档阅读器Web-SDK开发指南 详细解说 https://cloud.baidu.com/doc/DOC/s/sjwvypuzh

vue.js 查看百度文库文档