How to download a file via a button/link?

Plasmic Studio Questions
1

I’m trying to create a button or link for users to download a file.
However, I can’t seem to figure out how to make it work… it always just navigates to the page where the file is stored.

I’m wondering if it’s because the file link doesn’t include a file format in the link?

image
image1069×372 21.9 KB

Relevant links:

2

Hi @leafer_design

I’ve added a new Button which downloads the file through Javascript. The automatic download with link is not be working probably because of the server not sending right headers for Content-Disposition.

The javascript code used for Button onClick interaction is following

async function downloadFile() {
    try {
        const response = await fetch('https://eu-central-1-shared-euc1-02.graphassets.com/clyh8bfxm039t06w5d3ot7fg5/cm7cclw8w5gc307w1btrjjcjc');
        if (!response.ok) throw new Error('Network response was not ok');
        const blob = await response.blob();
        const url = window.URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        // Suggest a filename (you can customize this)
        link.download = 'document.pdf';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        window.URL.revokeObjectURL(url);
    } catch (error) {
        console.error('Download failed:', error);
    }
}

downloadFile()

Thanks

1 Like