vue.js 查看百度文库文档

Posted 2021-03-24 我非日葵却也向阳

<template>
    <div> <div id="reader"></div> </div>

</template>

<script>
　　//doc.js文件地址 http://static.bcedocument.com/reader/v2/doc_reader_v2.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