Export slides as PDF

[arvindpdmn]

Looks good. What if I want to share with others as a PDF? Any export facility? Thanks.

Any pointers? I can try my hand at this.

[jlantunez]

Thanks for your suggestion, Arvind. Maybe in a few months. It's not a priority right now.

[technovangelist]

take a look at using decktape for this. I can never get reveal to print correctly and decktape does it great. https://github.com/astefanutti/decktape - the command to use for the home page deck is:

./phantomjs decktape.js generic --keycode=Space --max-slides=8 https://webslides.tv/ webslides.pdf

Then you get the deck that is hopefully attached webslides.pdf

[jonashaefele]

Thanks for the tip @technovangelist !

I made a little plugin for decktape to get away from using the generic driver.... this way you don't have to specify the number of slides. Just put this in the /plugin folder of decktape as webslides.js. It assumes you're on webslides v 1.0.0 and webslides is intialised with window.ws = new WebSlides();

function WebSlides(page) {
    this.page = page;
}

WebSlides.prototype = {

    getName: function () {
        return 'WebSlides JS';
    },

    configure: function () {
        this.page.evaluate(function () {
            var styleNode = document.createElement('style');
            var css = document.createTextNode(''+
              '#counter, #navigation {'+
              '  display: none !important;'+
              '}'
            );
            styleNode.appendChild(css);
            document.body.appendChild(styleNode);
        });
    },

    isActive: function () {
        return this.page.evaluate(function () {
            return typeof ws === 'object';
        });
    },

    slideCount: function () {
        return this.page.evaluate(function () {
            return ws.maxSlide_;
        });
    },

    nextSlide: function () {
        this.page.evaluate(function () {
            ws.goNext();
        });
    },

    currentSlideIndex: function () {
        return this.page.evaluate(function () {
            return ws.currentSlideI_;
        });
    }
};

exports.create = function (page) {
    return new WebSlides(page);
};

Also for DeckTape to print WebSlides properly, it'll need the right vendor prefixes on the flexbox attributes. In base.css line 3147 change display: block !important; to display: flex: !important and run base.css through https://autoprefixer.github.io/ with filter safari >= 4

For more info why the vendor prefixes are necessary: https://github.com/ariya/phantomjs/issues/14365

Hope that helps!

[jlantunez]

Thanks so much, Jonas. We'll take a look! 👍

[jonashaefele]

PR for DeckTape here: https://github.com/astefanutti/decktape/pull/89

[jonashaefele]

The plugin I posted above is now merged with master of Decktape, so you can use Decktape as it comes... Don't forget the css changes mentioned above though.

[tart2000]

@jonashaefele base.css line 3147 doesn't have a display:block to change... I guess it has changed since you last posted it. Could you point me to the element that needs to be changed please ? I did run the file through Autoprefixer before running Decktape but the resulting PDF still isn't faithful to the original slideshow... (mainly, background images are all squeezed and opacities don't work. Weirdly enough, opacities work when exporting jpg screenshots...). Any help is appreciated. Thank you.

[jonashaefele]

@tart2000 that was in the print styles. They were fixed in commit https://github.com/webslides/WebSlides/commit/373327b091dd7cc835f600b2832e04450ec7a73d

It should be enough not to just run the CSS through autoprefixer like mentioned above.

With the recent changes to webslides, printing to PDF in Chrome works pretty well, too...

We updated to the latest version of webslides and ditched decktape in favour of printing to PDF in Chrome. Only change necessary to make it nice and smooth as this bit of CSS:

@media print {
  section,
  .slide {
    display: flex !important;
    height: auto !important;
  }
  section * {
    -webkit-animation: none !important;
    animation: none !important;
  }
}

[tart2000]

@jonashaefele Thanks for your quick reply. Printing to PDF seems like the best way to go imho. I'm still having some weird results, but it's already better.

[jonashaefele]

@tart2000 Make sure you tick Background graphics under print options. That's literally all it took for us to print to PDF.... but your mileage may vary.

[tart2000]

@jonashaefele Yes, I checked it but still don't get background images on the covers with purple blend / opacity. It's not quite there yet... Like, if you do a quick print to PDF on https://webslides.tv/demos/components, you get a lot of stuff acting weird...

[jlantunez]

@tart2000 We'll check it out. Thanks! :)

[jonashaefele]

yes, as mentioned above, if you just hit print on the standard css it'll look a bit funny. hence us adding the extra css I pasted above....

[tart2000]

@jonashaefele I don't really get it. From what I can see, these lines already come standard in the base.css file, line 3326... (except for the !important on section *)

[chiragparekh]

@jonashaefele @tart2000 If I want to run through API what should be the proper flow to run it?

[chiragparekh]

@jonashaefele @tart2000 If I try to run following command: ./phantomjs decktape.js webslides http://shortorder.dev/mobilion-script test.pdf

It gives me following error am I missing something?

Loading page http://shortorder.dev/mobilion-script ... +- TypeError: undefined is not a function (evaluating 'Array.from(this.el.childNodes)') | http://shortorder.dev/js/webslides.js: 458 (in function "grabSlides") | http://shortorder.dev/js/webslides.js: 391 (in function "WebSlides") Loading page finished with status: success Error: Unable to activate the WebSlides JS DeckTape plugin for the address: http://shortorder.dev/mobilion-script +- Unable to load resource from URL: http://shortorder.dev/data/search-predictions.json | Error code: 5 |_ Description: Operation canceled

[tart2000]

@chiragparekh Here's what I used: ./phantomjs decktape.js generic --keycode=Space --max-slides=15 http://shortorder.dev/mobilion-script test.pdf I don't think webslides exists as an argument...

[chiragparekh]

@tart2000 Okay. And do you use as it as any web service? If so how you will provide space there?

[tart2000]

@chiragparekh I'm sorry, can you precise your question?

[jonashaefele]

@chiragparekh looks like decktape can't find your deck.... http://shortorder.dev/mobilion-script is not an actual website.... might be local on your machine? if you, check if the same command works say with the webslides demo deck

./phantomjs decktape.js webslides https://webslides.tv test.pdf

then replace webslides.tv with the URL to your deck.

[tart2000]

Sorry, I put that URL because that's the one you used in your first question... Obviously, you have to use the URL of the presentation you want to turn into a PDF.

Like I said, I don't think webslides can be used as an argument. So you'd need to use: ./phantomjs decktape.js generic https://webslides.tv test.pdf

[chiragparekh]

@jonashaefele @tart2000 Sorry here is the command with the live server link:

./phantomjs decktape.js webslides http://159.203.190.216/mobilion-script test.pdf

[chiragparekh]

@tart2000 If I use the same above command with generic it just generate first slide.

[tart2000]

@chiragparekh Try adding --keycode=Space

[chiragparekh]

Yes I also tried that one. Gives me same result.

[chiragparekh]

@jonashaefele Is there anything that I need to change from my side to make this plugin work? and also webslides plugin works perfectly here: https://webslides.tv

[jonashaefele]

if you use release 1.0.0 of webslides, the option "webslide" doesn't exist, the plugin was added after the version 1.0.0 release with the PR mentioned above (astefanutti/decktape#89)

You can either manually save https://raw.githubusercontent.com/astefanutti/decktape/master/plugins/webslides.js in the /plugins folder of your decktape installation or clone the repo from the latest version on master rather than using the outdated release v1.0.0

then the command

./phantomjs decktape.js webslides https://webslides.tv test.pdf

creates a beautiful pdf.

Granted, I haven't used decktape for a few months now, because Webslided prints to PDF really nicely from Chrome now. But I just re-installed decktape and tested the command above... makes a lovely pdf. Just make sure you have the webslides.js in your plugin folder, or get it on the url above.

[chiragparekh]

@jonashaefele Thanks for looking into my issue.

Yes there was no options for webslides and I manually created webslides.js in plugins folder. And it runs perfectly in https://webslides.tv but when I run same with https://shortorder.co/mobilion-script

I receive the following output:

Loading page https://shortorder.co/mobilion-script ... +- TypeError: undefined is not a function (evaluating 'Array.from(this.el.childNodes)') | https://shortorder.co/js/webslides.js: 458 (in function "grabSlides") |_ https://shortorder.co/js/webslides.js: 391 (in function "WebSlides") Loading page finished with status: success Error: Unable to activate the WebSlides JS DeckTape plugin for the address: https://shortorder.co/mobilion-script

You can take overview of error. May be you can help.

[jonashaefele]

@chiragparekh

you got some errors in your JS console on the URL you posted above (http://159.203.190.216/mobilion-script)

Seems like all your fonts don't load. That shouldn't make decktape crash, but might be part of the problem.

tbn4hfc.js:42 Typekit: the domain "159.203.190.216" isn't in the list of published domains for kit "tbn4hfc".
U.load @ tbn4hfc.js:42
2cloud.typography.com/6518694/7230352/css/fonts.css Failed to load resource: the server responded with a status of 403 (Forbidden)

simalar when I try the url https://shortorder.co/mobilion-script ...

It seems when initalising WebSlides in Phantom.js something goes wrong... I literally have no idea why, I'm not a maintainer of either decktape or webslides, and I don't know how exactly you build and initialise WebSlides. I just used decktape a few months ago and made this plugin to make it a bit easier for myself and others to produce pdfs. All the plugin needs in an instance of Webslides initialized at window.ws and your deck does that....

I'd try to:

• check version of webslides and update if necessary
• make sure I don't have any console errors (like above)
• check phantom.js version... seems like webslides used Array.from() which your phanton.js says is undefinded are you using the phantom.js version recommended? Did they change that line in Webslides (webslides.js: 458 (in function "grabSlides_")) recently? Maybe you'll have to load a polyfill for Array.from if that's not supported in your version of phantom.js

Can't help you any more than that I'm afraid. Good luck! Worst case, as said before. Print to PDF in Chrome works great.

[jlantunez]

@jonashaefele We really appreciate the time you are dedicating to this! 👍

[chiragparekh]

@jonashaefele I really appreciate your help. Thank you for putting time in this issue.