uni-app中使用onlyoffice报DocsApi is not defined

Question

uni-app中使用onlyoffice报DocsApi is not defined

<template>
    <div id="monitorOffice"></div>
</template>
<script>
    import { handleDocType } from '@/common/util.js'
    export default {
        data() {
            return { doctype: '', DocEditor: null,script:null }
        },
        onLoad(e) {
            let head = document.getElementsByTagName('head')[0]
            let script = document.createElement('script')
            script.type = 'text/javascript'
            script.src = 'http://ip:port/web-apps/apps/api/documents/api.js'
            head.appendChild(script)

            if (this.DocEditor !== null) {
                this.DocEditor.destroyEditor()
            }
            let filePath = JSON.parse(e.item).filePath
            let fileType = filePath.substring(filePath.lastIndexOf('.') + 1)
            let config = {
                'editorConfig': {
                    'lang': 'zh',
                    'mode': 'view',
                    'region': 'zh_CN',
                    'customization': {
                        'chat': false,
                        'comments': false,
                        'zoom': 150,
                    },
                },
                'document': {
                    'fileType': handleDocType(fileType),
                    'key': filePath,
                    'title': '体检报告',
                    'url': filePath
                },
                'documentType': handleDocType(fileType),
                'events': {
                    onError: function(event) {
                        console.log('改文件不支持在线查看')
                    }
                },
                width: '100%',
                height: '100%',
            }
            let docsEditor = new DocsApi.DocEditor('monitorOffice', config)
        },
        methods: {}

    }
</script>

代码编译的时候报错：

[system]ReferenceError: DocsApi is not defined
    at VueComponent.onLoad (webpack-internal:///ppe8:48:22)
    at invokeWithErrorHandling (http://localhost:8080/static/js/chunk-vendors.js:3275:26)
    at VueComponent.push.4UNb.Vue.__call_hook (http://localhost:8080/static/js/chunk-vendors.js:10023:17)
    at r (http://localhost:8080/static/js/chunk-vendors.js:13559:369161)
    at a (http://localhost:8080/static/js/chunk-vendors.js:13559:369739)
    at VueComponent.created (http://localhost:8080/static/js/chunk-vendors.js:13559:9092)
    at invokeWithErrorHandling (http://localhost:8080/static/js/chunk-vendors.js:3275:57)
    at callHook (http://localhost:8080/static/js/chunk-vendors.js:5681:7)
    at VueComponent.Vue._init (http://localhost:8080/static/js/chunk-vendors.js:6466:23)
    at new VueComponent (http://localhost:8080/static/js/chunk-vendors.js:6612:12)

遇到这种情况改怎么处理呢

Answer 1

引入对应的 js文件了吗

Answer 2

别异步加载 script 吧，为什么不直接import呢？
你这是DocsApi没找到定义，也就是你 new 的时候script没加载完，
试试

setTimeOut(()=>{
            let docsEditor = new DocsApi.DocEditor('monitorOffice', config)
},10000)

我记得跟百度地图一样，还有设置个global变量，不然 script 引入的 class 是找不到的

Answer 3

博主最后解决了嘛

Answer 4

博主解决了吗？我也遇到这样的问题，怎么搞都不行