This commit is contained in:
Graham Charles
2021-09-22 16:55:12 -07:00
33 changed files with 848 additions and 451 deletions

View File

@ -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",
});
```

View File

@ -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