I'm encountering some challenges with handling large attachments in my project.
Initially, I had this link code:
<a :download="scope.row.name" :href="`data:${scope.row.type};base64,${scope.row.contentBytes}`">download</a>
However, fetching attachment information from graph api is very slow due to the size of contentBytes, even though lazy loading is implemented on onclick event bindings.
A 40MB attachment can take over 3mins to download at the frontend.
Is there a way to allow users to click on a file for background download similar to other platforms like OneDrive or GoogleDrive?
https://i.sstatic.net/gKr7v.png
My tech stack includes Vue with element UI, so any JavaScript samples would be greatly appreciated.
-- updated
Current approach:
When the user clicks "download," a $value request is initiated https://i.sstatic.net/dxVpO.jpg
and completes after approximately 1 minute.
For a complete video demonstration, check out the link.
-- 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()
},