How to download a file via URL from VueJS and save it to a variable

Question

I want to use it in VueJS as below code via the URL of a file that is made public in AWS S3 or Google Drive.

...
const file = AWS S3 or Google Drive File URL
...

How can this be done?

We need more information. How exactly does AWS/Google provide the file? Is it an API endpoint, which sends the file content? Is the file content displayed, when visiting the URL? — Geshode
– Geshode, Commented Sep 17, 2019 at 2:40
Not the path I get through Axios etc. It's simply a static URL like this: ex) test.s3.ap-northeast-2.amazonaws.com/event/file — kycle le
– kycle le, Commented Sep 17, 2019 at 2:43
try window.open(the_url). If using AWS you need to make sure the ResponseContentDisposition header is present — Helder Lucas
– Helder Lucas, Commented Sep 17, 2019 at 20:08

BamBam22 · Accepted Answer · 2020-09-21 15:14:56Z

2

You need to make a Blob.

const response = await this.$axios.get(`documents?s3-key=${s3Key}`)
const awsS3Response = await axios.get(response.data, { responseType: 'blob' })
const blob = new Blob([awsS3Response.data])
const link = document.createElement('a')
link.href = URL.createObjectURL(blob)
link.download = s3Key
link.click()
URL.revokeObjectURL(link.href)

response.data is a signed url

This is how I created the signed url in my API.

const s3 = new AWS.S3({ apiVersion: '2006-03-01' })

async function getDocument({ s3Key }) {
  return s3.getSignedUrl('getObject', {
    Bucket: 'lqdc2documents',
    Key: s3Key,
    Expires: 60,
  })
}

answered Sep 21, 2020 at 15:14

BamBam22

7331 gold badge14 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Adam Over a year ago

Thaks it's helm to me

Shulz Over a year ago

How did you manage to use aws-sdk to vuejs since we get Node module not found

grokpot Over a year ago

@Shulz: yarn add aws-sdk and import S3 from 'aws-sdk/clients/s3';

Collectives™ on Stack Overflow

How to download a file via URL from VueJS and save it to a variable

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related