Pptxgenjs: Is it possible to link from one slide to another?

[heavysixer]

I see examples of external hyperlinks but I am wondering if you have an example of linking between slides?

[gitbrent]

Hi @heavysixer,

Unfortunately, linking between slides is not currently supported.

[heavysixer]

Hi @gitbrent looking through the code it looks like createHyperlinkRels might allow for relative links between slides. Is this something that could be exposed as a public function instead of being only used internally?

[gregdolley]

Actually, you CAN link to other slides easily. Any element that supports a hyperlink in its options object, just put "#3", "#4", etc. in the URL to link to that slide. For example:

slide.addImage({path: 'images/world.jpg', x: 1.0, y: 1.0, w: 2.0, h: 2.0,
hyperlink: {
url: '#4',
tooltip: 'Go to slide #4',
});

[gitbrent]

@gregdolley: Holy cow, that worked! Today I Learned...

@heavysixer: Does this work for you?

var pptx = new PptxGenJS();

var slide = pptx.addNewSlide();
slide.addImage({
    data: LOGO_STARLABS, x: 1.0, y: 1.0, w: 2.0, h: 2.0,
    hyperlink: { url:'#2', tooltip:'Go to slide #2' }
});

var slide = pptx.addNewSlide();
slide.addText('Link goes here', { x:0.5, y:0.7, font_size:18 });

pptx.save('PptxGenJS-Links');

[gregdolley]

@gitbrent We're using node, so I had to change the first line and LOGO_STARLABS wasn't defined, so I used an image on my machine. But, yeah, this version worked fine:

var pptx = require('pptxgenjs');

var slide = pptx.addNewSlide();
slide.addImage({
    path: '__test__/images/world.jpg', x: 1.0, y: 1.0, w: 2.0, h: 2.0,
    hyperlink: { url:'#2', tooltip:'Go to slide #2' }
});

var slide = pptx.addNewSlide();
slide.addText('Link goes here', { x:0.5, y:0.7, font_size:18 });

pptx.save('PptxGenJS-Links');

[heavysixer]

@gitbrent unfortunately it does not work for me, but I am on a Mac using the official Microsoft version of Powerpoint. I will check on a PC to see if it works there.

[heavysixer]

I've noticed that MS generates the XML slightly different than what this tool produces.

This lib creates a link like this:

<a:r>
  <a:rPr lang="en-US" u="sng" dirty="0" smtClean="0">
  <a:solidFill><a:srgbClr val="CC0000"/></a:solidFill><a:hlinkClick r:id="rId2" tooltip="Go to slide 3"/></a:rPr>
  <a:t>This is slide 1. Click to go to slide 3</a:t>
</a:r>

MS generates it like this:

<a:r>
  <a:rPr lang="en-US" dirty="0" smtClean="0">
  <a:solidFill><a:srgbClr val="00CD00"/></a:solidFill><a:hlinkClick r:id="rId3" action="ppaction://hlinksldjump"/></a:rPr>
  <a:t>Linked By MS</a:t>
</a:r>

The key differences appears to be the action="ppaction://hlinksldjump" attributes.

[heavysixer]

@gitbrent Is there a way to pass arbitrary attributes from the options hash to the link? If so we could easily add the support for action.

[gitbrent]

Hi @heavysixer,

Having looked at the XML PowerPoint generates, I can see that while a hyperlink can be targeted to a slide may work, the correct code is what you've shown.

Therefore, i'll add a new "slide" option to hyperlinks so that slide links can be properly supported.

Slide XML:

<a:r>
  <a:rPr lang="en-US" dirty="0" smtClean="0">
    <a:hlinkClick r:id="rId3" action="ppaction://hlinksldjump" />
  </a:rPr>
  <a:t>Link to slide #2!</a:t>
</a:r>

Slide Ref:

<Relationship Id="rId3" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/slide" Target="slide2.xml"/>

[gitbrent]

Links to Slides within a Presentation are now supported in the main branch. Readme updated.

// EX: Hyperlink: Web
slide.addText(
    [{
        text: 'PptxGenJS Project',
        options: { hyperlink:{ url:'https://github.com/gitbrent/pptxgenjs', tooltip:'Visit Homepage' } }
    }],
    { x:1.0, y:1.0, w:5, h:1 }
);
// EX: Hyperlink: Slide in Presentation
slide.addText(
    [{
        text: 'Slide #2',
        options: { hyperlink:{ slide:'2', tooltip:'Go to Summary Slide' } }
    }],
    { x:1.0, y:2.5, w:5, h:1 }
);

[heavysixer]

great stuff @gitbrent !