smartyellow/docx-js
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hyperlink documentation

Browse Source
This commit is contained in:
Rowan Cockett
2021-08-31 19:54:57 -06:00
parent 41f516d64b
commit 727e741b08
2 changed files with 64 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/_sidebar.md
View File

@ -15,6 +15,7 @@
* [Image](usage/images.md) * [Image](usage/images.md)
* [Headers & Footers](usage/headers-and-footers.md) * [Headers & Footers](usage/headers-and-footers.md)
* [Bullet Points](usage/bullet-points.md) * [Bullet Points](usage/bullet-points.md)
* [Hyperlinks](usage/hyperlinks.md)
* [Numbering](usage/numbering.md) * [Numbering](usage/numbering.md)
* [Tables](usage/tables.md) * [Tables](usage/tables.md)
* [Tab Stops](usage/tab-stops.md) * [Tab Stops](usage/tab-stops.md)

86
docs/usage/hyperlinks.md
View File

@ -1,58 +1,98 @@
# Hyperlinks # 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). There are two types of hyperlinks: internal (pointing to a bookmark inside the document) and external (pointing to an external url).
## Internal ## 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)` 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:
For example:
```ts ```ts
const paragraph = this.doc.createParagraph(); const chapter1 = new Paragraph({
const bookmark = this.doc.createBookmark('anchorForChapter1', 'This is chapter1'); heading: HeadingLevel.HEADING_1,
paragraph.addBookmark(bookmark); 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 ```ts
const paragraph = this.doc.createParagraph(); const link = new InternalHyperlink({
const link = this.doc.createInternalHyperLink('anchorForChapter1', 'This is a link to chapter1'); children: [
paragraph.addHyperLink(link); 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: You can also get the page number of the bookmark by creating a page reference to it:
```ts ```ts
new Paragraph({ const paragraph = new Paragraph({
children: [ children: [
new TextRun("The chapter1 can be seen on page "), new TextRun("Chapter 1 can be seen on page "),
new PageRef("anchorForChapter1"), new PageRef("anchorForChapter1"),
] ],
}) });
``` ```
## External ## 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 ```ts
const paragraph = this.doc.createParagraph(); const paragraph = new Paragraph({
const link = this.doc.createHyperlink('https://docx.js.org', 'This is an external link'); children: [
paragraph.addHyperLink(link); 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: Example:
```ts ```ts
const link = this.doc.createHyperlink('https://docx.js.org', 'This is an external link'); const styledLink = new ExternalHyperlink({
link.TextRun.bold().italics() 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",
});
``` ```