ej2-angular-spreadsheet Add Authorization header on chunked open requests (all chunks)
Hi Aphisit Seethinwan,
We have reviewed your request based on the details you provided. We'd like to clarify that the Spreadsheet's Chunk Response Processing feature is designed to efficiently handle large Excel files containing extensive data and features. It works by dividing the server response into smaller segments, known as chunks, which are sent to the client in parallel. This approach optimizes performance and helps prevent memory issues or connection interruptions during data transmission. Once all chunks are received, the client combines them to load the Excel data smoothly into the Spreadsheet.
For more information, please refer to the below documentation:
When an open process is initiated in the Spreadsheet, the beforeOpen event is triggered once, before sending the initial request to the server. If a chunkSize is defined in the openSettings, the Spreadsheet handles the subsequent chunk requests internally, without triggering the beforeOpen event again. Therefore, the event is not triggered multiple times for each chunk by default.
However, we have already confirmed this area as an improvement where the beforeOpen event will be triggered for every chunk request, allowing users to add headers dynamically. This enhancement has been logged as a feature request and will be included in one of our upcoming releases. You can communicate and track the status of the feature using the below link from our feedback portal.
Feedback link: https://www.syncfusion.com/feedback/69905/provide-support-to-trigger-beforeopen-event-for-each-chunk-request-during-chunk
At the planning stage for every release cycle, we review all the open features once again and finalize features for implementation based on specific parameters including product vision, technological feasibility, and customer interest. Once we have anything definite to share about these features implementation, we will move the feedback to scheduled status with the tentative release timeline.
In the meantime, we have prepared a workaround solution that allows you to add headers for each chunk request by patching window.fetch. This approach intercepts the component’s internal chunk requests and injects the required headers. For your convenience, we’ve prepared a sample demonstrating this configuration, where headers are properly added to each chunk request. Below is the relevant code snippet and sample output for your reference.
|
export class AppComponent { constructor() { this.patchFetch(); } @ViewChild('default') public spreadsheetObj: SpreadsheetComponent; public data: Object[] = getDefaultData(); public token: string; public openSettings: OpenSettingsModel = { chunkSize: 2000, retryCount: 3, retryAfterDelay: 500 } public openUrl = 'https://localhost:44341/api/spreadsheet/open'; public saveUrl = 'https://localhost:44341/api/spreadsheet/save'; created() { ….. } beforeOpenHandler(args) { args.requestData = { ...(args.requestData || {}), headers: { Authorization: `Bearer Token` } }; this.token = 'Bearer Token'; }
patchFetch() { const originalFetch = window.fetch;
window.fetch = async (input: RequestInfo, init?: RequestInit): Promise<Response> => { if (this.token) { const newInit: RequestInit = { ...init, headers: { ...(init?.headers || {}), 'Authorization': this.token, }, };
return originalFetch(input, newInit); } }; }
}
|
Sample link: https://stackblitz.com/edit/angular-5eao6bd8-ilizxgca?file=src%2Fapp.component.ts
Local service (API): Please refer to the attachment.
Output:
Please review the above shared details and get back to us if you have any further questions or concerns.
Regards,
Babu.
Attachment: WebAPI_(2)_4443cfe9.zip
