Efficiently Saving Large Excel Files as Blobs to Prevent Browser Crashes

Problem Background and Challenges

In front-end development, when using JavaScript libraries like excelbuilder.js to generate Excel files, the data URL method is often employed by setting the href attribute of a link for file download. However, with large data volumes, this approach can cause memory overflow and crashes in browsers such as Chrome. For instance, the original code uses encodeURIComponent(data) to embed data in the URL, but it performs poorly in high-data scenarios.

Core Solution: Blob and ArrayBuffer

To address this issue, the best practice involves using Blob objects and ArrayBuffer for data handling. Blob allows encapsulation of binary data into file objects, while ArrayBuffer provides efficient storage for binary data. Key steps include converting Base64-encoded Excel data to ArrayBuffer and then creating a Blob object.

Detailed Code Implementation

First, data generated from excelbuilder.js is typically a Base64-encoded string. Use the atob function to decode it into a binary string, then convert it to ArrayBuffer via a custom s2ab function. Here is the complete implementation code:

function s2ab(s) {
  var buf = new ArrayBuffer(s.length);
  var view = new Uint8Array(buf);
  for (var i = 0; i < s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
  return buf;
}

var data = EB.createFile(artistWorkbook); // Assume data is a Base64 string
var bin = atob(data); // Decode Base64
var ab = s2ab(bin); // Convert to ArrayBuffer
var blob = new Blob([ab], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });

var link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = "file.xlsx";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

This method avoids the issue of embedding large data directly in URLs, enabling efficient downloads via Blob URLs and ensuring the generated files can be opened correctly by Excel.

Technical Principle Analysis

Blob objects store data in memory without encoding the entire string into a URL, as with data URLs, thereby reducing memory usage. ArrayBuffer offers low-level access to binary data, ensuring data integrity. During conversion, the s2ab function uses a Uint8Array view to convert string character codes into a byte array, which is crucial for generating valid Excel files.

Supplementary References and Optimization Suggestions

Other answers, such as using XMLHttpRequest or Axios with responseType: "blob" to fetch data from a server, demonstrate similar principles. Reference articles mention cloud storage options like Azure Blob Storage, which can handle large files on the server side to further reduce front-end load. Developers should ensure the data variable is a pure Base64 string without additional prefixes to avoid parsing errors.

Conclusion

By combining Blob and ArrayBuffer, developers can efficiently handle large Excel file exports, improving application performance and user experience. This approach is not only applicable to excelbuilder.js but can also be extended to other file generation scenarios.