Exporting
Learn how to export dotLottie files in various formats, like ArrayBuffer, Blob, Base64, or download them using dotlottie-js.
Core Concepts: Exporting .lottie Files
After creating or loading a DotLottie instance, adding content, and calling await dotlottie.build(), export the .lottie file in several formats.
All export methods are asynchronous and should be awaited.
Prerequisites
Ensure await dotlottie.build() has been successfully called before any export operations. Exporting without building will likely result in an incomplete or empty file. See The DotLottie Instance (build method).
// Ensure build is complete before exporting
await dotlottie.build();The build() method compiles all added components into the zipped .lottie archive format. Once complete, use the following methods to retrieve the archive data:
1. Downloading the File (Browser Only): dotlottie.download()
In a browser, download() triggers a file download dialog.
// Assuming 'dotlottie' is a built instance in a browser environment
try {
await dotlottie.download("my-awesome-animation.lottie");
console.log("Download initiated for my-awesome-animation.lottie");
} catch (error) {
console.error("Error initiating download:", error);
}Arguments:
fileName(string, required): The desired name for the downloaded file (e.g.,"animation.lottie").
2. Exporting as an ArrayBuffer: dotlottie.toArrayBuffer()
This method returns the .lottie file as an ArrayBuffer, suitable for both browser and Node.js. See toArrayBuffer().
// Assuming 'dotlottie' is a built instance
try {
const arrayBuffer = await dotlottie.toArrayBuffer();
console.log(`Exported to ArrayBuffer. Size: ${arrayBuffer.byteLength} bytes`);
// In Node.js: You can save this buffer to a file
/*
import fs from 'fs/promises';
await fs.writeFile('output.lottie', Buffer.from(arrayBuffer));
console.log('Saved to output.lottie');
*/
// In Browser: You could send this buffer to a server, etc.
} catch (error) {
console.error("Error exporting to ArrayBuffer:", error);
}3. Exporting as a Blob (Browser Only): dotlottie.toBlob()
Returns the .lottie file as a Blob object, useful for browser-specific APIs. See toBlob().
// Assuming 'dotlottie' is a built instance in a browser environment
try {
const blob = await dotlottie.toBlob();
console.log(`Exported to Blob. Size: ${blob.size}, Type: ${blob.type}`);
// Example: Create an object URL for the blob
// const objectURL = URL.createObjectURL(blob);
// console.log('Blob URL:', objectURL);
// Use the objectURL (e.g., in a link) - remember to revoke it later
// URL.revokeObjectURL(objectURL);
} catch (error) {
console.error("Error exporting to Blob:", error);
}4. Exporting as a Base64 String: dotlottie.toBase64()
Returns the .lottie file encoded as a Base64 string. See toBase64().
// Assuming 'dotlottie' is a built instance
try {
const base64String = await dotlottie.toBase64();
console.log(`Exported to Base64. Length: ${base64String.length} characters`);
// console.log('Base64 Preview:', base64String.substring(0, 100));
// Useful for embedding in data URLs or sending in JSON payloads
// const dataUrl = `data:application/zip;base64,${base64String}`;
} catch (error) {
console.error("Error exporting to Base64:", error);
}Choose the export method that best suits your environment and how you intend to use the generated .lottie data.
Next up: Advanced Features Overview