How can I lazy download large attachment in user background?

Question

I have some large attachment in event.

At first, my link code is

<a :download="scope.row.name" :href="`data:${scope.row.type};base64,${scope.row.contentBytes}`">download</a>

However, when I get the attachment information from graph api, it will be very slow because of the big contentBytes even though I bind onclick to be lazy.

40MB attachment will take more than 3mins at the frontend.

Are there some methods can make user onclick the file then it will download in user background like every file on the other website(OneDrive, GoogleDrive...)

I use Vue with element UI, so some Js sample will be helpful.

-- updated

My method now:

When I click download, it will create a $value request

then after about 1 min it finally fininsh.

check the link for the complete video.

-- code

// graphapi.js
export function getAttachment(eventId, attachmentId) {
  return request({
    url: `/events/${eventId}/attachments/${attachmentId}/$value`,
    method: 'get'
  })
}

// form.vue
// template
 <el-table-column v-if="action === 'edit'" width="150px" label="操作">
          <template slot-scope="scope">
            <el-button size="small" type="text">
              <a @click.prevent="downloadAttachment(scope.row.id)">download</a>
            </el-button>
            <el-button size="small" type="text" @click="deleteAttachment(scope.row.id)">remove</el-button>
          </template>
        </el-table-column>
// script
downloadAttachment(attachmentId) {
      const attachment = getAttachment(this.$route.params.id, attachmentId)
const link = document.createElement('a')
link.href = `data:${attachment.type};base64,${attachment.contentBytes}`
link.click()
    },

Answer 1

Host your images on a CDN, that way you will be able to download them directly without any delay + you will not put any load onto your server (hence being able to serve files to people faster around the world without your server crashing).

Depending on where you host your app, you may have it included, could use Cloudfront or Cloudinary.