DEV Community

Cover image for How to Download an Image from a Google Doc
PatrickWeaver
PatrickWeaver

Posted on • Edited on

1 1

How to Download an Image from a Google Doc

For some reason Google hasn't built in a way for you to download images in Google docs! There are workarounds to get those image files like using Google Keep, or downloading your whole doc as a .zip file, but these have always felt like too many steps.

And this is something that people really want!

As Steve Krouse points out here, it is possible to get the real URL of the image in your doc (but confusingly, as soon as you click on the image to select it the URL becomes obfuscated!).

I also noticed the URLs in the source, and decided to make an easy way to access it. The one trick ended up being, because clicking on the image made it disappear, finding a way to tell the code which image you wanted!

I looked through some JavaScript documentation and realized I could use the mouseover event to detect when someone was hovering over the image. Unfortunately this means that it won't work on a touchscreen device, but I'm guessing that most people who want to download an image are on a traditional computer.

How does it work?

I needed a way to run my code on any Google Doc, there's probably a way to make Google Doc or Chrome extension to do this, but since I was asking people to run code in their potentially private docs I wanted to make the code as short and open source as possible.

I decided that the best way to do this was a bookmarklet. If you're unfamiliar with bookmarklets, they're bookmarks (usually placed in your bookmarks toolbar (Cmd-Shift-B to toggle this on and off on a Mac), that instead of navigating to a webpage, run JavaScript when you click them.

Great! Tell me how to do it!

To get started you'll have to "install" the bookmarklet. This is easy to do, and just means dragging a button into your bookmarks toolbar. I've hosted it on Glitch here. You can even drag it straight from one of the buttons on the embed below:

The instructions are simple!

  1. Drag one of the bookmarklets below (see the embed above) to your bookmarks toolbar. The text displayed is what will be show on the toolbar:

  2. Then, when you're on a Google Doc, click the bookmarklet, then hover over an image embeded in the doc. Depending on your browser settings it will either download immediately, or open the actual image in a new tab.

Great my problems are solved forever!

No guarantees that this will work long term, a quick look at the source code for any Google Doc will show that they're very complex! I wouldn't be surprised if Google changes the way these URLs work in the future, but this tool has worked for 6 months so maybe not!

Long term I hope that they build in a way for people to download their images, but for now I hope this is helpful!

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

SurveyJS custom survey software

JavaScript UI Library for Surveys and Forms

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

View demo

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay