qqsl-onlyoffice

This library was generated with Angular CLI version 15.2.0.

快速开始

Angular版本

当前支持的Angular版本 ^15.0.0

安装

$ npm install qqsl-onlyoffice --save

引入组件模块

最后你需要将想要使用的组件模块引入到你的 app.module.ts 文件和特性模块中。

以下面的 OnlyofficeEditorModule 模块为例，先引入组件模块：

import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import { OnlyofficeEditorModule } from "qqsl-onlyoffice/editor";

@NgModule({
  declarations: [AppComponent],
  imports: [OnlyofficeEditorModule],
})
export class AppModule {}

引入样式

使用全部组件样式

在 angular.json 中引入了

{
  "styles": [
    "node_modules/qqsl-onlyoffice/dist/styles/index.css"
  ]
}

然后在模板中使用：

<ngx-onlyoffice-editor></ngx-onlyoffice-editor>

Components

ngx-onlyoffice-editor

参数

| 参数名 | 类型 | 默认值 | 说明 | |:--------------------|:----------|:------------|:--------------------| | id | string | docEditor | 组件唯一标识符 | | documentServerUrl | string | "" | ONLYOFFICE 文档服务器的地址 | | config | IConfig | null | 配置 |

事件

| 事件名 | 类型 | 默认值 | 说明 | |:------------------|:---------------------|:----|:-------------| | onDocumentReady | EventEmitter<void> | - | 文档被加载到文档编辑器中 |

参数示例

// 配置
const iconConfig: BpIconConfig = {
    document: {
        /**
         * fileType 定义查看或编辑的源文档的文件类型。必须是小写。以下文件类型可用：
         * .csv、.djvu、.doc、.docm、.docx、.docxf、.dot、.dotm、.dotx、.epub、
         * .fb2、.fodp、.fods、.fodt、.htm、.html、.key、.mht、.numbers、.odp、
         * .ods、.odt、.oform、.otp、.ots、.ott、.oxps、.pages、.pdf、.pot、.potm、
         * .potx、.pps、.ppsm、.ppsx、.ppt、.pptm、.pptx、.rtf、.txt、 .xls、.xlsb、
         * .xlsm、.xlsx、.xlt、.xltm、.xltx、.xml、.xps.
         */
        fileType: 'docx',
        title: 'new.docx',
        /**
         * key 定义服务用来识别文档的唯一文档标识符。如果发送了已知key，则将从缓存中获取文档。
         * 每次编辑和保存文档时，都必须重新生成key。文档 url 可以用作 key，但不能使用特殊字符，长度限制为 128 个符号。
         * :::请注意， 对于连接到同一文档服务器的所有独立服务，密钥必须是唯一的。否则，服务可能会从编辑器缓存中打开其他人的文件。
         * 如果多个第三方集成商连接到同一文档服务器，他们也必须提供唯一的密钥。
         * 可以使用的关键字符： 0-9, a-z, A-Z, -._=。 最大密钥长度为 128 个字符。
         */
        key: '183.128.41.232new.docx31761121865340',
        /**
         * url 定义存储查看或编辑的源文档的绝对 URL。使用本地链接时请务必添加令牌。否则会出现错误。
         */
        url: 'https://qqsl-xn-cloud-public.oss-cn-hangzhou.aliyuncs.com/%E6%B9%9F%E4%B8%AD%E5%8C%BA%E9%87%8D%E7%82%B9%E5%8F%96%E7%94%A8%E6%B0%B4%E6%88%B7%E5%8F%96%E7%94%A8%E6%B0%B4%E9%87%8F%E6%9C%88%E6%8A%A5%E8%A1%A8%20(2).docx',
        // 文档权限部分允许更改要编辑和下载的文档的权限。
        permissions: {
            download: false,
        }
    },
    /**
     * documentType 定义要打开的文档类型：
     * word - 文本文档 (.doc, .docm, .docx, .dot, .dotm, .dotx, .epub, .fb2, .fodt, .htm, .html, .mht, .mhtml, .odt, .ott, .pages, .rtf, .stw, .sxw, .txt, .wps, .wpt, .xml);
     * cell - 电子表格 (.csv, .et, .ett, .fods, .numbers, .ods, .ots, .sxc, .xls, .xlsb, .xlsm, .xlsx, .xlt, .xltm, .xltx, .xml);
     * slide - 演示文稿 (.dps, .dpt, .fodp, .key, .odp, .otp, .pot, .potm, .potx, .pps, .ppsm, .ppsx, .ppt, .pptm, .pptx, .sxi);
     * pdf - 可移植文档格式 (.djvu, .docxf, .oform, .oxps, .pdf, .xps).
     * diagram - 图表文档（.vsdm, .vsdx, .vssm, .vssx, .vstm, .vstx).
     */
    documentType: "word",
    editorConfig: {
        /**
         * mode 
         * 编辑模式：edit
         * 预览模式：view
         */
        mode: 'edit',
        /**
         * callbackUrl 指定文档存储服务的绝对 URL（必须由在自己的服务器上使用 ONLYOFFICE 文档的软件集成商实施）。
         */
        callbackUrl: 'http://47.99.178.173:8080/example/track',
        user: {
            id: '1',
            name: '张三',
        },
    },
};