Merge branch 'master' of https://github.com/dolanmiu/docx into feat/floating-images
# Conflicts: # src/file/drawing/drawing.ts
This commit is contained in:
@ -29,6 +29,7 @@ import * as docx from "docx";
|
||||
## Basic Usage
|
||||
|
||||
```js
|
||||
var fs = require("fs");
|
||||
var docx = require("docx");
|
||||
|
||||
// Create document
|
||||
@ -41,11 +42,12 @@ paragraph.addRun(new docx.TextRun("Lorem Ipsum Foo Bar"));
|
||||
doc.addParagraph(paragraph);
|
||||
|
||||
// Used to export the file into a .docx file
|
||||
var exporter = new docx.LocalPacker(doc);
|
||||
var packer = new docx.Packer();
|
||||
packer.toBuffer(doc).then((buffer) => {
|
||||
fs.writeFileSync("My First Document.docx", buffer);
|
||||
});
|
||||
|
||||
exporter.pack("My First Document");
|
||||
|
||||
// Done! A file called 'My First Document.docx' will be in your file system if you used LocalPacker
|
||||
// Done! A file called 'My First Document.docx' will be in your file system.
|
||||
```
|
||||
|
||||
## Honoured Mentions
|
||||
|
@ -12,7 +12,7 @@
|
||||
|
||||
## Always think about the user
|
||||
|
||||
The number one pillar for contribution is to **ALWAYS** think about how the user will use the library.
|
||||
The number one pillar for contribution to `docx` is to **ALWAYS** think about how the user will use `docx`.
|
||||
|
||||
Put yourself in their position, and imagine how they would feel about your feature you wrote.
|
||||
|
||||
@ -37,13 +37,13 @@ Unesesary coment removed // Make sure to use correct spelling
|
||||
|
||||
## No leaky components in API interface
|
||||
|
||||
This mainly applies to the API the end user will consume.
|
||||
> This mainly applies to the API the end user will consume.
|
||||
|
||||
Try to make method parameters accept primatives, or `json` objects, so that child components are created **inside** the component, rather than being **injected** in.
|
||||
Try to make method parameters of the outside API accept primatives, or `json` objects, so that child components are created **inside** the component, rather than being **injected** in.
|
||||
|
||||
This is so that:
|
||||
|
||||
1. Imports are much cleaner, no need for:
|
||||
1. Imports are much cleaner for the end user, no need for:
|
||||
```js
|
||||
import { ChildComponent } from "./my-feature/sub-component/deeper/.../my-deep.component";
|
||||
```
|
||||
@ -52,13 +52,17 @@ This is so that:
|
||||
3. It means the end user does not need to import and create the child component to be injected.
|
||||
|
||||
**Do not**
|
||||
`TableFloatProperties` is a class. The outside world would have to construct the object, and inject it in
|
||||
|
||||
`TableFloatProperties` is a class. The outside world would have to `new` up the object, and inject it in like so:
|
||||
|
||||
```js
|
||||
public float(tableFloatProperties: TableFloatProperties): Table
|
||||
```
|
||||
|
||||
**Do**
|
||||
`ITableFloatOptions` is an interface for a JSON of primatives.
|
||||
|
||||
`ITableFloatOptions` is an interface for a JSON of primatives. The end user would need to pass in a json object and not need to worry about the internals:
|
||||
|
||||
```js
|
||||
public float(tableFloatOptions: ITableFloatOptions): Table
|
||||
```
|
||||
@ -76,7 +80,8 @@ This is just a guideline, and the rules can sometimes be broken.
|
||||
}
|
||||
```
|
||||
|
||||
* Use `add` if you add the element into the method as a parameter:
|
||||
* Use `add` if you add the element into the method as a parameter.
|
||||
*Note:* This may look like its breaking the previous guideline, but it has semantically different meanings. The previous one is using data to construct an object, whereas this one is simply adding elements into the document:
|
||||
|
||||
```js
|
||||
public addParagraph(paragraph: Paragraph) {
|
||||
|
@ -158,7 +158,8 @@ _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo15.ts_
|
||||
|
||||
## Sections
|
||||
|
||||
Example of how sections work. Sections allow multiple headers and footers, and `landscape`/`portrait` inside the same document
|
||||
Example of how sections work. Sections allow multiple headers and footers, and `landscape`/`portrait` inside the same document.
|
||||
Also you can have different page number formats and starts for different sections.
|
||||
|
||||
[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo16.ts ":include")
|
||||
|
||||
|
@ -25,6 +25,7 @@
|
||||
<script src="//unpkg.com/docsify/lib/plugins/emoji.min.js"></script>
|
||||
<script src="https://unpkg.com/docsify-copy-code@2"></script>
|
||||
<script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
|
||||
<script src="//unpkg.com/prismjs/components/prism-typescript.min.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
@ -5,7 +5,7 @@
|
||||
To create a new document, it is very easy:
|
||||
|
||||
```js
|
||||
var doc = new docx.Document();
|
||||
const doc = new docx.Document();
|
||||
```
|
||||
|
||||
## Document properties
|
||||
@ -13,7 +13,7 @@ var doc = new docx.Document();
|
||||
You can add properties to the Word document by specifying options, for example:
|
||||
|
||||
```js
|
||||
var doc = new docx.Document({
|
||||
const doc = new docx.Document({
|
||||
creator: "Dolan Miu",
|
||||
description: "My extremely interesting document",
|
||||
title: "My Document",
|
||||
@ -22,14 +22,18 @@ var doc = new docx.Document({
|
||||
|
||||
### Full list of options:
|
||||
|
||||
```
|
||||
creator
|
||||
description
|
||||
title
|
||||
subject
|
||||
keywords
|
||||
lastModifiedBy
|
||||
revision
|
||||
```
|
||||
|
||||
* creator
|
||||
* description
|
||||
* title
|
||||
* subject
|
||||
* keywords
|
||||
* lastModifiedBy
|
||||
* revision
|
||||
|
||||
You can mix and match whatever properties you want, or provide no properties.
|
||||
|
||||
### units for positioning
|
||||
|
||||
Various parts of the API require positioning arguments. The units are "20ths of a point" from the [OOXML](http://officeopenxml.com/index.php) specification.
|
||||
See [Lars Corneliussen's blog post](https://startbigthinksmall.wordpress.com/2010/01/04/points-inches-and-emus-measuring-units-in-office-open-xml/) for more information and how to convert units.
|
@ -37,8 +37,12 @@ Also all the supported section properties are implemented according to: http://o
|
||||
|
||||
// Add new section with another header and footer
|
||||
doc.addSection({
|
||||
headerId: header.Header.ReferenceId,
|
||||
footerId: footer.Footer.ReferenceId,
|
||||
headers: {
|
||||
default: header
|
||||
},
|
||||
footers: {
|
||||
default: footer
|
||||
},
|
||||
pageNumberStart: 1,
|
||||
pageNumberFormatType: docx.PageNumberFormat.DECIMAL,
|
||||
});
|
||||
|
@ -14,7 +14,7 @@ const name = new TextRun("Name:")
|
||||
## Available methods
|
||||
|
||||
* For run formatting:
|
||||
* `.bold()`, `.italic()`, `.smallCaps()`, `.allCaps()`, `.strike()`, `.doubleStrike()`, `.subScript()`, `.superScript()`: Set the formatting property to true
|
||||
* `.bold()`, `.italics()`, `.smallCaps()`, `.allCaps()`, `.strike()`, `.doubleStrike()`, `.subScript()`, `.superScript()`: Set the formatting property to true
|
||||
* `.underline(style="single", color=null)`: Set the underline style and color
|
||||
* `.color(color)`: Set the text color, using 6 hex characters for RRGGBB (no leading `#`)
|
||||
* `.size(halfPts)`: Set the font size, measured in half-points
|
||||
|
@ -2,7 +2,7 @@
|
||||
|
||||
> Tab stops are useful, if you are unclear of what they are, [here is a link explaining](https://en.wikipedia.org/wiki/Tab_stop). It enables side by side text which is nicely laid out without the need for tables, or constantly pressing space bar.
|
||||
|
||||
**Note**: At the moment, the unit of measurement for a tab stop is counter intuitive for a human. It is using OpenXMLs own measuring system. For example, 2268 roughly translates to 3cm. Therefore in the future, I may consider changing it to percentages or even cm.
|
||||
!> **Note**: At the moment, the unit of measurement for a tab stop is counter intuitive for a human. It is using OpenXMLs own measuring system. For example, 2268 roughly translates to 3cm. Therefore in the future, I may consider changing it to percentages or even cm.
|
||||
|
||||

|
||||
|
||||
|
154
docs/usage/tables.md
Normal file
154
docs/usage/tables.md
Normal file
@ -0,0 +1,154 @@
|
||||
# Tables
|
||||
|
||||
You can create tables with `docx`. More information can be found [here](http://officeopenxml.com/WPtable.php).
|
||||
|
||||
## Create Table
|
||||
|
||||
To create a table, simply use the `createTable()` method on a `document`.
|
||||
|
||||
```ts
|
||||
const table = doc.createTable([NUMBER OF ROWS], [NUMBER OF COLUMNS]);
|
||||
```
|
||||
|
||||
Alternatively, you can create a table object directly, and then add it in the `document`
|
||||
|
||||
```ts
|
||||
const table = new Table(4, 4);
|
||||
doc.addTable(table);
|
||||
```
|
||||
|
||||
The snippet below creates a table of 2 rows and 4 columns.
|
||||
|
||||
```ts
|
||||
const table = doc.createTable(2, 4);
|
||||
|
||||
// Or
|
||||
|
||||
const table = new Table(2, 4);
|
||||
doc.addTable(table);
|
||||
```
|
||||
|
||||
## Cells
|
||||
|
||||
The above section created a table with cells. To access the cell, use the `getCell` method.
|
||||
|
||||
```ts
|
||||
const cell = table.getCell([ROW INDEX], [COLUMN INDEX]);
|
||||
```
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
const cell = table.getCell(0, 2);
|
||||
```
|
||||
|
||||
### Add paragraph to a cell
|
||||
|
||||
Once you have got the cell, you can add data to it with the `addParagraph` method.
|
||||
|
||||
```ts
|
||||
cell.addParagraph(new Paragraph("Hello"));
|
||||
```
|
||||
|
||||
## Borders
|
||||
|
||||
BorderStyle can be imported from `docx`. Size determines the thickness. HTML color can be a hex code or alias such as `red`.
|
||||
|
||||
```ts
|
||||
cell.Borders.addTopBorder([BorderStyle], [SIZE], [HTML COLOR]);
|
||||
```
|
||||
|
||||
```ts
|
||||
cell.Borders.addBottomBorder([BorderStyle], [SIZE], [HTML COLOR]);
|
||||
```
|
||||
|
||||
```ts
|
||||
cell.Borders.addStartBorder([[BorderStyle]], [SIZE], [HTML COLOR]);
|
||||
```
|
||||
|
||||
```ts
|
||||
cell.Borders.addEndBorder([BorderStyle], [SIZE], [HTML COLOR]);
|
||||
```
|
||||
|
||||
### Example
|
||||
|
||||
```ts
|
||||
import { BorderStyle } from "docx";
|
||||
|
||||
cell.Borders.addStartBorder(BorderStyle.DOT_DOT_DASH, 3, "green");
|
||||
cell.Borders.addStartBorder(BorderStyle.DOT_DOT_DASH, 3, "#ff8000");
|
||||
```
|
||||
|
||||
## Set Width
|
||||
|
||||
```ts
|
||||
import { WidthType } from "docx";
|
||||
|
||||
table.setWidth([WIDTH], [OPTIONAL WidthType. Defaults to DXA]);
|
||||
```
|
||||
|
||||
For example:
|
||||
|
||||
```ts
|
||||
table.setWidth(4535, WidthType.DXA);
|
||||
```
|
||||
|
||||
## Vertical Align
|
||||
|
||||
Sets the vertical alignment of the contents of the cell
|
||||
|
||||
```ts
|
||||
import { VerticalAlign } from "docx";
|
||||
|
||||
cell.setVerticalAlign([VerticalAlign TYPE]);
|
||||
```
|
||||
|
||||
For example, to center align a cell:
|
||||
|
||||
```ts
|
||||
cell.setVerticalAlign(VerticalAlign.CENTER);
|
||||
```
|
||||
|
||||
## Rows
|
||||
|
||||
To get a row, use the `getRow` method on a `table`. There are a handful of methods which you can apply to a row which will be explained below.
|
||||
|
||||
```ts
|
||||
table.getRow([ROW INDEX]);
|
||||
```
|
||||
|
||||
## Merge cells together
|
||||
|
||||
### Merging on a row
|
||||
|
||||
First obtain the row, and call `mergeCells()`. The first argument is where the merge should start. The second argument is where the merge should end.
|
||||
|
||||
```ts
|
||||
table.getRow(0).mergeCells([FROM INDEX], [TO INDEX]);
|
||||
```
|
||||
|
||||
#### Example
|
||||
|
||||
This will merge 3 cells together starting from index `0`:
|
||||
|
||||
```ts
|
||||
table.getRow(0).mergeCells(0, 2);
|
||||
```
|
||||
|
||||
### Merging on a column
|
||||
|
||||
It has not been implemented yet, but it will follow a similar structure as merging a row.
|
||||
|
||||
## Nested Tables
|
||||
|
||||
To have a table within a table
|
||||
|
||||
```ts
|
||||
cell.addTable(new Table(1, 1));
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo4.ts ":include")
|
||||
|
||||
_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo4.ts_
|
@ -22,7 +22,7 @@ text.bold();
|
||||
### Italics
|
||||
|
||||
```js
|
||||
text.italic();
|
||||
text.italics();
|
||||
```
|
||||
|
||||
### Underline
|
||||
@ -80,5 +80,5 @@ text.break();
|
||||
What if you want to create a paragraph which is **_bold_** and **_italic_**?
|
||||
|
||||
```js
|
||||
paragraph.bold().italic();
|
||||
paragraph.bold().italics();
|
||||
```
|
||||
|
Reference in New Issue
Block a user