前端修改onlyoffice边框线

Question

前端使用onlyoffice在线查看word,原来的word里面的表格是[无框线]状态,要求在在线查看的时候将表格显示出边框线

Answer 1

引用 皆我百晓生 小程序回复内容作答：
要在onlyoffice在线查看Word文档时将表格的边框线显示出来，你可以使用OnlyOffice的JavaScript API来实现。具体步骤如下：

1. 首先，在你的前端页面中引入OnlyOffice的JavaScript API库。你可以通过CDN或者下载到本地引入库文件。

<script src="https://cdn.onlyoffice.com/sdkjs/onlyoffice.js"></script>

1. 在页面加载完成后，初始化OnlyOffice编辑器。你需要创建一个div元素作为编辑器的容器，并指定文档的URL。

<div id="documentEditor"></div>

<script>
    var documentEditor = new DocsAPI.DocEditor("documentEditor", {
        "document": {
            "fileType": "docx",
            "url": "path/to/your/document.docx"
        }
    });
</script>

1. 使用OnlyOffice的文档编辑API来修改表格的边框线。你可以通过getSelection方法获取文档的当前选择部分，然后使用tables属性来获取所有的表格，并通过setBorders方法来设置表格的边框样式。

<script>
    documentEditor.api.docCanvas.selection.get(function (tableSelection) {
        var tables = tableSelection.tables;
        tables.forEach(function (table) {
            table.setBorders({
                inside: {
                    style: "single",
                    width: 1,
                    color: "#000000"
                },
                outside: {
                    style: "single",
                    width: 1,
                    color: "#000000"
                }
            });
        });
    });
</script>

1. 最后，在需要显示边框线的表格的事件上触发修改边框线的代码。例如，在按钮的点击事件中调用上述代码。

<button onclick="setTableBorders()">显示边框线</button>

<script>
    function setTableBorders() {
        documentEditor.api.docCanvas.selection.get(function (tableSelection) {
            var tables = tableSelection.tables;
            tables.forEach(function (table) {
                table.setBorders({
                    inside: {
                        style: "single",
                        width: 1,
                        color: "#000000"
                    },
                    outside: {
                        style: "single",
                        width: 1,
                        color: "#000000"
                    }
                });
            });
        });
    }
</script>

这样，当点击"显示边框线"按钮时，表格的边框线将会显示出来。

请注意，OnlyOffice的JavaScript API库是一个商业产品，你可能需要购买许可证才能使用它。