Deploying to gh-pages from @ dolanmiu/docx@ef28ba1866 🚀
This commit is contained in:
dolanmiu
@ -1,47 +1,98 @@
|
||||
# Hyperlinks
|
||||
|
||||
!> Hyperlinks require an understanding of [Paragraphs](usage/paragraph.md) and [Text](usage/text.md).
|
||||
|
||||
There are two types of hyperlinks: internal (pointing to a bookmark inside the document) and external (pointing to an external url).
|
||||
|
||||
## Internal
|
||||
|
||||
To create an internal hyperlink you need first to create a bookmark (the paragraph that will be the destination of the hyperlink) with `doc.createBookmark(anchor, text)`.
|
||||
To create an internal hyperlink you need first to create a `Bookmark`, which contains the content that will be the destination of the hyperlink.
|
||||
|
||||
A bookmark is composed of an anchor (an identifier) and the text displayed. After creating a bookmark just add it to a paragraph with `paragraph.addBookmark(bookmark)`
|
||||
|
||||
For example:
|
||||
A bookmark is composed of an anchor (an identifier) and the text displayed. After creating a bookmark just add it to a paragraph. For example, creating a bookmarked heading:
|
||||
|
||||
```ts
|
||||
const paragraph = this.doc.createParagraph();
|
||||
const bookmark = this.doc.createBookmark('anchorForChapter1', 'This is chapter1');
|
||||
paragraph.addBookmark(bookmark);
|
||||
const chapter1 = new Paragraph({
|
||||
heading: HeadingLevel.HEADING_1,
|
||||
children: [
|
||||
new Bookmark({
|
||||
id: "anchorForChapter1",
|
||||
children: [
|
||||
new TextRun("Chapter 1"),
|
||||
],
|
||||
}),
|
||||
],
|
||||
})
|
||||
```
|
||||
|
||||
Then you can create an hyperlink pointing to that bookmark with `doc.createInternalHyperLink(anchor,text)`:
|
||||
Then you can create an hyperlink pointing to that bookmark with an `InternalHyperLink`:
|
||||
|
||||
```ts
|
||||
const paragraph = this.doc.createParagraph();
|
||||
const link = this.doc.createInternalHyperLink('anchorForChapter1', 'This is a link to chapter1');
|
||||
paragraph.addHyperLink(link);
|
||||
const link = new InternalHyperlink({
|
||||
children: [
|
||||
new TextRun({
|
||||
text: "See Chapter 1",
|
||||
style: "Hyperlink",
|
||||
}),
|
||||
],
|
||||
anchor: "anchorForChapter1",
|
||||
})
|
||||
```
|
||||
|
||||
You can also get the page number of the bookmark by creating a page reference to it:
|
||||
|
||||
```ts
|
||||
const paragraph = new Paragraph({
|
||||
children: [
|
||||
new TextRun("Chapter 1 can be seen on page "),
|
||||
new PageReference("anchorForChapter1"),
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## External
|
||||
|
||||
To create an external hyperlink you just need to specify the url and the text of the link, then add it to a paragraph with `doc.createHyperlink(url, text)`:
|
||||
To create an external hyperlink you just need to specify the url and the text of the link, then add it to a paragraph:
|
||||
|
||||
```ts
|
||||
const paragraph = this.doc.createParagraph();
|
||||
const link = this.doc.createHyperlink('https://docx.js.org', 'This is an external link');
|
||||
paragraph.addHyperLink(link);
|
||||
const paragraph = new Paragraph({
|
||||
children: [
|
||||
new ExternalHyperlink({
|
||||
children: [
|
||||
new TextRun({
|
||||
text: "This is an external link!",
|
||||
style: "Hyperlink",
|
||||
}),
|
||||
],
|
||||
link: "https://docx.js.org",
|
||||
}),
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
## Styling an hyperlink
|
||||
## Styling hyperlinks
|
||||
|
||||
It is possible to set the style of the text of an hyperlink. This can be done applying run formatting on `TextRun` property of the hyperlink.
|
||||
It is possible to set the style of the text of both internal and external hyperlinks. This can be done applying run formatting on any of the `TextRun` children of the hyperlink. Use the `style: "Hyperlink"` property to show the default link styles, which can be combined with any other style.
|
||||
|
||||
Example:
|
||||
|
||||
```ts
|
||||
const link = this.doc.createHyperlink('https://docx.js.org', 'This is an external link');
|
||||
link.TextRun.bold().italics()
|
||||
const styledLink = new ExternalHyperlink({
|
||||
children: [
|
||||
new TextRun({
|
||||
text: "This is a ",
|
||||
style: "Hyperlink",
|
||||
}),
|
||||
new TextRun({
|
||||
text: "bold",
|
||||
bold: true,
|
||||
style: "Hyperlink",
|
||||
}),
|
||||
new TextRun({
|
||||
text: " link!",
|
||||
style: "Hyperlink",
|
||||
}),
|
||||
],
|
||||
link: "https://docx.js.org",
|
||||
});
|
||||
```
|
||||
|
||||
@ -180,12 +180,12 @@ Adding spacing between paragraphs
|
||||
|
||||
### ISpacingProperties
|
||||
|
||||
| Property | Type | Notes |
|
||||
| -------- | -------------- | -------- |
|
||||
| after | `number` | Optional |
|
||||
| before | `number` | Optional |
|
||||
| line | `number` | Optional |
|
||||
| lineRule | `LineRuleType` | Optional |
|
||||
| Property | Type | Notes | Possible Values |
|
||||
| -------- | -------------- | -------- | ----------------------------- |
|
||||
| after | `number` | Optional | |
|
||||
| before | `number` | Optional | |
|
||||
| line | `number` | Optional | |
|
||||
| lineRule | `LineRuleType` | Optional | `AT_LEAST`, `EXACTLY`, `AUTO` |
|
||||
|
||||
**Example:**
|
||||
|
||||
|
||||
@ -4,15 +4,15 @@
|
||||
|
||||
!> **Note**: The unit of measurement for a tab stop is in [DXA](https://stackoverflow.com/questions/14360183/default-wordml-unit-measurement-pixel-or-point-or-inches)
|
||||
|
||||
|
||||
|
||||
|
||||
Simply call the relevant methods on the paragraph listed below. Then just add a `tab()` method call to a text object. Adding multiple `tabStops` will mean you would have to chain `tab()` until the desired `tabStop` is selected. Example is shown below.
|
||||
Simply declare the tab stops on the paragraph, as shown below. Use the tab character `\t` to indicate the tab position within the `text` property of a `TextRun`. Adding multiple `tabStops` will mean you can add additional `\t` characters until the desired `tabStop` is selected. Example is shown below.
|
||||
|
||||
## Example
|
||||
|
||||
```ts
|
||||
const paragraph = new Paragraph({
|
||||
children: [new TextRun("Hey everyone").bold(), new TextRun(\t"11th November 1999")],
|
||||
children: [new TextRun({ text: "Hey everyone", bold: true}), new TextRun("\t11th November 1999")],
|
||||
tabStops: [
|
||||
{
|
||||
type: TabStopType.RIGHT,
|
||||
@ -26,7 +26,7 @@ The example above will create a left aligned text, and a right aligned text on t
|
||||
|
||||
```ts
|
||||
const paragraph = new Paragraph({
|
||||
children: [new TextRun("Second tab stop here I come!")],
|
||||
children: [new TextRun("\t\tSecond tab stop here I come!")],
|
||||
tabStops: [
|
||||
{
|
||||
type: TabStopType.RIGHT,
|
||||
@ -46,7 +46,7 @@ You can add multiple tab stops of the same `type` too.
|
||||
|
||||
```ts
|
||||
const paragraph = new Paragraph({
|
||||
children: [new TextRun("Multiple tab stops!")],
|
||||
children: [new TextRun("Multiple \ttab \tstops!")],
|
||||
tabStops: [
|
||||
{
|
||||
type: TabStopType.RIGHT,
|
||||
@ -103,7 +103,7 @@ const paragraph = new Paragraph({
|
||||
});
|
||||
```
|
||||
|
||||
2268 is the distance fro0oum the left side.
|
||||
2268 is the distance from the left side.
|
||||
|
||||
## Max Right Tab Stop
|
||||
|
||||
|
||||
@ -242,12 +242,12 @@ const cell = new TableCell({
|
||||
|
||||
`WidthType` values can be:
|
||||
|
||||
| Property | Notes |
|
||||
| -------- | --------------------------------- |
|
||||
| AUTO | |
|
||||
| DXA | value is in twentieths of a point |
|
||||
| NIL | is considered as zero |
|
||||
| PCT | percent of table width |
|
||||
| Property | Notes |
|
||||
| ---------- | --------------------------------- |
|
||||
| AUTO | |
|
||||
| DXA | Value is in twentieths of a point |
|
||||
| NIL | Is considered as zero |
|
||||
| PERCENTAGE | Percent of table width |
|
||||
|
||||
### Nested Tables
|
||||
|
||||
|
||||
Reference in New Issue
Block a user