2024-12-05 15:44:26 +00:00
<!DOCTYPE html> < html class = "default" lang = "en" data-base = "." > < head > < meta charset = "utf-8" / > < meta http-equiv = "x-ua-compatible" content = "IE=edge" / > < title > docx< / title > < meta name = "description" content = "Documentation for docx" / > < meta name = "viewport" content = "width=device-width, initial-scale=1" / > < link rel = "stylesheet" href = "assets/style.css" / > < link rel = "stylesheet" href = "assets/highlight.css" / > < script defer src = "assets/main.js" > < / script > < script async src = "assets/icons.js" id = "tsd-icons-script" > < / script > < script async src = "assets/search.js" id = "tsd-search-script" > < / script > < script async src = "assets/navigation.js" id = "tsd-nav-script" > < / script > < script async src = "assets/hierarchy.js" id = "tsd-hierarchy-script" > < / script > < / head > < body > < script > document . documentElement . dataset . theme = localStorage . getItem ( "tsd-theme" ) || "os" ; document . body . style . display = "none" ; setTimeout ( ( ) => app ? app . showPage ( ) : document . body . style . removeProperty ( "display" ) , 500 ) < / script > < header class = "tsd-page-toolbar" > < div class = "tsd-toolbar-contents container" > < div class = "table-cell" id = "tsd-search" > < div class = "field" > < label for = "tsd-search-field" class = "tsd-widget tsd-toolbar-icon search no-caption" > < svg width = "16" height = "16" viewBox = "0 0 16 16" fill = "none" > < use href = "assets/icons.svg#icon-search" > < / use > < / svg > < / label > < input type = "text" id = "tsd-search-field" aria-label = "Search" / > < / div > < div class = "field" > < div id = "tsd-toolbar-links" > < / div > < / div > < ul class = "results" > < li class = "state loading" > Preparing search index...< / li > < li class = "state failure" > The search index is not available< / li > < / ul > < a href = "index.html" class = "title" > docx< / a > < / div > < div class = "table-cell" id = "tsd-widgets" > < a href = "#" class = "tsd-widget tsd-toolbar-icon menu no-caption" data-toggle = "menu" aria-label = "Menu" > < svg width = "16" height = "16" viewBox = "0 0 16 16" fill = "none" > < use href = "assets/icons.svg#icon-menu" > < / use > < / svg > < / a > < / div > < / div > < / header > < div class = "container container-main" > < div class = "col-content" > < div class = "tsd-page-title" > < h1 > docx< / h1 > < / div > < div class = "tsd-panel tsd-typography" > < p align = "center" >
2024-10-14 23:43:47 +00:00
< img src = "media/logo-animate.svg" width = "100%" height = "300" alt = "clippy the assistant" >
2021-09-30 02:17:43 +00:00
< / p >
< p align = "center" >
2023-06-12 19:08:34 +00:00
Easily generate and modify .docx files with JS/TS. Works for Node and on the Browser.
2021-09-30 02:17:43 +00:00
< / p >
< hr >
2025-01-10 11:25:15 +00:00
< p > < a href = "https://npmjs.org/package/docx" > < img src = "https://badge.fury.io/js/docx.svg" alt = "NPM version" > < / a >
< a href = "https://npmjs.org/package/docx" > < img src = "https://img.shields.io/npm/dm/docx.svg" alt = "Downloads per month" > < / a >
< a href = "https://github.com/dolanmiu/docx/actions" > < img src = "https://github.com/dolanmiu/docx/workflows/Default/badge.svg" alt = "GitHub Action Workflow Status" > < / a >
< a href = "https://snyk.io/test/github/dolanmiu/docx" > < img src = "https://snyk.io/test/github/dolanmiu/docx/badge.svg" alt = "Known Vulnerabilities" > < / a >
< a href = "http://makeapullrequest.com" > < img src = "https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt = "PRs Welcome" > < / a >
2025-02-23 19:37:36 +00:00
< a href = "https://codecov.io/gh/dolanmiu/docx" > < img src = "https://codecov.io/gh/dolanmiu/docx/branch/master/graph/badge.svg" alt = "codecov" > < / a >
< a href = "https://docxjs-editor.vercel.app/" > < img src = "https://img.shields.io/badge/Docx.js%20Editor-2b579a.svg?style=flat&logo=javascript&logoColor=white" alt = "Docx.js Editor" > < / a > < / p >
2021-09-30 02:17:43 +00:00
< p align = "center" >
< img src = "https://i.imgur.com/QeL1HuU.png" alt = "drawing" / >
< / p >
2024-12-05 15:44:26 +00:00
< a id = "demo" class = "tsd-anchor" > < / a > < h1 class = "tsd-anchor-link" > Demo< a href = "#demo" aria-label = "Permalink" class = "tsd-anchor-icon" > < svg viewBox = "0 0 24 24" > < use href = "assets/icons.svg#icon-anchor" > < / use > < / svg > < / a > < / h1 > < a id = "browser" class = "tsd-anchor" > < / a > < h2 class = "tsd-anchor-link" > Browser< a href = "#browser" aria-label = "Permalink" class = "tsd-anchor-icon" > < svg viewBox = "0 0 24 24" > < use href = "assets/icons.svg#icon-anchor" > < / use > < / svg > < / a > < / h2 > < p > Here are examples of < code > docx< / code > being used with basic < code > HTML/JS< / code > in a browser environment:< / p >
2021-09-30 02:17:43 +00:00
< ul >
2025-01-10 11:25:15 +00:00
< li > < a href = "https://codepen.io/dolanmiu/pen/RwNeObg" > https://codepen.io/dolanmiu/pen/RwNeObg< / a > < / li >
< li > < a href = "https://jsfiddle.net/dolanmiu/onadx1gu/" > https://jsfiddle.net/dolanmiu/onadx1gu/< / a > < / li >
2021-09-30 02:17:43 +00:00
< / ul >
2022-11-29 19:31:04 +00:00
< p > Here are examples of < code > docx< / code > working in < code > Angular< / code > :< / p >
2021-09-30 02:17:43 +00:00
< ul >
2025-01-10 11:25:15 +00:00
< li > < a href = "https://stackblitz.com/edit/angular-docx" > https://stackblitz.com/edit/angular-docx< / a > < / li >
< li > < a href = "https://stackblitz.com/edit/angular-wmd6k3" > https://stackblitz.com/edit/angular-wmd6k3< / a > < / li >
2021-09-30 02:17:43 +00:00
< / ul >
2022-11-29 19:31:04 +00:00
< p > Here are examples of < code > docx< / code > working in < code > React< / code > :< / p >
2021-09-30 02:17:43 +00:00
< ul >
2025-01-10 11:25:15 +00:00
< li > < a href = "https://stackblitz.com/edit/react-docx" > https://stackblitz.com/edit/react-docx< / a > < / li >
< li > < a href = "https://stackblitz.com/edit/react-docx-images" > https://stackblitz.com/edit/react-docx-images< / a > (adding images to Word Document)< / li >
2021-09-30 02:17:43 +00:00
< / ul >
< p > Here is an example of < code > docx< / code > working in < code > Vue.js< / code > :< / p >
< ul >
2025-01-10 11:25:15 +00:00
< li > < a href = "https://stackblitz.com/edit/vuejs-docx" > https://stackblitz.com/edit/vuejs-docx< / a > < / li >
2021-09-30 02:17:43 +00:00
< / ul >
2024-12-05 15:44:26 +00:00
< a id = "node" class = "tsd-anchor" > < / a > < h2 class = "tsd-anchor-link" > Node< a href = "#node" aria-label = "Permalink" class = "tsd-anchor-icon" > < svg viewBox = "0 0 24 24" > < use href = "assets/icons.svg#icon-anchor" > < / use > < / svg > < / a > < / h2 > < p > Press < code > endpoint< / code > on the < code > RunKit< / code > website:< / p >
2021-09-30 02:17:43 +00:00
< p > < img src = "https://user-images.githubusercontent.com/2917613/38582539-f84311b6-3d07-11e8-90db-5885ae02c3c4.png" alt = "RunKit Instructions" > < / p >
< ul >
2025-01-10 11:25:15 +00:00
< li > < a href = "https://runkit.com/dolanmiu/docx-demo1" > https://runkit.com/dolanmiu/docx-demo1< / a > - Simple paragraph and text< / li >
< li > < a href = "https://runkit.com/dolanmiu/docx-demo2" > https://runkit.com/dolanmiu/docx-demo2< / a > - Advanced Paragraphs and text< / li >
< li > < a href = "https://runkit.com/dolanmiu/docx-demo3" > https://runkit.com/dolanmiu/docx-demo3< / a > - Bullet points< / li >
< li > < a href = "https://runkit.com/dolanmiu/docx-demo4" > https://runkit.com/dolanmiu/docx-demo4< / a > - Simple table< / li >
< li > < a href = "https://runkit.com/dolanmiu/docx-demo5" > https://runkit.com/dolanmiu/docx-demo5< / a > - Images< / li >
< li > < a href = "https://runkit.com/dolanmiu/docx-demo6" > https://runkit.com/dolanmiu/docx-demo6< / a > - Margins< / li >
< li > < a href = "https://runkit.com/dolanmiu/docx-demo7" > https://runkit.com/dolanmiu/docx-demo7< / a > - Landscape< / li >
< li > < a href = "https://runkit.com/dolanmiu/docx-demo8" > https://runkit.com/dolanmiu/docx-demo8< / a > - Header and Footer< / li >
< li > < a href = "https://runkit.com/dolanmiu/docx-demo10" > https://runkit.com/dolanmiu/docx-demo10< / a > - < strong > My CV generated with docx< / strong > < / li >
2021-09-30 02:17:43 +00:00
< / ul >
2025-01-10 11:25:15 +00:00
< p > More < a href = "https://github.com/dolanmiu/docx/tree/master/demo" > here< / a > < / p >
< a id = "how-to-use--documentation" class = "tsd-anchor" > < / a > < h1 class = "tsd-anchor-link" > How to use & Documentation< a href = "#how-to-use--documentation" aria-label = "Permalink" class = "tsd-anchor-icon" > < svg viewBox = "0 0 24 24" > < use href = "assets/icons.svg#icon-anchor" > < / use > < / svg > < / a > < / h1 > < p > Please refer to the < a href = "https://docx.js.org/" > documentation at https://docx.js.org/< / a > for details on how to use this library, examples and much more!< / p >
2025-02-23 19:37:36 +00:00
< a id = "playground" class = "tsd-anchor" > < / a > < h1 class = "tsd-anchor-link" > Playground< a href = "#playground" aria-label = "Permalink" class = "tsd-anchor-icon" > < svg viewBox = "0 0 24 24" > < use href = "assets/icons.svg#icon-anchor" > < / use > < / svg > < / a > < / h1 > < p > Experience < code > docx< / code > in action through < a href = "https://docxjs-editor.vercel.app/" > Docx.js Editor< / a > , an interactive playground where you can code and preview the results in real-time.< / p >
2025-01-10 11:25:15 +00:00
< a id = "examples" class = "tsd-anchor" > < / a > < h1 class = "tsd-anchor-link" > Examples< a href = "#examples" aria-label = "Permalink" class = "tsd-anchor-icon" > < svg viewBox = "0 0 24 24" > < use href = "assets/icons.svg#icon-anchor" > < / use > < / svg > < / a > < / h1 > < p > Check the < a href = "https://github.com/dolanmiu/docx/tree/master/demo" > demo folder< / a > for examples.< / p >
< a id = "contributing" class = "tsd-anchor" > < / a > < h1 class = "tsd-anchor-link" > Contributing< a href = "#contributing" aria-label = "Permalink" class = "tsd-anchor-icon" > < svg viewBox = "0 0 24 24" > < use href = "assets/icons.svg#icon-anchor" > < / use > < / svg > < / a > < / h1 > < p > Read the contribution guidelines < a href = "https://docx.js.org/#/contribution-guidelines" > here< / a > .< / p >
< a id = "used-by" class = "tsd-anchor" > < / a > < h1 class = "tsd-anchor-link" > Used by< a href = "#used-by" aria-label = "Permalink" class = "tsd-anchor-icon" > < svg viewBox = "0 0 24 24" > < use href = "assets/icons.svg#icon-anchor" > < / use > < / svg > < / a > < / h1 > < p > < a href = "https://hfour.com/" > < img src = "https://i.imgur.com/zy5qWmI.png" alt = "drawing" height = "50" / > < / a >
< a href = "https://fuzzproductions.com/" > < img src = "https://i.imgur.com/OYP5tgS.png" alt = "drawing" height = "50" / > < / a >
< a href = "https://www.mettzer.com/" > < img src = "https://i.imgur.com/zUDMfZ3.png" alt = "drawing" height = "50" / > < / a >
< a href = "https://www.wisedoc.net/" > < img src = "https://i.imgur.com/wtNB1uq.png" alt = "drawing" height = "50" / > < / a >
< a href = "https://www.dabblewriter.com/" > < img src = "https://i.imgur.com/suiH2zc.png" alt = "drawing" height = "50" / > < / a >
< a href = "https://turbopatent.com/" > < img src = "https://i.imgur.com/1LjuK2M.png" alt = "drawing" height = "50" / > < / a >
< a href = "http://www.madisoncres.com/" > < img src = "https://i.imgur.com/dHMg0wF.gif" alt = "drawing" height = "50" / > < / a >
< a href = "https://www.beekast.com/" > < img src = "https://i.imgur.com/QEZXU5b.png" alt = "drawing" height = "50" / > < / a >
< a href = "https://herraizsoto.com/" > < img src = "https://i.imgur.com/XVU6aoi.png" alt = "drawing" height = "50" / > < / a >
< a href = "http://www.ativer.com.br/" > < img src = "https://i.imgur.com/fn1xccG.png" alt = "drawing" height = "50" / > < / a >
< a href = "https://www.arity.co/" > < img src = "https://i.imgur.com/cmykN7c.png" alt = "drawing" / > < / a >
< a href = "https://www.circadianrisk.com/" > < img src = "https://i.imgur.com/PXo25um.png" alt = "drawing" height = "50" / > < / a >
< a href = "https://lexense.com/" > < img src = "https://i.imgur.com/AKGhtlh.png" alt = "drawing" / > < / a >
< a href = "https://novelpad.co/" > < img src = "https://i.imgur.com/9tqJaHw.png" alt = "drawing" height = "50" / > < / a >
< a href = "https://proton.me/" > < img src = "https://i.imgur.com/5bLKFeP.png" alt = "drawing" height = "50" / > < / a > < / p >
2021-09-30 02:17:43 +00:00
< p > ...and many more!< / p >
< hr >
2025-01-10 11:25:15 +00:00
< p > < a href = "https://www.patreon.com/dolanmiu" > < img src = "https://user-images.githubusercontent.com/2917613/51251459-4e880480-1991-11e9-92bf-38b96675a9e2.png" alt = "patreon" > < / a >
< a href = "https://www.browserstack.com" > < img src = "https://user-images.githubusercontent.com/2917613/54233552-128e9d00-4505-11e9-88fb-025a4e04007c.png" alt = "browserstack" > < / a > < / p >
2021-09-30 02:17:43 +00:00
< p > Made with 💖< / p >
2025-02-23 19:37:36 +00:00
< / div > < / div > < div class = "col-sidebar" > < div class = "page-menu" > < div class = "tsd-navigation settings" > < details class = "tsd-accordion" > < summary class = "tsd-accordion-summary" > < h3 > < svg width = "20" height = "20" viewBox = "0 0 24 24" fill = "none" > < use href = "assets/icons.svg#icon-chevronDown" > < / use > < / svg > Settings< / h3 > < / summary > < div class = "tsd-accordion-details" > < div class = "tsd-filter-visibility" > < span class = "settings-label" > Member Visibility< / span > < ul id = "tsd-filter-options" > < li class = "tsd-filter-item" > < label class = "tsd-filter-input" > < input type = "checkbox" id = "tsd-filter-inherited" name = "inherited" checked / > < svg width = "32" height = "32" viewBox = "0 0 32 32" aria-hidden = "true" > < rect class = "tsd-checkbox-background" width = "30" height = "30" x = "1" y = "1" rx = "6" fill = "none" > < / rect > < path class = "tsd-checkbox-checkmark" d = "M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke = "none" stroke-width = "3.5" stroke-linejoin = "round" fill = "none" > < / path > < / svg > < span > Inherited< / span > < / label > < / li > < li class = "tsd-filter-item" > < label class = "tsd-filter-input" > < input type = "checkbox" id = "tsd-filter-external" name = "external" / > < svg width = "32" height = "32" viewBox = "0 0 32 32" aria-hidden = "true" > < rect class = "tsd-checkbox-background" width = "30" height = "30" x = "1" y = "1" rx = "6" fill = "none" > < / rect > < path class = "tsd-checkbox-checkmark" d = "M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke = "none" stroke-width = "3.5" stroke-linejoin = "round" fill = "none" > < / path > < / svg > < span > External< / span > < / label > < / li > < / ul > < / div > < div class = "tsd-theme-toggle" > < label class = "settings-label" for = "tsd-theme" > Theme< / label > < select id = "tsd-theme" > < option value = "os" > OS< / option > < option value = "light" > Light< / option > < option value = "dark" > Dark< / option > < / select > < / div > < / div > < / details > < / div > < details open class = "tsd-accordion tsd-page-navigation" > < summary class = "tsd-accordion-summary" > < h3 > < svg width = "20" height = "20" viewBox = "0 0 24 24" fill = "none" > < use href = "assets/icons.svg#icon-chevronDown" > < / use > < / svg > On This Page< / h3 > < / summary > < div class = "tsd-accordion-details" > < a href = "#demo" > < span > Demo< / span > < / a > < ul > < li > < a href = "#browser" > < span > Browser< / span > < / a > < / li > < li > < a href = "#node" > < span > Node< / span > < / a > < / li > < / ul > < a href = "#how-to-use--documentation" > < span > How to use & < wbr / > Documentation< / span > < / a > < a href = "#playground" > < span > Playground< / span > < / a > < a href = "#examples" > < span > Examples< / span > < / a > < a href = "#contributing" > < span > Contributing< / span > < / a > < a href = "#used-by" > < span > Used by< / span > < / a > < / div > < / details > < / div > < div class = "site-menu" > < nav class = "tsd-navigation" > < a href = "modules.html" > docx< / a > < ul class = "tsd-small-nested-navigation" id = "tsd-nav-container" > < li > Loading...< / li > < / ul > < / nav > < / div > < / div > < / div > < footer > < p class = "tsd-generator" > Generated using < a href = "https://typedoc.org/" target = "_blank" > TypeDoc< / a > < / p > < / footer > < div class = "overlay" > < / div > < / body > < / html >
