How to download Google Slides as images?

Question

I am a big fan of using Google Slides as a cloud-hosted lightweight illustrator replacement (that also happens to be collaborative and free!). I wrote up a few thoughts on my process here:

https://medium.com/@tomcritchlow/how-to-use-google-slides-as-a-free-cloud-hosted-illustrator-replacement-f472e6c3a881

What I'm trying to do in my workflow is download all of the slides in a presentation as images at once? The Google Slides UI only lets you download each slide as a PNG one at a time?

Is this possible using add-ons or Apps Scripts somehow? Not sure where to start... Thanks!

Answer 1

The following worked for me:

Set up

Under Resources > Developer Console Project > View Developers Console, enable both the Slides API and the Drive API.

Execution

Replace the ID taken from the Slides URL in the start() function, and run it, e.g.:

https://docs.google.com/presentation/d/<id>/edit

and the function will save the PNGs to your Drive. This could be extended to group them all in a specific folder etc.

function downloadPresentation(id) {
  var slideIds = getSlideIds(id); 

  for (var i = 0, slideId; slideId = slideIds[i]; i++) {
    downloadSlide('Slide ' + (i + 1), id, slideId);
  }
}

function downloadSlide(name, presentationId, slideId) {
  var url = 'https://docs.google.com/presentation/d/' + presentationId +
    '/export/png?id=' + presentationId + '&pageid=' + slideId; 
  var options = {
    headers: {
      Authorization: 'Bearer ' + ScriptApp.getOAuthToken()
    }
  };
  var response = UrlFetchApp.fetch(url, options);
  var image = response.getAs(MimeType.PNG);
  image.setName(name);
  DriveApp.createFile(image);
}

function getSlideIds(presentationId) {
  var url = 'https://slides.googleapis.com/v1/presentations/' + presentationId;
  var options = {
    headers: {
      Authorization: 'Bearer ' + ScriptApp.getOAuthToken()
    }
  };
  var response = UrlFetchApp.fetch(url, options);

  var slideData = JSON.parse(response);
  return slideData.slides.map(function(slide) {
    return slide.objectId;
  });
}

function start() {
  downloadPresentation('Slides document id')
}

Answer 2

The best way to get slide images is to use the presentations.pages.getThumbnail endpoint:

https://developers.google.com/slides/reference/rest/v1/presentations.pages/getThumbnail

The following Apps Script code uses SlidesApp to iterate over the slides, the Slides Advanced Service to generate the thumbnail image, UrlFetchApp to fetch the generated thumbnail, and DriveApp to save it to Drive:

function exportSlideImages(presentationId) {
  var presentation = SlidesApp.openById(presentationId);
  presentation.getSlides().forEach(function(slide, i) {
    // slide = presentation.getSlides()[];
    var thumbnail = Slides.Presentations.Pages.getThumbnail(presentationId, slide.getObjectId(), {
      'thumbnailProperties.thumbnailSize': 'LARGE'
    });
    var response = UrlFetchApp.fetch(thumbnail.contentUrl);
    var blob = response.getBlob();
    blob.setName('slide' + (i + 1) + '.png');
    var file = DriveApp.createFile(blob);
    Logger.log('Created file "%s" for slide number %s', file.getName(), i + 1);
  });
}