Editar un DOCX en el navegador con JavaScript

Para editar un DOCX en el navegador con JavaScript, usa el plugin de editor de Doconda (@doconda/editor): un componente de React al que pasas el archivo, como enlace o como File. El usuario lo edita con un editor de Word completo y save() te devuelve el .docx editado. Todo pasa en su navegador: el archivo no se sube a ningún sitio para editarlo.

Pasos

Contrata el plugin en el panel (Facturación → Plugin de editor), con 7 días de prueba gratis. Ver licencia y dominios.
Instálalo con el comando del panel (necesita React 19 o superior):

npm install https://api.eu.doconda.com/v1/editor/package/edt_….tgz

Abre el archivo. Desde un enlace:

import { DocondaEditor } from "@doconda/editor"

export function Edit({ url }: { url: string }) {
  return (
    <div style={{ height: 700, display: "flex" }}>
      <DocondaEditor src={url} licenseKey="ek_eu_…" className="flex-1" />
    </div>
  )
}

O desde memoria, por ejemplo el File de un <input type="file"> (también vale un Blob, ArrayBuffer o Uint8Array):

<DocondaEditor file={selectedFile} licenseKey="ek_eu_…" />

Pide el archivo editado con una ref:

import { useRef } from "react"
import { DocondaEditor, type EditorHandle } from "@doconda/editor"

const editor = useRef<EditorHandle>(null)

<DocondaEditor ref={editor} src={url} licenseKey="ek_eu_…" />

const file = await editor.current!.save()   // un File (.docx, .pptx, .xlsx o .pdf)

El archivo se llama como el original (o como diga fileName). La ref también trae bytes() (los bytes, sin envolver en File), focus() e isDirty() (si hay cambios sin guardar).

Envíalo a tu servidor:

// En el navegador: el archivo va a tu servidor
const body = new FormData()
body.append("file", await editor.current!.save())
await fetch(`/api/documents/${id}/versions`, { method: "POST", body })

Eventos útiles

Propiedad	Qué hace
`onReady`	El archivo se ha abierto
`onError`	No se pudo abrir (o `editor_unlicensed`, sin licencia)
`onChange`	Cada vez que cambia algo
`onSave`	Ctrl/Cmd+S (y `autosave`), con los bytes del archivo
`onDirtyChange`	Hay cambios sin guardar (`true`) o ya se guardaron (`false`)

Qué se puede editar

Texto y estilos de párrafo, fuentes, colores, listas, tablas, imágenes, formas, enlaces, columnas, encabezado y pie, notas al pie, comentarios, índice, buscar y reemplazar, e imprimir o guardar como PDF. Lo que el editor no toca se guarda tal cual.

Preguntas frecuentes

¿Se sube el documento a algún servidor para editarlo?

No. Se edita en el navegador del usuario. Solo sale de ahí si tú lo envías, por ejemplo desde onSave.

¿Puedo usarlo sin React?

No: es un componente de React y necesita React 19 o superior.

¿Y si el enlace necesita autenticación?

Pasa requestInit, que va tal cual a fetch: por ejemplo, requestInit={{ headers: { Authorization: `Bearer ${token}` } }}.

¿Puedo guardarlo como versión nueva en Doconda?

Sí, desde tu servidor con POST /documents/{id}/versions. Ver plugin de editor: guardar.

Empezar

Guías

Casos de uso

Editar un DOCX en el navegador con JavaScript

Pasos

Eventos útiles

Qué se puede editar

Preguntas frecuentes

Sigue leyendo

​Pasos

​Eventos útiles

​Qué se puede editar

​Preguntas frecuentes

​Sigue leyendo

Pasos

Eventos útiles

Qué se puede editar

Preguntas frecuentes

Sigue leyendo