vue.js 查看百度文库文档

<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

原文地址：https://www.cnblogs.com/gmsmile/p/12017505.html