Back to guides

Allow users to download generated screenshots

Last updated december 01, 2022

Here are some ways to allow your users to download the generated screenshots.

Option 1 • Use an anchor element if you are proxying ApiFlash

If you are proxying ApiFlash's API through your own domain, you can just use an anchor element with the download attribute to allow users to download the generated screenshot. 

1
2
3
4
<a download="screenshot.jpeg"
   href="https://yourdomain.com/screenshot&url=https://example.com">
    Download
</a>

Using ApiFlash's API endpoint https://api.apiflash.com/v1/urltoimage... directly in the href attribute will not work because the download attribute only works for same-origin URLs.

If you are not proxying ApiFlash's API yet and would like to use anchor elements to trigger screenshots downloads, please check one of those guides:

Option 2 • Make an api call from the frontend and trigger a file download.

Making api calls from the front end will expose your access key to the end users. This method should only be used for internal tools or situations where all end users can be trusted.

As seen previously, the download attribute of the anchor element only works for same-origin URLs. But there is still a way to trigger a file download from the frontend using javascript. 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
fetch('https://api.apiflash.com/v1/urltoimage?access_key=YOUR_ACCESS_KEY&url=https://example.com')
    .then(response => {
        response
            .blob()
            .then(blob => {
                let a = document.createElement('a');
                a.href = window.URL.createObjectURL(blob);
                a.download = 'screenshot.jpeg';
                document.body.appendChild(a);
                a.click();
            });
    });

In the previous example we make an api call to ApiFlash's screenshot API and get the response as a blob. Then we create an anchor element and simulate a click to trigger the file download. We used the Fetch API , but you can use anything you'd like to make the HTTP request to perform the api call.

Option 3 • Make an api call from the backend and use appropriate HTTP headers.

If the HTTP response contains the Content-Disposition header with the attachment parameter, almost all browsers will automatically trigger a file download. 

1
Content-Disposition: attachment; filename="filename.jpg"

When your user is navigating to one of your endpoint, you can simply make an API call to ApiFlash from the backend, put the resulting image in the HTTP response's body and set the Content-Disposition header.