diff --git a/docs/_sidebar.md b/docs/_sidebar.md index 7fa4e9f745..356f64239a 100644 --- a/docs/_sidebar.md +++ b/docs/_sidebar.md @@ -15,6 +15,7 @@ * [Image](usage/images.md) * [Headers & Footers](usage/headers-and-footers.md) * [Bullet Points](usage/bullet-points.md) + * [Hyperlinks](usage/hyperlinks.md) * [Numbering](usage/numbering.md) * [Tables](usage/tables.md) * [Tab Stops](usage/tab-stops.md) diff --git a/docs/usage/hyperlinks.md b/docs/usage/hyperlinks.md index f8d53416ee..d49d9aa0a2 100644 --- a/docs/usage/hyperlinks.md +++ b/docs/usage/hyperlinks.md @@ -1,58 +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 -new Paragraph({ +const paragraph = new Paragraph({ children: [ - new TextRun("The chapter1 can be seen on page "), + new TextRun("Chapter 1 can be seen on page "), new PageRef("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", +}); ```