1594796846
Null Safety in Dart
Hear from Bob and Kevin on the upcoming null-safety feature in Dart.
Sound null safety
Sound null safety is coming to the Dart language! When you opt into null safety, types in your code are non-nullable by default, meaning that values can’t be null unless you say they can be. With null safety, your runtime null-dereference errors turn into edit-time analysis errors.
With null safety, the Dart analyzer enforces good practices. For example, it makes sure you check for null before reading a nullable variable. And because Dart null safety is sound, Dart compilers and runtimes can optimize away internal null checks, so apps can be faster and smaller.
New operators and keywords related to null safety include ?, !, and late. If you’ve used Kotlin, TypeScript, or C#, the syntax for null safety might look familiar. That’s by design: the Dart language aims to be unsurprising.
You can practice using null safety in the web app DartPad with Null Safety, shown in the following screenshot. Or try null safety in your normal development environment, using the instructions and configuration files in the null safety sample.
Creating variables
When creating a variable, you can use ? and late to inform Dart of the variable’s nullability.
Here are some examples of declaring non-nullable variables (assuming you’ve opted into null safety):
// In null-safe Dart, none of these can ever be null.
var i = 42; // Inferred to be an int.
String name = getFileName();
final b = Foo();
If the variable can have the value null, add **?** to its type declaration:
int? aNullableInt = null;
If you know that a non-nullable variable will be initialized to a non-null value before it’s used, but the Dart analyzer doesn’t agree, insert **late** before the variable’s type:
class IntProvider {
late int aRealInt;
IntProvider() {
aRealInt = calculate();
}
}
The late keyword has two effects:
- The analyzer doesn’t require you to immediately initialize a
latevariable to a non-null value. - The runtime lazily initializes the
latevariable. For example, if a non-nullable instance variable must be calculated, adding thelatemodifier delays the calculation until the first use of the instance variable.
Using variables and expressions
With null safety, the Dart analyzer generates errors when it finds a nullable value where a non-null value is required. That isn’t as bad as it sounds: the analyzer can often recognize when a variable or expression inside a function has a nullable type but can’t have a null value.
The analyzer can’t model the flow of your whole application, so it can’t predict the values of global variables or class fields.
When using a nullable variable or expression, be sure to handle null values. For example, you can use an if statement, the ?? operator, or the ?. operator to handle possible null values.
Here’s an example of using the ?? operator to avoid setting a non-nullable variable to null:
int value = aNullableInt ?? 0; // 0 if it's null; otherwise, the integer
Here’s similar code, but with an if statement that checks for null:
int definitelyInt(int? aNullableInt) {
if (aNullableInt == null) {
return 0;
}
return aNullableInt; // Can't be null!
}
If you’re sure that an expression with a nullable type isn’t null, you can add ! to make Dart treat it as non-nullable:
int? aNullableInt = 2;
int value = aNullableInt!; // `aNullableInt!` is an int.
// This throws if aNullableInt is null.
Important: If you aren’t positive that a value is non-null, don’t use **!**.
If you need to change the type of a nullable variable — beyond what the ! operator can do — you can use the typecast operator (as). The following example uses as to convert a num? to an int:
return maybeNum() as int;
Once you opt into null safety, you can’t use the member access operator ([.](https://dart.dev/guides/language/language-tour#other-operators)) if the operand might be null. Instead, you can use the null-aware version of that operator (?.):
double? d;
print(d?.floor()); // Uses `?.` instead of `.` to invoke `floor()`.
Understanding list, set, and map types
Lists, sets, and maps are commonly used collection types in Dart programs, so you need to know how they interact with null safety. Here are some examples of how Dart code uses these collection types:
- Flutter layout widgets such as
Columnoften have achildrenproperty that’s aListofWidgetobjects. - The Veggie Seasons sample uses a
SetofVeggieCategoryto store a user’s food preferences. - The GitHub Dataviz sample has a
fromJson()method that creates an object from JSON data that’s supplied in aMap<String, dynamic>.
List and set types
When you’re declaring the type of a list or set, think about what can be null. The following table shows the possibilities for a list of strings if you opt into null safety.
When a literal creates a list or set, then instead of a type like in the table above, you typically see a type annotation on the literal. For example, here’s the code you might use to create a variable (nameList) of type List<String?> and a variable (nameSet) of type Set<String?>:
var nameList = <String?>['Andrew', 'Anjan', 'Anya'];
var nameSet = <String?>{'Andrew', 'Anjan', 'Anya'};
Map types
Map types behave mostly like you’d expect, with one exception: the returned value of a lookup can be null. Null is the value for a key that isn’t present in the map.
As an example, look at the following code. What do you think the value and type of uhOh are?
var myMap = <String, int>{'one': 1};
var uhOh = myMap['two'];
The answer is that uhOh is null and has type int?.
Like lists and sets, maps can have a variety of types:
* Even when all the int values in the map are non-null, when you use an invalid key to do a map lookup, the returned value is null.
Because map lookups can return null, you can’t assign them to non-nullable variables:
// Assigning a lookup result to a non-nullable
// variable causes an error.
int value = <String, int>{'one': 1}['one']; // ERROR
One workaround is to change the type of the variable to be nullable:
int? value = <String, int>{'one': 1}['one']; // OK
Another way to fix the problem — if you’re sure the lookup succeeds — is to add a !:
int value = <String, int>{'one': 1}['one']!; // OK
A safer approach is to use the lookup value only if it’s not null. You can test its value using an if statement or the [??](https://dart.dev/guides/language/language-tour#conditional-expressions) operator. Here’s an example of using the value 0 if the lookup returns a null value:
var aList = <String, int>{'one': 1};
...
int value = aList['one'] ?? 0;
#dart #flutter #mobile-apps
What is GEEK
Buddha Community
1648873833
A Collection of Flutter and Dart Tips and Tricks
Table of Contents
LazyStreamin Flutter and Dart- Cancelable APIs in Flutter
- Asset Data in Flutter
- API Caching in Flutter
FutureGroupin Dart- Flatten
Iterable<bool>in Dart - Caching Temp Files in Flutter
- Custom Lists in Dart
- Optional Chaining in Dart
- MapList in Flutter
Future<bool>in Flutter- Async Bloc Init in Flutter
- Firebase Auth Errors in Flutter
- Debug Strings in Flutter
- Keyboard Appearance in Flutter
- Get
StringData in Dart Stream.startWithin Flutter- Optional Functions in Dart
AnnotatedRegionin Flutter- Unordered
MapEquality in Dart IterabletoListViewin Flutter- Password Mask in Flutter
- Fast
Object.toString()in Dart - Copying Bloc State in Flutter
IterableSubscripts in DartuseStatein Flutter Hooks- Folding Iterables in Dart
- Custom Iterables in Dart
- Class Clusters in Dart
Iterable+/- in Dart- Periodic Streams in Dart
EmptyOnErrorin DartStream<T>Initial Value in FlutterDouble.normalizein Dart- Hide Sensitive Information in Flutter
Iterable.compactMapin DartuseEffectin Flutter Hooks- Merging Streams in Dart
IsolateStream in Dart- Network Image Retry in Flutter
- Reusable APIs in Flutter
ListTileShadow in Flutter- Transparent AppBar in Flutter
- Constructors on Abstract Classes in Dart
@useResultin Dart@mustCallSuperin DartObject.hashin Dart- Expanded Equally in Flutter
- Random Iterable Value in Dart
- Hardcoded Strings in Flutter
- Manually Scroll in List View in Flutter
AsyncSnapshottoWidgetin Flutter- Breadcrumbs in Flutter
- Unique
MapValues in Dart - Smart Quotes/Dashes in Flutter
- Haptic Feedback in Flutter
- Localization Delegates in Flutter
- Extending Functions in Dart
- Paginated
ListViewin Flutter - Immutable Classes in Dart
- Card Widget in Flutter
- List Equality Ignoring Ordering in Dart
- Shorten GitHub URLs in Dart
- Time Picker in Flutter
- Throttled Print in Flutter
- Map Equality in Dart
- Unique Maps in Dart
- Raw Auto Complete in Flutter
- Title on
Objectin Dart - Compute in Flutter
- Filter on
Mapin Dart - Type Alias in Dart
ValueNotifierin Flutter- Object to Integer in Dart
- Image Opacity in Flutter
- Covariant in Dart
- Custom Errors in Streams in Dart
- Shake Animation in Flutter
- Throw Enums in Dart
FutureError Test in Flutter- Generic URL Retrieval in Dart
- Custom Error Widget in Flutter
- Handle Multiple
FutureErrors in Dart FutureError Handling in Dart- String to Toast in Flutter
- Waiting in Dart
- Loading Dialog in Flutter
- Compact Map on
Map<K,V>in Dart - Query Parameters in Dart
- Multiple Gradients in Container in Flutter
- Filter on
Stream<List<T>>in Dart - Generic Route Arguments in Flutter
- Generic Dialog in Flutter
- GitHub API in Flutter
ChangeNotifierin Flutter- Refresh Indicator in Flutter
- FlatMap in Dart
OrientationBuilderin Flutter- Linear Gradient in Flutter
- Bloc Text Editing Controller in Flutter
- Blurred TabBar in Flutter
- Play YouTube in Flutter
- ListView Background in Flutter
- Integer to Binary in Dart
- Split String by Length in Dart
- Image Tint in Flutter
- SlideTransition in Flutter
- Expansion Panels and Lists in Flutter
- Complete CRUD App in Flutter
- SQLite Storage in Flutter
- Circular Progress with Percentage in Flutter
- Opening URLs in Flutter
- Commodore 64 Screen in Flutter
- Animated Lists in Flutter
CheckboxListTilein Flutter-Operator onStringin Dart- Dart Progress for
Future<T> - Move Widget Shadows with Animation
- Gallery with Blurred Backgrounds in Flutter
- Custom Path Clippers in Flutter
- Frost Effect on Images in Flutter
- Custom Clippers in Flutter
- Check if Website is Up or Down in Dart
- Section Titles on ListView in Flutter
- Circular Progress in Flutter
- Displaying Scroll Wheels in Flutter
- Post Messages to Slack with Dart
- Unwrap
List<T?>?in Dart - Avoiding UI Jitters When Switching Widgets in Flutter
- Detect Redirects in Dart
- Proportional Constraints in Flutter
- Displaying Cupertino Action Sheets in Flutter
- Rotating
List<T>in Dart - Displaying SnackBars in Flutter
- Custom Tab Bar Using ToggleButtons in Flutter
- Hashable Mixins in Dart
- Flutter Tips and Tricks in Terminal
- Searching
List<List<T>>in Dart - Cloning Objects in Dart
- Color Filters in Flutter
- Flattening Lists in Dart
- Managing Duplicates in
List<T>in Dart - FlatMap and CompactMap in Dart
- Equality of
List<T>in Dart - Constants in Dart
- Displaying Scrollable Bottom Sheets in Flutter
- YouTube Ad Remover in Dart
- Fade Between Widgets in Flutter
- Sort Descriptors in Dart
- User Sortable Columns and Tables in Flutter
- Content-Length of
List<Uri>in Dart - Recursive Dot Notation on Maps in Dart
- Allow User Selection of Text in Flutter
- Placing Constraints on Widgets in Flutter
- Animating Position Changes in Flutter
- Transitioning Between Widgets in Flutter
- Doubly Linked Lists in Dart
- Reordering Items Inside List Views in Flutter
- Custom Stream Transformers in Dart
- Expanding Stream Elements in Dart
- Consume Streams for a Duration in Dart
- Shortening URLs in Dart
- LimitedBox Widget as ListView Items in Flutter
- Generically Convert Anything to Int in Dart
- Validating URL Certificates in Dart
- Displaying Popup Menus in Flutter
- Implementing Drag and Drop in Flutter
- Dismissing List Items in Flutter
- Animating Widgets with Ease in Flutter
- Displaying Tool Tips in Flutter
- Displaying Assorted Widgets Inside TableView in Flutter
- Page Indicator with Page View in Flutter
- Animating and Moving a Floating Action Button in Flutter
- Fading Network Image Widget in Flutter
- Transparent Alert Dialogs in Flutter
- Network Image Size in Dart
- Animated Icons in Flutter
- Custom Scroll Views in Flutter
- Parallax App Bar in Flutter
- JSON HTTP Requests in Dart
- URL Timeouts in Dart
- Detecting URL File Types in Dart
- Paginated Lists in Dart
- Requesting DELETE on APIs in Dart
- Animated Containers in Flutter
- Hiding Widgets in Flutter
- Simple Opacity Animation in Flutter
- Vignette Widget in Flutter
- Drop Down Button Configuration and Usage in Flutter
- Expandable List Items in Flutter
- Infinite Scrolling in Flutter
- Infinite Arrays in Dart
- Custom Color Picker Component in Flutter
- Displaying and Reacting to Switches in Flutter
- Displaying Bottom Bars in Flutter
- Displaying Buttons on AppBar in Flutter
- Displaying Bottom Sheets in Flutter
- Converting Enums to Radio Buttons in Flutter
- Check Existence of Websites in Flutter
- Images inside AlertDialog in Flutter
- Returning Values from AlertDialog in Flutter
- Simple Grid View in Flutter
- Rendering Bullet Points in Flutter
- Retrying Futures in Flutter
- Containers as ClipOvals in Flutter
- Rich Texts in Flutter
- Wrapping Widgets in Flutter
- Sweep Gradients in Flutter
StreamandStreamBuilderin Flutter- Blur Effect in Flutter
- Convert Enums to Strings in Dart
- Replacing Text in TextField in Flutter
- Aspect Ratio in Flutter
- Zoom and Pan in Flutter
- Resizing Images in Flutter to Fit Screen Height
- Validating URLs in Flutter
- FrameBuilder for Network Images in Flutter
- Adding Shadow to Icons in Flutter
- Calculating Median of Lists in Dart
- Generic Functions with Reduce in Dart
- Passing Back Data From a Screen to the Previous One in Flutter
- Flinging an Animation in Flutter
- Fade Animations in Flutter
- Throttling User Input in Flutter
- Censoring TextFields in Flutter
- Customizing TextButton in Flutter
- Multiline TextFields in Flutter
- Filtering TextField Input in Flutter
- Focusing Manually on TextFields in Flutter
- Data Streams Over HTTP/HTTPs in Dart
- Catching Nonexistent Accessors or Methods in Dart
- Using Expando in Dart
- Implementing Custom Maps in Dart
- Dynamically Calling Functions in Dart
- Factory Constructors in Dart
- Calculating the Sum of List Items in Dart
- Removing Duplicate Strings in Lists in Dart (Case-Insensitive)
- Implementing Range in Dart
- Converting Lists to Maps in Dart
- Implementing Hashable in Dart
- Random Name Generator in Dart
- Capturing Stack Traces in Dart Exceptions
- Removing Duplicates from Lists in Dart
- Optional Spread Operator in Dart
- Calling Optional Functions in Dart
- Odd-Even Sort in Dart
- Implementing Zip and Tuples in Dart
- Swapping Values in Lists with XOR in Dart
- Waiting for Multiple Futures in Dart
- Using Queues as Stacks in Dart
- Custom Iterators in Dart
- Iterables as Ranges + Transform in Dart
- Errors vs Exceptions in Dart
- Custom Annotations in Dart
- Classes as Enums in Dart
- Spread Operator in Collection Literals in Dart
StreamBuilderandStreamControllerin Dart- Almost Equal in Dart
- Enum Associated Values in Dart
- Implementing
Comparablein Dart - Implementing Custom Integer Types in Dart
- Custom Subscripts in Dart
- Dart List Enumeration with Index
- Applying Mixins to Other Mixins in Dart
- Parameter Types in Dart
- Custom Exceptions in Dart
rethrowing Exceptions in Dartmixins and JSON Parsing in Dartmixins vsabstract classes in Dart- Drawing Shapes in Flutter with
LayoutBuilder,CustomPaintandCustomPainter - Generic Type Aliases in Dart
- Callable Classes in Dart
- Synchronous Generators in Dart
- Implicit Interfaces in Dart
constConstructors in Dartasync-awaitOver RawFutures in Dart- Initializer List and Default Values as Convenience Intializers in Dart
- Extract Elements of Certain Type from Lists in Dart
- Type Promotion in Dart
- Extract Minimum and Maximum Values in
List<num>in Dart - Functions as First Class Citizens in Dart
LazyStream in Flutter and Dart
import 'dart:developer' as devtools show log;
import 'dart:typed_data' show Uint8List;
import 'package:flutter/services.dart' show NetworkAssetBundle, rootBundle;
import 'package:async/async.dart' show LazyStream;
extension LocalFileData on String {
Future<Uint8List> localFileData() => rootBundle.load(this).then(
(byteData) => byteData.buffer.asUint8List(),
);
}
extension Log on Object {
void log() => devtools.log(toString());
}
void testIt() async {
final stream = LazyStream(
() async {
final allData = await calculateAllData();
return getImagesData(allData);
},
);
await for (final data in stream) {
'Got data, length = ${data.length}'.log();
}
}
Stream<Uint8List> getImagesData(
List<Future<Uint8List>> allData,
) async* {
for (final data in allData) {
yield await data;
}
}
Future<List<Future<Uint8List>>> calculateAllData() async {
final futures = Iterable.generate(
3,
(i) => 'images/image_list${i + 1}.txt'
.localFileData()
.then((data) => String.fromCharCodes(data)),
);
final result = Future.wait(futures);
final lineSplitter = const LineSplitter();
List<Future<Uint8List>> allData = [];
for (final string in await result) {
final urls = lineSplitter.convert(string);
for (final url in urls) {
allData.add(
NetworkAssetBundle(Uri.parse(url))
.load(url)
.then((byteData) => byteData.buffer.asUint8List()),
);
}
}
return allData;
}
Cancelable APIs in Flutter
import 'dart:developer' as devtools show log;
import 'dart:typed_data' show Uint8List;
import 'package:flutter/services.dart' show NetworkAssetBundle, rootBundle;
import 'package:async/async.dart' show CancelableOperation;
extension Log on Object {
void log() => devtools.log(toString());
}
extension LocalFileData on String {
Future<Uint8List> localFileData() => rootBundle.load(this).then(
(byteData) => byteData.buffer.asUint8List(),
);
}
CancelableOperation<Uint8List> getImageOperation(String url) =>
CancelableOperation.fromFuture(
NetworkAssetBundle(Uri.parse(url))
.load(url)
.then((byteData) => byteData.buffer.asUint8List()),
onCancel: () => 'images/template.png'.localFileData(),
);
void testIt() async {
final operation = getImageOperation('http://127.0.0.1:5500/images/1.png');
final cancelledValue = await operation.cancel();
final result = await operation.valueOrCancellation(cancelledValue);
result?.log();
}
Asset Data in Flutter
import 'dart:typed_data' show Uint8List;
import 'package:flutter/services.dart' show rootBundle;
import 'dart:developer' as devtools show log;
extension Log on Object {
void log() => devtools.log(toString());
}
extension LocalFileData on String {
Future<Uint8List> localFileData() => rootBundle.load(this).then(
(byteData) => byteData.buffer.asUint8List(),
);
}
void testIt() async {
(await 'images/template.png'.localFileData()).log();
}
API Caching in Flutter
import 'dart:typed_data' show Uint8List;
import 'package:flutter/services.dart' show NetworkAssetBundle;
import 'dart:developer' as devtools show log;
import 'package:async/async.dart' show AsyncMemoizer;
extension Log on Object {
void log() => devtools.log(toString());
}
@immutable
class GetImageApi {
final String url;
final _fetch = AsyncMemoizer<Uint8List>();
GetImageApi({required this.url});
Future<Uint8List> fetch() => _fetch.runOnce(
() => NetworkAssetBundle(Uri.parse(url))
.load(url)
.then((byteData) => byteData.buffer.asUint8List()),
);
}
void testIt() async {
final api = GetImageApi(url: 'http://127.0.0.1:5500/images/1.png');
(await api.fetch()).log(); // fetched
(await api.fetch()).log(); // cached
}
FutureGroup in Dart
mixin FutureConvertible<T> {
Future<T> toFuture();
}
@immutable
class LoginApi with FutureConvertible<bool> {
@override
Future<bool> toFuture() => Future.delayed(
const Duration(seconds: 1),
() => true,
);
}
@immutable
class SignUpApi with FutureConvertible<bool> {
@override
Future<bool> toFuture() => Future.delayed(
const Duration(seconds: 1),
() => true,
);
}
extension Flatten on Iterable<bool> {
bool flatten() => fold(
true,
(lhs, rhs) => lhs && rhs,
);
}
extension Log on Object {
void log() => devtools.log(toString());
}
Future<bool> startup({
required bool shouldLogin,
required bool shouldSignUp,
}) {
final group = FutureGroup<bool>();
if (shouldLogin) {
group.add(LoginApi().toFuture());
}
if (shouldSignUp) {
group.add(SignUpApi().toFuture());
}
group.close();
return group.future.then((bools) => bools.flatten());
}
void testIt() async {
final success = await startup(
shouldLogin: true,
shouldSignUp: false,
);
success.log();
}
Flatten Iterable<bool> in Dart
extension Flatten on Iterable<bool> {
bool flatten() => fold(
true,
(lhs, rhs) => lhs && rhs,
);
}
void testIt() {
assert([true, false, true].flatten() == false);
assert([true, true, true].flatten() == true);
assert([false, false, false].flatten() == false);
assert([true].flatten() == true);
assert([false].flatten() == false);
}
Caching Temp Files in Flutter
@immutable
class NetworkImageAsset {
final String localPath;
final String url;
NetworkImageAsset({required int index})
: localPath = Directory.systemTemp.path + '/$index.png',
url = 'http://127.0.0.1:5500/images/$index}.png';
Future<bool> downloadAndSave() => NetworkAssetBundle(Uri.parse(url))
.load(url)
.then((byteData) => byteData.buffer.asUint8List())
.then((data) => File(localPath).writeAsBytes(data).then((_) => true))
.catchError((_) => false);
}
void testIt() async {
await Future.forEach(
Iterable.generate(
3,
(i) => NetworkImageAsset(index: i + 1),
),
(NetworkImageAsset asset) => asset.downloadAndSave(),
);
}
Custom Lists in Dart
import 'dart:developer' as devtools show log;
import 'dart:collection' show ListBase;
class LowercaseList extends ListBase<String> {
final List<String> _list = [];
@override
int get length => _list.length;
@override
set length(int newLength) => _list.length = newLength;
@override
String operator [](int index) => _list[index].toUpperCase();
@override
void operator []=(int index, value) => _list[index] = value;
@override
void addAll(Iterable<String> iterable) => _list.addAll(iterable);
@override
void add(String element) => _list.add(element);
}
extension Log on Object {
void log() => devtools.log(toString());
}
void testIt() {
final myList = LowercaseList();
myList.addAll(['foo', 'bar', 'baz']);
myList[0].log(); // FOO
myList[1].log(); // BAR
for (final item in myList) {
item.log(); // FOO, BAR, BAZ
}
}
Optional Chaining in Dart
@immutable
class Address {
final String? firstLine;
final String? secondLine;
const Address(this.firstLine, this.secondLine);
}
@immutable
class Person {
final Person? father;
final Address? address;
const Person(this.father, this.address);
}
extension GetFathersFirstAddressLine on Person {
String? get firstAddressLineOfFather => father?.address?.firstLine;
}
MapList in Flutter
extension MapToList<T> on Iterable<T> {
List<E> mapList<E>(E Function(T) toElement) =>
map(toElement).toList();
}
Future<bool> in Flutter
Future<bool> uploadImage({
required File file,
required String userId,
}) =>
FirebaseStorage.instance
.ref(userId)
.child(const Uuid().v4())
.putFile(file)
.then((_) => true)
.catchError((_) => false);
Async Bloc Init in Flutter
class App extends StatelessWidget {
const App({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return BlocProvider<AppBloc>(
create: (context) => AppBloc()..add(const AppEventInitialize()),
child: MaterialApp(
title: 'Photo Library',
theme: ThemeData(
primarySwatch: Colors.blue,
),
debugShowCheckedModeBanner: false,
home: BlocConsumer<AppBloc, AppState>(
listener: (context, state) {
// handle loading
if (state.isLoading) {
LoadingScreen().show(
context: context,
text: 'Loading...',
);
} else {
LoadingScreen().hide();
}
... rest of your code goes here
Firebase Auth Errors in Flutter
const authErrorMapping = {
'user-not-found': AuthErrorUserNotFound(),
'project-not-found': AuthErrorProjectNotFound(),
};
@immutable
abstract class AuthError {
factory AuthError.from(FirebaseAuthException exception) =>
authErrorMapping[exception.code.toLowerCase().trim()] ??
const AuthErrorUnknown();
}
@immutable
class AuthErrorUnknown implements AuthError {
const AuthErrorUnknown();
}
@immutable
class AuthErrorUserNotFound implements AuthError {
const AuthErrorUserNotFound();
}
@immutable
class AuthErrorProjectNotFound implements AuthError {
const AuthErrorProjectNotFound();
}
Debug Strings in Flutter
extension IfDebugging on String {
String? get ifDebugging => kDebugMode ? this : null;
}
class LoginView extends HookWidget {
const LoginView({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final emailController = useTextEditingController(
text: 'foo@bar.com'.ifDebugging,
);
final passwordController = useTextEditingController(
text: 'foobarbaz'.ifDebugging,
);
// rest of your code would be here ...
Keyboard Appearance in Flutter
class LoginView extends HookWidget {
const LoginView({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Log in'),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: const [
TextField(
keyboardType: TextInputType.emailAddress,
keyboardAppearance: Brightness.dark,
),
TextField(
obscureText: true,
obscuringCharacter: '◉',
),
],
),
),
);
}
}
Get String Data in Dart
extension ToList on String {
Uint8List toUint8List() => Uint8List.fromList(codeUnits);
}
final text1Data = 'Foo'.toUint8List();
final text2Data = 'Bar'.toUint8List();
Stream.startWith in Flutter
import 'package:async/async.dart' show StreamGroup;
import 'dart:developer' as devtools show log;
extension Log on Object {
void log() => devtools.log(toString());
}
extension StartWith<T> on Stream<T> {
Stream<T> startWith(T value) => StreamGroup.merge([
this,
Stream<T>.value(value),
]);
}
void testIt() {
Stream.periodic(const Duration(seconds: 1), (i) => i + 1)
.startWith(0)
.take(4)
.forEach((element) {
element.log();
}); // 0, 1, 2, 3
}
Optional Functions in Dart
typedef AppBlocRandomUrlPicker = String Function(Iterable<String> allUrls);
extension RandomElement<T> on Iterable<T> {
T getRandomElement() => elementAt(
math.Random().nextInt(length),
);
}
class AppBloc extends Bloc<AppEvent, AppState> {
String _pickRandomUrl(Iterable<String> allUrls) => allUrls.getRandomElement();
AppBloc({
required Iterable<String> urls,
AppBlocRandomUrlPicker? urlPicker,
}) : super(const AppState.empty()) {
on<LoadNextUrlEvent>(
(event, emit) {
emit(
const AppState(
isLoading: true,
data: null,
),
);
// pick a random URL to load
final url = (urlPicker ?? _pickRandomUrl)(urls);
HttpClient().getUrl(Uri.parse(url)); // continue here...
},
);
}
}
AnnotatedRegion in Flutter
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle.dark,
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Expanded(child: Container(color: Colors.blue)),
Expanded(child: Container(color: Colors.yellow)),
],
),
),
);
}
}
Unordered Map Equality in Dart
import 'package:collection/collection.dart';
import 'dart:developer' as devtools show log;
extension Log on Object {
void log() => devtools.log(toString());
}
extension UnorderedEquality<K, V> on Map<K, V> {
bool isEqualTo(Map<K, V> other) =>
const DeepCollectionEquality.unordered().equals(this, other);
}
void testIt() {
final dict1 = {
'name': 'foo',
'age': 20,
'values': ['foo', 'bar'],
};
final dict2 = {
'age': 20,
'name': 'foo',
'values': ['bar', 'foo'],
};
dict1.isEqualTo(dict2).log(); // true
}
Iterable to ListView in Flutter
extension ToListView<T> on Iterable<T> {
Widget toListView() => IterableListView(
iterable: this,
);
}
class IterableListView<T> extends StatelessWidget {
final Iterable<T> iterable;
const IterableListView({
Key? key,
required this.iterable,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: iterable.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(
iterable.elementAt(index).toString(),
),
);
},
);
}
}
@immutable
class Person {
final String name;
final int age;
const Person({required this.name, required this.age});
@override
String toString() => '$name, $age years old';
}
const persons = [
Person(name: 'Foo', age: 20),
Person(name: 'Bar', age: 30),
Person(name: 'Baz', age: 40),
];
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Home Page'),
),
body: persons.toListView(),
);
}
}
Password Mask in Flutter
class PasswordTextField extends StatelessWidget {
const PasswordTextField({
Key? key,
required this.passwordController,
}) : super(key: key);
final TextEditingController passwordController;
@override
Widget build(BuildContext context) {
return TextField(
controller: passwordController,
obscureText: true,
obscuringCharacter: '◉',
decoration: const InputDecoration(
hintText: 'Enter your password here...',
),
);
}
}
Fast Object.toString() in Dart
@immutable
class AppState {
final bool isLoading;
final Object? loginError;
final String? loginHandle;
final Iterable<String>? fetchedNotes;
@override
String toString() => {
'isLoading': isLoading,
'loginError': loginError,
'loginHandle': loginHandle,
'fetchedNotes': fetchedNotes
}.toString();
const AppState({
required this.isLoading,
required this.loginError,
required this.loginHandle,
required this.fetchedNotes,
});
}
Copying Bloc State in Flutter
@immutable
class AppState {
final bool isLoading;
final LoginHandle? loginHandle;
final Iterable<Note>? fetchedNotes;
const AppState.empty()
: isLoading = false,
loginHandle = null,
fetchedNotes = null;
const AppState({
required this.isLoading,
required this.loginHandle,
required this.fetchedNotes,
});
AppState copiedWith({
bool? isLoading,
LoginHandle? loginHandle,
Iterable<Note>? fetchedNotes,
}) =>
AppState(
isLoading: isLoading ?? this.isLoading,
loginHandle: loginHandle ?? this.loginHandle,
fetchedNotes: fetchedNotes ?? this.fetchedNotes,
);
}
Iterable Subscripts in Dart
// Free Flutter Course 💙 https://linktr.ee/vandadnp
// Want to support my work 🤝? https://buymeacoffee.com/vandad
import 'dart:developer' as devtools show log;
extension Log on Object? {
void log() => devtools.log(toString());
}
extension Subscript<T> on Iterable<T> {
T? operator [](int index) => length > index ? elementAt(index) : null;
}
void testIt() {
Iterable.generate(10, (i) => i + 1)[0].log(); // 1
Iterable.generate(1, (i) => i)[2].log(); // null
Iterable.generate(10, (i) => i + 1)[9].log(); // 10
Iterable.generate(0, (i) => i)[0].log(); // null
}
useState in Flutter Hooks
import 'package:flutter_hooks/flutter_hooks.dart';
import 'dart:math' show min;
@immutable
class VirtualTab {
final Icon icon;
final String text;
const VirtualTab({
required this.icon,
required this.text,
});
}
const tabs = [
VirtualTab(
icon: Icon(Icons.picture_as_pdf),
text: 'All PDF files',
),
VirtualTab(
icon: Icon(Icons.ac_unit_outlined),
text: 'Data page',
),
VirtualTab(
icon: Icon(Icons.person),
text: 'Profile page',
),
];
class HomePage extends HookWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final tabCount = useState(1);
return DefaultTabController(
length: tabCount.value,
initialIndex: tabCount.value - 1,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
tabs: tabs
.take(tabCount.value)
.map((tab) => Tab(icon: tab.icon))
.toList(),
),
),
body: CustomTabBarView(tabCount: tabCount),
),
);
}
}
class CustomTabBarView extends StatelessWidget {
const CustomTabBarView({
Key? key,
required this.tabCount,
}) : super(key: key);
final ValueNotifier<int> tabCount;
@override
Widget build(BuildContext context) {
return TabBarView(
children: tabs
.take(tabCount.value)
.map(
(tab) => Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
Text(tab.text),
TextButton(
onPressed: () {
final newLength = min(
tabs.length,
tabCount.value + 1,
);
tabCount.value = newLength;
},
child: const Text('Create next tab'),
)
],
),
),
)
.toList(),
);
}
}
Folding Iterables in Dart
import 'dart:developer' as devtools show log;
extension Log on Object {
void log() => devtools.log(toString());
}
void testIt() {
final values = ['foo', 'bar', 'baz', '1.0'];
values.fold<int>(0, (pe, e) => pe + e.length); // 12
values.fold<String>('', (pe, e) => '$pe$e'); // foobarbaz1.0
values.fold<Map<String, int>>(
{},
(pe, e) => pe..addAll(<String, int>{e: e.length}),
).log(); // {foo: 3, bar: 3, baz: 3, 1.0: 3}
values.fold<double>(
0.0,
(pe, e) => pe + (double.tryParse(e) ?? 0.0),
); // 1.0
}
Custom Iterables in Dart
class Address with IterableMixin {
final String line1;
final String line2;
final String postCode;
Address({
required this.line1,
required this.line2,
required this.postCode,
});
@override
Iterator<String> get iterator => [line1, line2, postCode].iterator;
}
void testIt() {
final address = Address(
line1: 'Foo bar avenue, #10',
line2: 'Baz street',
postCode: '123456',
);
for (final line in address) {
devtools.log(line);
}
}
Class Clusters in Dart
enum AnimalType { dog, cat }
@immutable
abstract class Animal {
const Animal();
factory Animal.fromType(AnimalType type) {
switch (type) {
case AnimalType.dog:
return const Dog();
case AnimalType.cat:
return const Cat();
}
}
void makeNoise();
}
@immutable
class Dog extends Animal {
const Dog();
@override
void makeNoise() => 'Woof'.log();
}
@immutable
class Cat extends Animal {
const Cat();
@override
void makeNoise() => 'Meow'.log();
}
void testIt() {
final cat = Animal.fromType(AnimalType.cat);
cat.makeNoise();
final dog = Animal.fromType(AnimalType.dog);
dog.makeNoise();
}
Iterable +/- in Dart
extension AddRemoveItems<T> on Iterable<T> {
Iterable<T> operator +(T other) => followedBy([other]);
Iterable<T> operator -(T other) => where((element) => element != other);
}
void testIt() {
final values = ['foo', 'bar']
.map((e) => e.toUpperCase()) + 'BAZ';
values.log(); // (FOO, BAR, BAZ)
(values - 'BAZ').log(); // (FOO, BAR)
}
Periodic Streams in Dart
import 'dart:io';
import 'package:flutter/material.dart';
import 'dart:convert';
import 'dart:developer' as devtools show log;
extension Log on Object {
void log() => devtools.log(toString());
}
@immutable
class Person {
final String name;
final int age;
const Person({
required this.name,
required this.age,
});
Person.fromJson(Map<String, dynamic> json)
: name = json["name"] as String,
age = json["age"] as int;
@override
String toString() => 'Person ($name, $age years old)';
}
mixin ListOfThingsAPI<T> {
Future<Iterable<T>> get(String url) => HttpClient()
.getUrl(Uri.parse(url))
.then((req) => req.close())
.then((resp) => resp.transform(utf8.decoder).join())
.then((str) => json.decode(str) as List<dynamic>)
.then((list) => list.cast());
}
class GetPeople with ListOfThingsAPI<Map<String, dynamic>> {
Future<Iterable<Person>> getPeople(url) => get(url).then(
(jsons) => jsons.map(
(json) => Person.fromJson(json),
),
);
}
Stream<dynamic> every(Duration duration) => Stream.periodic(duration);
extension IntToDuration on int {
Duration get seconds => Duration(seconds: this);
}
void testIt() async {
await for (final people in every(3.seconds).asyncExpand(
(_) => GetPeople()
.getPeople('http://127.0.0.1:5500/apis/people1.json')
.asStream(),
)) {
people.log();
}
}
/* people1.json
[
{
"name": "Foo 1",
"age": 20
},
{
"name": "Bar 1",
"age": 30
}
]
*/
EmptyOnError in Dart
import 'dart:io';
import 'package:flutter/material.dart';
import 'dart:convert';
import 'dart:developer' as devtools show log;
extension Log on Object {
void log() => devtools.log(toString());
}
@immutable
class Person {
final String name;
final int age;
const Person({
required this.name,
required this.age,
});
Person.fromJson(Map<String, dynamic> json)
: name = json["name"] as String,
age = json["age"] as int;
@override
String toString() => 'Person ($name, $age years old)';
}
const people1Url = 'http://127.0.0.1:5500/apis/people11.json';
const people2Url = 'http://127.0.0.1:5500/apis/people2.json';
extension EmptyOnError<E> on Future<List<Iterable<E>>> {
Future<List<Iterable<E>>> emptyOnError() => catchError(
(_, __) => List<Iterable<E>>.empty(),
);
}
Future<Iterable<Person>> parseJson(String url) => HttpClient()
.getUrl(Uri.parse(url))
.then((req) => req.close())
.then((resp) => resp.transform(utf8.decoder).join())
.then((str) => json.decode(str) as List<dynamic>)
.then((json) => json.map((e) => Person.fromJson(e)));
void testIt() async {
final persons = await Future.wait([
parseJson(people1Url),
parseJson(people2Url),
]).emptyOnError();
persons.log();
}
Stream<T> Initial Value in Flutter
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
void main() {
runApp(
MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
debugShowCheckedModeBanner: false,
home: const HomePage(),
),
);
}
const url = 'https://bit.ly/3x7J5Qt';
class HomePage extends HookWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
late final StreamController<double> controller;
controller = useStreamController<double>(onListen: () {
controller.sink.add(0.0);
});
return Scaffold(
appBar: AppBar(
title: const Text('Home page'),
),
body: StreamBuilder<double>(
stream: controller.stream,
builder: (context, snapshot) {
if (!snapshot.hasData) {
return const CircularProgressIndicator();
} else {
final rotation = snapshot.data ?? 0.0;
return GestureDetector(
onTap: () {
controller.sink.add(rotation + 10.0);
},
child: RotationTransition(
turns: AlwaysStoppedAnimation(rotation / 360.0),
child: Center(
child: Image.network(url),
),
),
);
}
}),
);
}
}
Double.normalize in Dart
import 'dart:developer' as devtools show log;
extension Normalize on double {
double normalized(
double selfRangeMin,
double selfRangeMax, [
double normalizedRangeMin = 0.0,
double normalizedRangeMax = 1.0,
]) =>
(normalizedRangeMax - normalizedRangeMin) *
((this - selfRangeMin) / (selfRangeMax - selfRangeMin)) +
normalizedRangeMin;
}
extension Log on Object {
void log() => devtools.log(toString());
}
void testIt() async {
2.0.normalized(0, 2.0).log(); // 1.0
4.0.normalized(0, 8.0).log(); // 0.5
5.0.normalized(4.0, 6.0, 10.0, 20.0).log(); // 15
}
Hide Sensitive Information in Flutter
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
void main() {
runApp(
MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
debugShowCheckedModeBanner: false,
home: const HomePage(),
),
);
}
class HomePage extends HookWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final state = useAppLifecycleState();
return Scaffold(
appBar: AppBar(
title: const Text('Home Page'),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Opacity(
opacity: state == AppLifecycleState.resumed ? 1.0 : 0.0,
child: Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
blurRadius: 10,
color: Colors.black.withAlpha(100),
spreadRadius: 10,
),
],
),
child: Image.asset('assets/card.png'),
),
),
),
);
}
}
Iterable.compactMap in Dart
import 'dart:developer' as devtools show log;
extension Log on Object {
void log() => devtools.log(toString());
}
extension CompactMap<T> on Iterable<T?> {
Iterable<T> compactMap<E>([
E? Function(T?)? transform,
]) =>
map(transform ?? (e) => e).where((e) => e != null).cast();
}
const list = ['Hello', null, 'World'];
void testIt() {
list.log(); // [Hello, null, World]
list.compactMap().log(); // [Hello, World]
list.compactMap((e) => e?.toUpperCase()).log(); // [HELLO, WORLD]
}
useEffect in Flutter Hooks
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
void main() {
runApp(
MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
debugShowCheckedModeBanner: false,
home: const HomePage(),
),
);
}
class HomePage extends HookWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final controller = useTextEditingController();
final text = useState('');
useEffect(
() {
void listener() {
text.value = controller.text;
}
controller.addListener(listener);
return () => controller.removeListener(listener);
},
[controller],
);
return Scaffold(
body: Column(
children: [
TextField(
controller: controller,
),
Text('You typed ${text.value}')
],
),
);
}
}
Merging Streams in Dart
import 'package:async/async.dart' show StreamGroup;
import 'dart:developer' as devtools show log;
extension Log on Object {
void log() => devtools.log(toString());
}
void testIt() async {
final streams = Iterable.generate(
3,
(i) => Stream.periodic(
const Duration(seconds: 1),
(_) => 'Stream $i: ${DateTime.now().toIso8601String()}',
).take(i + 1),
);
await for (final now in StreamGroup.merge(streams)) {
now.log();
}
}
Isolate Stream in Dart
Stream<String> getMessages() {
final rp = ReceivePort();
return Isolate.spawn(_getMessages, rp.sendPort)
.asStream()
.asyncExpand((_) => rp)
.takeWhile((element) => element is String)
.cast();
}
void _getMessages(SendPort sp) async {
await for (final now in Stream.periodic(
const Duration(seconds: 1),
(_) => DateTime.now().toIso8601String(),
).take(10)) {
sp.send(now);
}
Isolate.exit(sp);
}
void testIt() async {
await for (final msg in getMessages()) {
msg.log();
}
}
Network Image Retry in Flutter
@immutable
class RetryStrategy {
final bool shouldRetry;
final Duration waitBeforeRetry;
const RetryStrategy({
required this.shouldRetry,
required this.waitBeforeRetry,
});
}
typedef Retrier = RetryStrategy Function(String url, Object error);
class NetworkImageWithRetry extends StatelessWidget {
final Widget loadingWidget;
final Widget errorWidget;
final String url;
final Retrier retrier;
final _controller = StreamController<Uint8List>.broadcast();
NetworkImageWithRetry({
Key? key,
required this.url,
required this.retrier,
required this.loadingWidget,
required this.errorWidget,
}) : super(key: key);
void getData() async {
while (true == true) {
try {
final networkAsset = NetworkAssetBundle(Uri.parse(url));
final loaded = await networkAsset.load(url);
final bytes = loaded.buffer.asUint8List();
_controller.sink.add(bytes);
break;
} catch (e) {
final strategy = retrier(url, e);
if (strategy.shouldRetry) {
await Future.delayed(strategy.waitBeforeRetry);
} else {
_controller.sink.addError(e);
break;
}
}
}
}
@override
Widget build(BuildContext context) {
getData();
return StreamBuilder(
stream: _controller.stream,
builder: (context, AsyncSnapshot<Uint8List> snapshot) {
if (snapshot.hasError) {
return errorWidget;
} else {
final data = snapshot.data;
if (snapshot.hasData && data != null) {
return Image.memory(data);
} else {
return loadingWidget;
}
}
},
);
}
}
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Image Retry'),
),
body: NetworkImageWithRetry(
url: 'https://bit.ly/3qYOtDm',
errorWidget: const Text('Got an error!'),
loadingWidget: const Text('Loading...'),
retrier: (url, error) {
return RetryStrategy(
shouldRetry: error is! FlutterError,
waitBeforeRetry: const Duration(seconds: 1),
);
},
),
);
}
}
Reusable APIs in Flutter
import 'dart:io';
import 'package:flutter/material.dart';
import 'dart:developer' as devtools show log;
import 'dart:convert' show utf8;
import 'package:meta/meta.dart' show useResult;
extension Log on Object {
void log() => devtools.log(toString());
}
extension GetOnUri on Object {
Future<HttpClientResponse> getUrl(
String url,
) =>
HttpClient()
.getUrl(
Uri.parse(
url,
),
)
.then((req) => req.close());
}
mixin CanMakeGetCall {
String get url;
@useResult
Future<String> getString() => getUrl(url).then(
(response) => response
.transform(
utf8.decoder,
)
.join(),
);
}
@immutable
class GetPeople with CanMakeGetCall {
const GetPeople();
@override
String get url => 'http://127.0.0.1:5500/apis/people.json';
}
void testIt() async {
final people = await const GetPeople().getString();
devtools.log(people);
}
ListTile Shadow in Flutter
enum Currency { dollars }
extension Title on Currency {
String get title {
switch (this) {
case Currency.dollars:
return '\$';
}
}
}
@immutable
class Item {
final IconData icon;
final String name;
final double price;
final Currency currency;
const Item({
required this.icon,
required this.name,
required this.price,
required this.currency,
});
String get description => '$price${currency.title}';
}
const items = [
Item(
icon: Icons.camera_alt,
name: 'Camera',
price: 300,
currency: Currency.dollars,
),
Item(
icon: Icons.house,
name: 'House',
price: 1000000,
currency: Currency.dollars,
),
Item(
icon: Icons.watch,
name: 'Smart Watch',
price: 200,
currency: Currency.dollars,
),
];
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Home Page'),
),
body: ListView.builder(
itemCount: items.length,
itemBuilder: (_, index) {
return ItemTile(
item: items[index],
);
},
),
);
}
}
class ItemTile extends StatelessWidget {
final Item item;
const ItemTile({Key? key, required this.item}) : super(key: key);
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Stack(
children: [
const TileBackground(),
CustomTile(item: item),
],
),
);
}
}
class CustomTile extends StatelessWidget {
final Item item;
const CustomTile({
Key? key,
required this.item,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(bottom: 7.0),
child: Container(
decoration: customDecoration(),
child: ListTile(
leading: Icon(
item.icon,
color: Colors.white,
),
title: Text(item.name),
subtitle: Text(item.description),
),
),
);
}
}
BoxDecoration customDecoration() {
return BoxDecoration(
color: const Color.fromARGB(255, 0x7d, 0xcf, 0xff),
borderRadius: BorderRadius.circular(10.0),
border: Border.all(
color: Colors.black,
width: 2.0,
),
);
}
class TileBackground extends StatelessWidget {
const TileBackground({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Positioned.fill(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 6.0),
child: Container(
decoration: BoxDecoration(
color: const Color.fromARGB(255, 202, 255, 127),
borderRadius: BorderRadius.circular(10.0),
border: Border.all(
color: Colors.black,
width: 2.0,
),
),
),
),
);
}
}
Transparent AppBar in Flutter
const images = [
'https://bit.ly/3x7J5Qt',
'https://bit.ly/3ywI8l6',
'https://bit.ly/36fNNj9',
'https://bit.ly/3jOueGG',
'https://bit.ly/3qYOtDm',
'https://bit.ly/3wt11Ec',
'https://bit.ly/3yvFg7X',
'https://bit.ly/3ywzOla',
'https://bit.ly/3wnASpW',
'https://bit.ly/3jXSDto',
];
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
extendBodyBehindAppBar: true,
appBar: AppBar(
elevation: 0.0,
backgroundColor: Colors.blueAccent.withAlpha(200),
title: const Text('Transparent App Bar in Flutter'),
),
body: const ImagesScrollView(),
);
}
}
class ImagesScrollView extends StatelessWidget {
const ImagesScrollView({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
padding: const EdgeInsets.only(top: 80.0),
child: Padding(
padding: const EdgeInsets.only(
top: 40.0,
left: 10.0,
right: 10.0,
),
child: Column(
children: images
.map((url) => ElevatedNetworkImage(url: url))
.expand(
(img) => [
img,
const SizedBox(height: 30.0),
],
)
.toList(),
),
),
);
}
}
class ElevatedNetworkImage extends StatelessWidget {
final String url;
const ElevatedNetworkImage({Key? key, required this.url}) : super(key: key);
@override
Widget build(BuildContext context) {
return PhysicalShape(
color: Colors.white,
clipper: Clipper(),
elevation: 20.0,
clipBehavior: Clip.none,
shadowColor: Colors.white.withAlpha(200),
child: CutEdges(
child: Image.network(url),
),
);
}
}
class Clipper extends CustomClipper<Path> {
static const variance = 0.2;
static const reverse = 1.0 - variance;
@override
Path getClip(Size size) {
final path = Path();
path.moveTo(0.0, size.height * Clipper.variance);
path.lineTo(size.width * Clipper.variance, 0.0);
path.lineTo(size.width, 0.0);
path.lineTo(size.width, size.height * Clipper.reverse);
path.lineTo(size.width * Clipper.reverse, size.height);
path.lineTo(0.0, size.height);
path.lineTo(0.0, size.height * Clipper.variance);
path.close();
return path;
}
@override
bool shouldReclip(covariant CustomClipper<Path> oldClipper) => false;
}
class CutEdges extends StatelessWidget {
final Widget child;
const CutEdges({Key? key, required this.child}) : super(key: key);
@override
Widget build(BuildContext context) {
return ClipPath(
clipper: Clipper(),
child: child,
);
}
}
Constructors on Abstract Classes in Dart
import 'dart:developer' as devtools show log;
extension Log on Object {
void log() => devtools.log(toString());
}
enum Type { dog, cat }
abstract class CanRun {
final Type type;
const CanRun({required this.type});
}
class Cat extends CanRun {
const Cat() : super(type: Type.cat);
}
class Dog extends CanRun {
const Dog() : super(type: Type.dog);
}
@useResult in Dart
import 'package:meta/meta.dart' show useResult;
class Person {
final String firstName;
final String lastName;
const Person({
required this.firstName,
required this.lastName,
});
@useResult
String fullName() => '$firstName $lastName';
}
void printFullName() {
const Person(
firstName: 'Foo',
lastName: 'Bar',
).fullName();
}
@mustCallSuper in Dart
class Animal {
@mustCallSuper
void run() {}
}
class Dog extends Animal {
@override
void run() {}
}
Object.hash in Dart
class BreadCrumb {
final bool isActive;
final String name;
BreadCrumb({
required this.isActive,
required this.name,
});
BreadCrumb activated() => BreadCrumb(
isActive: true,
name: name,
);
@override
bool operator ==(covariant BreadCrumb other) =>
isActive == other.isActive && name == other.name;
@override
int get hashCode => Object.hash(isActive, name);
}
Expanded Equally in Flutter
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
debugShowCheckedModeBanner: false,
home: const HomePage(),
),
);
}
extension ExpandEqually on Iterable<Widget> {
Iterable<Widget> expandedEqually() => map(
(w) => Expanded(
flex: 1,
child: w,
),
);
}
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Home Page'),
),
body: Column(
children: [
Row(
mainAxisSize: MainAxisSize.max,
children: [
Container(
height: 200,
color: Colors.yellow,
),
Container(
height: 200,
color: Colors.blue,
),
].expandedEqually().toList(),
)
],
),
);
}
}
Random Iterable Value in Dart
import 'dart:math' as math show Random;
extension RandomElement<T> on Iterable<T> {
T getRandomElement() => elementAt(
math.Random().nextInt(length),
);
}
final colors = [Colors.blue, Colors.red, Colors.brown];
class HomePage extends StatelessWidget {
final color = ValueNotifier<MaterialColor>(
colors.getRandomElement(),
);
HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('List.Random in Flutter'),
),
body: ColorPickerButton(color: color),
);
}
}
class ColorPickerButton extends StatelessWidget {
final ValueNotifier<MaterialColor> color;
const ColorPickerButton({
Key? key,
required this.color,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return ValueListenableBuilder<Color>(
valueListenable: color,
builder: (context, value, child) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: CenteredTight(
child: TextButton(
style: TextButton.styleFrom(backgroundColor: value),
onPressed: () {
color.value = colors.getRandomElement();
},
child: const Text(
'Change color',
style: TextStyle(
fontSize: 30,
color: Colors.white,
),
),
),
),
);
},
);
}
}
Hardcoded Strings in Flutter
extension Hardcoded on String {
String get hardcoded => '$this 🧨';
}
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
'My hardcoded string'.hardcoded,
),
),
body: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('String in body'.hardcoded),
],
),
);
}
}
Manually Scroll in List View in Flutter
// Free Flutter Course 💙 https://linktr.ee/vandadnp
import 'package:scrollable_positioned_list/scrollable_positioned_list.dart';
class HomePage extends StatelessWidget {
final _controller = ItemScrollController();
HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Testing'),
),
body: ScrollablePositionedList.builder(
itemScrollController: _controller,
itemCount: allImages.length + 1,
itemBuilder: (context, index) {
if (index == 0) {
return IndexSelector(
count: allImages.length,
onSelected: (index) {
_controller.scrollTo(
index: index + 1,
duration: const Duration(milliseconds: 370),
);
},
);
} else {
return ImageWithTitle(index: index);
}
},
),
);
}
}
class ImageWithTitle extends StatelessWidget {
final int index;
const ImageWithTitle({
Key? key,
required this.index,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Column(
children: [
Text(
'Image $index',
style: const TextStyle(fontSize: 30.0),
),
Image.network(allImages.elementAt(index - 1)),
],
);
}
}
typedef OnIndexSelected = void Function(int index);
class IndexSelector extends StatelessWidget {
final int count;
final OnIndexSelected onSelected;
final String prefix;
const IndexSelector({
Key? key,
required this.count,
required this.onSelected,
this.prefix = 'Image',
}) : super(key: key);
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: Iterable.generate(
count,
(index) => TextButton(
onPressed: () {
onSelected(index);
},
child: Text('$prefix ${index + 1}'),
),
).toList(),
),
);
}
}
const imageUrls = [
'https://bit.ly/3ywI8l6',
'https://bit.ly/36fNNj9',
'https://bit.ly/3jOueGG',
'https://bit.ly/3qYOtDm',
'https://bit.ly/3wt11Ec',
'https://bit.ly/3yvFg7X',
'https://bit.ly/3ywzOla',
'https://bit.ly/3wnASpW',
'https://bit.ly/3jXSDto',
];
AsyncSnapshot to Widget in Flutter
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
void main() {
runApp(
MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const HomePage(),
),
);
}
final future = Future<String>.delayed(
const Duration(seconds: 3),
() => 'Hello world',
);
typedef ResolveToWidget<T> = Widget Function(
ConnectionState connectionState,
AsyncSnapshot<T> snapshot,
);
extension Materialize on AsyncSnapshot {
Widget materialize(ResolveToWidget f) => f(
connectionState,
this,
);
}
class HomePage extends HookWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Hooks'),
),
body: useFuture(future).materialize((connectionState, snapshot) {
switch (connectionState) {
case ConnectionState.done:
return Text(snapshot.data ?? '');
default:
return const CircularProgressIndicator();
}
}),
);
}
}
Breadcrumbs in Flutter
@immutable
class BreadCrumbPath {
final String title;
final bool isActive;
const BreadCrumbPath({
required this.title,
required this.isActive,
});
BreadCrumbPath activated() {
return BreadCrumbPath(
title: title,
isActive: true,
);
}
@override
String toString() => title;
}
class BreatCrumbPathView extends StatelessWidget {
final BreadCrumbPath path;
const BreatCrumbPathView({
Key? key,
required this.path,
}) : super(key: key);
@override
Widget build(BuildContext context) {
final title = path.isActive ? '${path.title} →' : path.title;
return Padding(
padding: const EdgeInsets.all(2.0),
child: Text(
title,
style: TextStyle(
height: 1.0,
fontSize: 20.0,
color: path.isActive ? Colors.blueAccent : Colors.black,
),
),
);
}
}
typedef OnBreadCrumbPathTapped = void Function(BreadCrumbPath path);
class BreadCrumbView extends StatelessWidget {
final OnBreadCrumbPathTapped onTapped;
final Stream<List<BreadCrumbPath>> paths;
const BreadCrumbView({
Key? key,
required this.paths,
required this.onTapped,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return StreamBuilder<List<BreadCrumbPath>>(
stream: paths,
builder: (context, snapshot) {
final List<Widget> views;
switch (snapshot.connectionState) {
case ConnectionState.waiting:
case ConnectionState.active:
final paths = snapshot.data ?? [];
final views = paths
.map(
(path) => GestureDetector(
onTap: () => onTapped(path),
child: BreatCrumbPathView(path: path),
),
)
.toList();
return Wrap(
spacing: 4.0,
children: views,
alignment: WrapAlignment.start,
crossAxisAlignment: WrapCrossAlignment.center,
);
default:
return Wrap();
}
},
);
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
List<BreadCrumbPath> _paths = [];
late final TextEditingController _textController;
late final StreamController<List<BreadCrumbPath>> _pathsController;
@override
void initState() {
_pathsController = StreamController<List<BreadCrumbPath>>.broadcast(
onListen: () {
_pathsController.add(_paths);
},
);
_textController = TextEditingController();
super.initState();
}
@override
void dispose() {
_textController.dispose();
_pathsController.close();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Breadcrumb in Flutter'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
BreadCrumbView(
paths: _pathsController.stream,
onTapped: (path) async {
await showBreadCrumbPathTappedDialog(
context,
path,
);
},
),
TextField(
controller: _textController,
textAlign: TextAlign.center,
decoration: const InputDecoration(
hintText: 'Enter a new path here',
),
),
TextButton(
onPressed: () {
_paths = [
..._paths.map((p) => p.activated()),
BreadCrumbPath(
title: _textController.text,
isActive: false,
),
];
_pathsController.add(_paths);
_textController.clear();
},
child: const Center(
child: Text('Add new path'),
),
),
],
),
),
);
}
}
Future<void> showBreadCrumbPathTappedDialog(
BuildContext context,
BreadCrumbPath path,
) {
return showDialog(
context: context,
builder: (context) {
return AlertDialog(
content: Text('You tapped on $path'),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: const Text('OK'),
),
],
);
},
);
}
Unique Map Values in Dart
import 'dart:developer' as devtools show log;
extension ContainsDuplicateValues on Map {
bool get containsDuplicateValues =>
{...values}.length != values.length;
}
extension Log on Object {
void log() => devtools.log(toString());
}
const people1 = {
1: 'Foo',
2: 'Bar',
};
const people2 = {
1: 'Foo',
2: 'Foo',
};
void testIt() {
people1.containsDuplicateValues.log(); // false
people2.containsDuplicateValues.log(); // true
}
Smart Quotes/Dashes in Flutter
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Smart Quotes/Dashes in Flutter'),
),
body: const Padding(
padding: EdgeInsets.all(16.0),
child: TextField(
smartQuotesType: SmartQuotesType.disabled,
smartDashesType: SmartDashesType.disabled,
maxLines: null,
),
),
);
}
}
Haptic Feedback in Flutter
class CenteredTight extends StatelessWidget {
final Widget child;
const CenteredTight({
Key? key,
required this.child,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [child],
);
}
}
class FullscreenImage extends StatefulWidget {
final String imageUrl;
const FullscreenImage({Key? key, required this.imageUrl}) : super(key: key);
@override
State<FullscreenImage> createState() => _FullscreenImageState();
}
class _FullscreenImageState extends State<FullscreenImage> {
var shouldDisplayAppbar = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: shouldDisplayAppbar ? AppBar(title: const Text('Image')) : null,
body: GestureDetector(
onTap: () {
setState(() => shouldDisplayAppbar = !shouldDisplayAppbar);
},
child: Image.network(
widget.imageUrl,
alignment: Alignment.center,
width: double.infinity,
height: double.infinity,
fit: BoxFit.cover,
),
),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Haptic Feedback in Flutter'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: CenteredTight(
child: FractionallySizedBox(
heightFactor: 0.7,
child: GestureDetector(
onLongPress: () async {
await HapticFeedback.lightImpact();
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) {
return const FullscreenImage(
imageUrl: imageUrl,
);
},
),
);
},
child: Image.network(imageUrl),
),
),
),
),
);
}
}
Localization Delegates in Flutter
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
runApp(
MaterialApp(
localizationsDelegates: AppLocalizations.localizationsDelegates,
supportedLocales: AppLocalizations.supportedLocales,
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: BlocProvider<AuthBloc>(
create: (context) => AuthBloc(FirebaseAuthProvider()),
child: const HomePage(),
),
routes: {
createOrUpdateNoteRoute: (context) => const CreateUpdateNoteView(),
},
),
);
}
Extending Functions in Dart
import 'dart:developer' as devtools show log;
extension ToTextButton on VoidCallback {
TextButton toTextButton(String title) {
return TextButton(
onPressed: this,
child: Text(title),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Extensions in Flutter'),
),
body: () {
devtools.log('I am pressed');
}.toTextButton('Press me'),
);
}
}
Paginated ListView in Flutter
@immutable
class Season {
final String name;
final String imageUrl;
const Season({required this.name, required this.imageUrl});
const Season.spring()
: name = 'Spring',
imageUrl = 'https://cnn.it/3xu58Ap';
const Season.summer()
: name = 'Summer',
imageUrl = 'https://bit.ly/2VcCSow';
const Season.autumn()
: name = 'Autumn',
imageUrl = 'https://bit.ly/3A3zStC';
const Season.winter()
: name = 'Winter',
imageUrl = 'https://bit.ly/2TNY7wi';
}
const allSeasons = [
Season.spring(),
Season.summer(),
Season.autumn(),
Season.winter()
];
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final width = MediaQuery.of(context).size.width;
final height = width / (16.0 / 9.0);
return Scaffold(
appBar: AppBar(
title: const Text('PageScrollPhysics in Flutter'),
),
body: SizedBox(
width: width,
height: height,
child: ListView(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
physics: const PageScrollPhysics(),
clipBehavior: Clip.antiAlias,
children: allSeasons.map((season) {
return SizedBox(
width: width,
height: height,
child: Image.network(
season.imageUrl,
height: height,
fit: BoxFit.cover,
),
);
}).toList(),
),
),
);
}
}
Immutable Classes in Dart
import 'package:flutter/foundation.dart' show immutable;
@immutable
abstract class Animal {
final String name;
const Animal(this.name);
}
class Cat extends Animal {
const Cat() : super('Cindy Clawford');
}
class Dog extends Animal {
int age;
Dog()
: age = 0,
super('Bark Twain');
}
Card Widget in Flutter
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Card in Flutter'),
),
body: Image.network(
'https://bit.ly/36fNNj9',
frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
return Card(
child: child,
clipBehavior: Clip.antiAlias,
);
},
loadingBuilder: (context, child, loadingProgress) {
final totalBytes = loadingProgress?.expectedTotalBytes;
final bytesLoaded = loadingProgress?.cumulativeBytesLoaded;
if (totalBytes != null && bytesLoaded != null) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [CircularProgressIndicator()],
);
} else {
return child;
}
},
),
);
}
}
List Equality Ignoring Ordering in Dart
@immutable
class Person {
final String name;
const Person(this.name);
@override
bool operator ==(covariant Person other) => other.name == name;
@override
int get hashCode => name.hashCode;
@override
String toString() => name;
}
const people1 = [Person('Foo'), Person('Bar'), Person('Baz')];
const people2 = [Person('Foo'), Person('Bar'), Person('Baz')];
const people3 = [Person('Bar'), Person('Bar'), Person('Baz')];
const people4 = [Person('Bar'), Person('Baz')];
extension IsEqualToIgnoringOrdering<T> on List<T> {
bool isEqualToIgnoringOrdering(List<T> other) =>
length == other.length &&
{...this}.intersection({...other}).length == length;
}
void testIt() {
assert(people1.isEqualToIgnoringOrdering(people2));
assert(!people1.isEqualToIgnoringOrdering(people3));
assert(!people2.isEqualToIgnoringOrdering(people3));
assert(!people3.isEqualToIgnoringOrdering(people4));
}
Shorten GitHub URLs in Dart
// Want to support my work 🤝? https://buymeacoffee.com/vandad
import 'dart:developer' as devtools show log;
import 'dart:convert' show utf8;
Future<Uri> shortenGitHubUrl(String longUrl) =>
HttpClient().postUrl(Uri.parse('https://git.io/')).then((req) {
req.add(utf8.encode('url=$longUrl'));
return req.close();
}).then(
(resp) async {
try {
final location = resp.headers[HttpHeaders.locationHeader]?.first;
if (location != null) {
return Uri.parse(location);
} else {
throw 'No location was specified';
}
} catch (e) {
return Uri.parse(longUrl);
}
},
);
void testIt() async {
final uri = await shortenGitHubUrl(
'https://github.com/vandadnp/flutter-tips-and-tricks');
devtools.log(uri.toString());
// logs https://git.io/JS5Fm
}
Time Picker in Flutter
class HomePage extends StatelessWidget {
final timeOfDay = ValueNotifier<TimeOfDay?>(null);
HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return ValueListenableBuilder(
valueListenable: timeOfDay,
builder: (context, value, child) {
final title = timeOfDay.value?.toString() ?? 'Time Picker in Flutter';
return Scaffold(
appBar: AppBar(title: Text(title)),
body: Center(
child: TextButton(
onPressed: () async {
timeOfDay.value = await showTimePicker(
context: context,
initialTime: TimeOfDay.now(),
initialEntryMode: TimePickerEntryMode.input,
);
},
child: const Text('Please Pick a time'),
),
),
);
},
);
}
}
Throttled Print in Flutter
Stream<String> getStream() => Stream.periodic(
const Duration(milliseconds: 100),
(e) => DateTime.now().toString(),
);
void testIt() async {
await for (final now in getStream()) {
debugPrintThrottled(now);
}
}
Map Equality in Dart
typedef Name = String;
typedef Age = int;
const Map<Name, Age> people1 = {
'foo': 20,
'bar': 30,
'baz': 40,
};
const Map<Name, Age> people2 = {
'baz': 40,
'foo': 20,
'bar': 30,
};
void testIt() {
assert(mapEquals(people1, people2));
}
Unique Maps in Dart
import 'dart:developer' as devtools show log;
typedef Name = String;
typedef Age = int;
const Map<Name, Age> people = {
'foo': 20,
'bar': 30,
'baz': 20,
};
extension Unique<K, V> on Map<K, V> {
Map<K, V> unique() {
Map<K, V> result = {};
for (final value in {...values}) {
final firstKey = keys.firstWhereOrNull((key) => this[key] == value);
if (firstKey != null) {
result[firstKey] = value;
}
}
return result;
}
}
void testIt() {
final uniques = people.unique();
devtools.log(uniques.toString());
// prints: {foo: 20, bar: 30}
}
Raw Auto Complete in Flutter
const emailProviders = [
'gmail.com',
'hotmail.com',
'yahoo.com',
];
const icons = [
'https://bit.ly/3HsvvvB',
'https://bit.ly/3n6GW4L',
'https://bit.ly/3zf2RLy',
];
class EmailTextField extends StatefulWidget {
const EmailTextField({Key? key}) : super(key: key);
@override
State<EmailTextField> createState() => _EmailTextFieldState();
}
class _EmailTextFieldState extends State<EmailTextField> {
late final TextEditingController _controller;
late final FocusNode _focus;
@override
Widget build(BuildContext context) {
return RawAutocomplete<String>(
textEditingController: _controller,
focusNode: _focus,
fieldViewBuilder: (_, controller, focusNode, onSubmitted) {
return TextFormField(
controller: controller,
focusNode: focusNode,
onFieldSubmitted: (value) {
onSubmitted();
},
);
},
optionsBuilder: (textEditingValue) {
final lastChar = textEditingValue.text.characters.last;
if (lastChar == '@') {
return emailProviders;
} else {
return [];
}
},
optionsViewBuilder: (context, onSelected, options) {
return OptionsList(
onSelected: onSelected,
options: options,
controller: _controller,
);
},
);
}
@override
void initState() {
_controller = TextEditingController();
_focus = FocusNode();
super.initState();
}
@override
void dispose() {
_focus.dispose();
_controller.dispose();
super.dispose();
}
}
class OptionsList extends StatelessWidget {
final Iterable<String> options;
final AutocompleteOnSelected<String> onSelected;
final TextEditingController controller;
const OptionsList({
Key? key,
required this.onSelected,
required this.options,
required this.controller,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Align(
alignment: Alignment.topLeft,
child: Material(
child: SizedBox(
height: 150,
child: ListView.builder(
padding: const EdgeInsets.all(0.0),
itemCount: options.length,
itemBuilder: (context, index) {
final option = options.elementAt(index);
return GestureDetector(
onTap: () => onSelected(controller.text + option),
child: ListTile(
horizontalTitleGap: 2.0,
leading: Image.network(
icons[index],
width: 24,
height: 24,
),
title: Text(option),
),
);
},
),
),
),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Raw Auto Complete in Flutter'),
),
body: const Padding(
padding: EdgeInsets.all(16.0),
child: EmailTextField(),
),
);
}
}
Title on Object in Dart
import 'dart:developer' as devtools show log;
extension CapTitle on Object {
String get capitalizedTitle {
String str;
if (this is Enum) {
str = (this as Enum).name;
} else {
str = toString();
}
return str[0].toUpperCase() + str.substring(1);
}
}
enum EmailProviders { gmail, yahoo, hotmail }
void testIt() {
EmailProviders.values.map((p) => p.capitalizedTitle).forEach(devtools.log);
// prints these:
// Gmail
// Yahoo
// Hotmail
}
Compute in Flutter
import 'dart:developer' as devtools show log;
import 'dart:convert' show utf8, json;
@immutable
class Person {
final String name;
final int age;
const Person(this.name, this.age);
Person.fromJson(Map<String, dynamic> json)
: name = json["name"] as String,
age = json["age"] as int;
}
Future<Iterable<Person>> downloadAndParsePersons(Uri uri) => HttpClient()
.getUrl(uri)
.then((req) => req.close())
.then((response) => response.transform(utf8.decoder).join())
.then((jsonString) => json.decode(jsonString) as List<dynamic>)
.then((json) => json.map((map) => Person.fromJson(map)));
void testIt() async {
final persons = await compute(
downloadAndParsePersons,
Uri.parse('https://bit.ly/3Jjcw8R'),
);
devtools.log(persons.toString());
}
Filter on Map in Dart
import 'dart:developer' as devtools show log;
typedef Name = String;
typedef Age = int;
extension Filter<K, V> on Map<K, V> {
Iterable<MapEntry<K, V>> filter(
bool Function(MapEntry<K, V> entry) f,
) sync* {
for (final entry in entries) {
if (f(entry)) {
yield entry;
}
}
}
}
const Map<Name, Age> people = {
'foo': 20,
'bar': 31,
'baz': 25,
'qux': 32,
};
void testIt() async {
final peopleOver30 = people.filter((e) => e.value > 30);
devtools.log(peopleOver30.toString());
// ☝🏻 prints (MapEntry(bar: 31), MapEntry(qux: 32))
}
Type Alias in Dart
const Map<String, int> people1 = {
'foo': 20,
'bar': 30,
'baz': 25,
};
typedef Age = int;
const Map<String, Age> people2 = {
'foo': 20,
'bar': 30,
'baz': 25,
};
ValueNotifier in Flutter
class DynamicToolTipTextField extends StatelessWidget {
final TextInputType? keyboardType;
final ValueNotifier<String?> hint;
final TextEditingController controller;
const DynamicToolTipTextField({
Key? key,
required this.hint,
required this.controller,
this.keyboardType,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return ValueListenableBuilder(
valueListenable: hint,
builder: (context, value, child) {
return TextField(
keyboardType: keyboardType,
controller: controller,
decoration: InputDecoration(
hintText: value as String?,
),
);
},
);
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
State<HomePage> createState() => _HomePageState();
}
@immutable
abstract class HasText {
String get text;
}
enum Hint { pleaseEnterYourEmail, youForgotToEnterYourEmail }
extension GetText on Hint {
String get text {
switch (this) {
case Hint.pleaseEnterYourEmail:
return 'Please enter your email';
case Hint.youForgotToEnterYourEmail:
return 'You forgot to enter your email';
}
}
}
class _HomePageState extends State<HomePage> {
late final ValueNotifier<String?> _hint;
late final TextEditingController _controller;
@override
void initState() {
_hint = ValueNotifier<String?>(Hint.pleaseEnterYourEmail.text);
_controller = TextEditingController();
super.initState();
}
@override
void dispose() {
_hint.dispose();
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('ValueNotifier in Flutter'),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
DynamicToolTipTextField(
hint: _hint,
controller: _controller,
keyboardType: TextInputType.emailAddress,
),
TextButton(
onPressed: () async {
final email = _controller.text;
if (email.trim().isEmpty) {
_hint.value = Hint.youForgotToEnterYourEmail.text;
await Future.delayed(const Duration(seconds: 2));
_hint.value = Hint.pleaseEnterYourEmail.text;
}
},
child: const Text('Log in'),
)
],
),
),
);
}
}
Object to Integer in Dart
enum ToIntStrategy { round, floor, ceil }
typedef ToIntOnErrorHandler = int Function(Object e);
extension ToInt on Object {
int toInteger({
ToIntStrategy strategy = ToIntStrategy.round,
ToIntOnErrorHandler? onError,
}) {
try {
final doubleValue = double.parse(toString());
switch (strategy) {
case ToIntStrategy.round:
return doubleValue.round();
case ToIntStrategy.floor:
return doubleValue.floor();
case ToIntStrategy.ceil:
return doubleValue.ceil();
}
} catch (e) {
if (onError != null) {
return onError(e);
} else {
return -1;
}
}
}
}
void testIt() {
assert('xyz'.toInteger(onError: (_) => 100) == 100);
assert(1.5.toInteger() == 2);
assert(1.6.toInteger() == 2);
assert('1.2'.toInteger(strategy: ToIntStrategy.floor) == 1);
assert('1.2'.toInteger(strategy: ToIntStrategy.ceil) == 2);
assert('1.5'.toInteger(strategy: ToIntStrategy.round) == 2);
}
Image Opacity in Flutter
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage>
with SingleTickerProviderStateMixin {
late final AnimationController _controller;
late final Animation<double> _opacity;
@override
void initState() {
_controller = AnimationController(
vsync: this,
duration: const Duration(seconds: 1),
);
_opacity = Tween(begin: 0.0, end: 1.0).animate(_controller);
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Image.network(
'https://bit.ly/3ywI8l6',
opacity: _opacity,
),
Slider(
value: _controller.value,
onChanged: (value) {
setState(() => _controller.value = value);
},
),
],
),
);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
}
Covariant in Dart
// Want to support my work 🤝? https://buymeacoffee.com/vandad
class Person {
final String name;
const Person(this.name);
@override
bool operator ==(Object other) {
if (other is! Person) throw ArgumentError('Was expecting a person');
return other.name == name;
}
@override
int get hashCode => name.hashCode;
}
class Person {
final String name;
const Person(this.name);
@override
bool operator ==(covariant Person other) => other.name == name;
@override
int get hashCode => name.hashCode;
}
Custom Errors in Streams in Dart
class Either<V, E extends Exception> {
final V? value;
final E? error;
const Either({this.value, this.error}) : assert((value ?? error) != null);
bool get isError => error != null;
bool get isValue => value != null;
@override
String toString() {
if (value != null) {
return "Value: $value";
} else if (error != null) {
return "Error: $error";
} else {
return 'Unknown state';
}
}
}
class DateTimeException implements Exception {
final String reason;
const DateTimeException({required this.reason});
}
Stream<Either<DateTime, DateTimeException>> getDateTime() async* {
var index = 0;
while (true) {
if (index % 2 == 0) {
yield Either(value: DateTime.now());
} else {
yield const Either(
error: DateTimeException(reason: 'Something is wrong!'),
);
}
index += 1;
}
}
void testIt() async {
await for (final value in getDateTime()) {
dev.log(value.toString());
}
}
Shake Animation in Flutter
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
State<HomePage> createState() => _HomePageState();
}
const animationWidth = 10.0;
class _HomePageState extends State<HomePage>
with SingleTickerProviderStateMixin {
late final TextEditingController _textController;
late final AnimationController _animationController;
late final Animation<double> _offsetAnim;
final defaultHintText = 'Please enter your email here 😊';
var _hintText = '';
@override
void initState() {
_hintText = defaultHintText;
_textController = TextEditingController();
_animationController = AnimationController(
duration: const Duration(milliseconds: 370),
vsync: this,
);
_offsetAnim = Tween(
begin: 0.0,
end: animationWidth,
).chain(CurveTween(curve: Curves.elasticIn)).animate(
_animationController,
)..addStatusListener(
(status) {
if (status == AnimationStatus.completed) {
_animationController.reverse();
}
},
);
super.initState();
}
@override
void dispose() {
_textController.dispose();
_animationController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Shake Animation in Flutter'),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
AnimatedBuilder(
animation: _offsetAnim,
builder: (context, child) {
return Container(
margin: const EdgeInsets.symmetric(
horizontal: animationWidth,
),
padding: EdgeInsets.only(
left: _offsetAnim.value + animationWidth,
right: animationWidth - _offsetAnim.value,
),
child: TextField(
controller: _textController,
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
hintText: _hintText,
),
),
);
},
),
TextButton(
onPressed: () async {
if (_textController.text.isEmpty) {
setState(() {
_hintText = 'You forgot to enter your email 🥲';
_animationController.forward(from: 0.0);
});
await Future.delayed(const Duration(seconds: 3));
setState(() {
_hintText = defaultHintText;
});
}
},
child: const Text('Login'))
],
),
),
);
}
}
Throw Enums in Dart
import 'dart:developer' as dev show log;
enum Exceptions { invalidUserName, invalidPassword }
void thisMethodThrows() {
throw Exceptions.invalidPassword;
}
void testIt() {
try {
thisMethodThrows();
} on Exceptions catch (e) {
switch (e) {
case (Exceptions.invalidUserName):
dev.log("Invalid user name");
break;
case (Exceptions.invalidPassword):
dev.log("Invalid password");
break;
}
}
}
Future Error Test in Flutter
import 'dart:developer' as dev show log;
@immutable
abstract class UserException implements Exception {}
class InvalidUserNameException extends UserException {}
class InvalidUserAgeException extends UserException {}
@immutable
class User {
final String name;
final int age;
User({required this.name, required this.age}) {
if (!name.contains(RegExp(r'^[a-z ]+$'))) {
throw InvalidUserNameException();
} else if (age < 0 || age > 130) {
throw InvalidUserAgeException();
}
}
const User.anonymous()
: name = 'Anonymous User',
age = 0;
}
Future<User> getAsyncUser() => Future.delayed(
const Duration(seconds: 1),
() => User(name: 'Foo', age: 20),
);
void testIt() async {
final user = await getAsyncUser()
.catchError(
handleInvalidUsernameException,
test: (e) => e is InvalidUserNameException,
)
.catchError(
handleInvalidAgeException,
test: (e) => e is InvalidUserAgeException,
);
dev.log(user.toString());
}
User handleInvalidUsernameException(Object? e) {
dev.log(e.toString());
return const User.anonymous();
}
User handleInvalidAgeException(Object? e) {
dev.log(e.toString());
return const User.anonymous();
}
Generic URL Retrieval in Dart
import 'dart:developer' as dev show log;
typedef StatusCodeResultBuilder<T> = Future<T> Function(
int statusCode,
HttpClientResponse response,
);
extension Get on Uri {
Future<T?> getBody<T>({
StatusCodeResultBuilder<T>? statusBuilder,
T Function(Object error)? onNetworkError,
}) async {
try {
final apiCall = await HttpClient().getUrl(this);
final response = await apiCall.close();
final builder = statusBuilder;
if (builder == null) {
final data = await response.transform(convert.utf8.decoder).join();
if (data is T) {
return data as T?;
} else {
return null;
}
} else {
final result = await builder(response.statusCode, response);
return result;
}
} catch (e) {
if (onNetworkError != null) {
return onNetworkError(e);
} else {
return null;
}
}
}
}
extension ToUri on String {
Uri toUri() => Uri.parse(this);
}
const url = 'https://bit.ly/3EKWcLa';
void testIt() async {
final json = await url.toUri().getBody<String>(
statusBuilder: (statusCode, response) async {
if (statusCode == 200) {
return await response.transform(convert.utf8.decoder).join();
} else {
return "{'error': 'Unexpected status code $statusCode'}";
}
},
onNetworkError: (error) {
return "{'error': 'Got network error'}";
},
);
if (json != null) {
dev.log(json);
}
}
Custom Error Widget in Flutter
class MyErrorWidget extends StatelessWidget {
final String text;
const MyErrorWidget({Key? key, required this.text}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: SizedBox(
width: MediaQuery.of(context).size.width,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Image.network('https://bit.ly/3gHlTCU'),
Text(
text,
textAlign: TextAlign.center,
style: const TextStyle(
color: Colors.red,
),
),
],
),
),
),
);
}
}
void main() {
ErrorWidget.builder = (FlutterErrorDetails details) {
bool isInDebugMode = false;
assert(() {
isInDebugMode = true;
return true;
}());
final message = details.exception.toString();
if (isInDebugMode) {
return MyErrorWidget(text: message);
} else {
return Text(
message,
textAlign: TextAlign.center,
);
}
};
runApp(
const MaterialApp(
home: HomePage(),
debugShowCheckedModeBanner: false,
),
);
}
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Error Widget in Flutter'),
),
body: Builder(
builder: (context) {
throw Exception(
'Here is an exception that is caught by our custom Error Widget in Flutter');
},
),
);
}
}
Handle Multiple Future Errors in Dart
import 'dart:developer' as dev show log;
Future<Iterable<T>> waitOn<T>(
Iterable<Future<T>> futures,
Function onError,
) async {
List<T> result = [];
for (final future in futures) {
final value = await future.catchError(onError);
result.add(value);
}
return result;
}
void testIt() async {
final f1 = Future.error('First Error');
final f2 = Future.delayed(const Duration(seconds: 2), () => 10);
final f3 = Future.error('Second error');
final f4 = Future.delayed(const Duration(seconds: 2), () => 'Hello world');
final result = await waitOn([f1, f2, f3, f4], (error) => -1);
dev.log(result.toString()); // [-1, 10, -1, Hello world]
}
Future Error Handling in Dart
import 'dart:developer' as dev show log;
extension OnError<T> on Future<T> {
Future<T> onErrorJustReturn(T value) => catchError((_) => value);
}
Future<bool> isUserRegistered({required String email}) => HttpClient()
.postUrl(Uri.parse('https://website'))
.then((req) {
req.headers.add('email', email);
return req.close();
})
.then((resp) => resp.statusCode == 200)
.onErrorJustReturn(false);
void testIt() async {
final isFooRegistered = await isUserRegistered(email: 'foo@flutter.com');
dev.log(isFooRegistered.toString());
}
String to Toast in Flutter
extension Toast on String {
Future<void> showAsToast(BuildContext context,
{required Duration duration}) async {
final scaffold = ScaffoldMessenger.of(context);
final controller = scaffold.showSnackBar(
SnackBar(
content: Text(this),
backgroundColor: const Color(0xFF24283b),
behavior: SnackBarBehavior.floating,
elevation: 2.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
),
);
await Future.delayed(duration);
controller.close();
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: TextButton(
onPressed: () => 'Hello, World!'.showAsToast(
context,
duration: const Duration(seconds: 2),
),
child: const Text('Show the snackbar'),
),
),
);
}
}
Waiting in Dart
Future<void> wait(Duration d) async {
await Future.delayed(d);
}
extension Wait on int {
Future<void> get seconds => wait(Duration(seconds: this));
Future<void> get minutes => wait(Duration(minutes: this));
}
void testIt() async {
await 2.seconds;
'After 2 seconds'.log();
await 3.minutes;
'After 3 minutes'.log();
}
extension Log on Object {
void log() {
dev.log(toString());
}
}
Loading Dialog in Flutter
typedef CloseDialog = void Function();
CloseDialog showLoadingScreen({
required BuildContext context,
required String text,
}) {
final dialog = AlertDialog(
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
const CircularProgressIndicator(),
const SizedBox(height: 10),
Text(text),
],
),
);
showDialog(
context: context,
barrierDismissible: false,
builder: (_) => dialog,
);
return () => Navigator.of(context).pop();
}
void testIt(BuildContext context) async {
final closeDialog = showLoadingScreen(
context: context,
text: 'Loading data...',
);
await Future.delayed(const Duration(seconds: 2));
closeDialog();
}
Compact Map on Map<K,V> in Dart
const foo = 'foo';
const bar = 'bar';
const baz = 'baz';
const namesAndAges = {
foo: 20,
bar: 25,
baz: 18,
};
const acceptedNames = [
foo,
bar,
];
void testIt() {
final acceptedAges = namesAndAges.compactMap(
(e) => acceptedNames.contains(e.key) ? e.value : null,
);
acceptedAges.log(); // [20, 25]
}
extension CompactMap<T, E> on Map<T, E> {
Iterable<V> compactMap<V>(V? Function(MapEntry<T, E>) f) sync* {
for (final entry in entries) {
final extracted = f(entry);
if (extracted != null) {
yield extracted;
}
}
}
}
Query Parameters in Dart
import 'dart:developer' as devtools show log;
const host = 'freecurrencyapi.net';
const path = '/api/v2/latest';
const apiKey = 'YOUR_API_KEY';
const baseCurrency = 'sek';
const params = {
'apiKey': apiKey,
'base_currency': 'sek',
};
void insteadOfThis() {
const url = 'https://$host$path?apiKey=$apiKey&base_currency=$baseCurrency';
url.log();
}
void doThis() {
final url = Uri.https(host, path, params);
url.log();
}
extension Log on Object {
void log() {
devtools.log(toString());
}
}
Multiple Gradients in Container in Flutter
typedef GradientContainersBuilder = Map<LinearGradient, Widget?> Function();
class GradientContainers extends StatelessWidget {
final GradientContainersBuilder builder;
const GradientContainers({
Key? key,
required this.builder,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Stack(
children: builder().entries.map((mapEntry) {
final gradient = mapEntry.key;
final widget = mapEntry.value;
return GradientContainer(
gradient: gradient,
child: widget,
);
}).toList(),
);
}
}
class GradientContainer extends StatelessWidget {
final LinearGradient gradient;
final Widget? child;
const GradientContainer({Key? key, required this.gradient, this.child})
: super(key: key);
@override
Widget build(BuildContext context) {
return Positioned.fill(
child: Container(
decoration: BoxDecoration(
gradient: gradient,
),
child: child,
),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: GradientContainers(
builder: () => {
topLeftToBottomRightGradient: null,
rightToLeftGradient: null,
leftToRightGradinet: null,
bottomRightGradient: Image.network('https://bit.ly/3otHHog'),
},
),
);
}
}
const transparent = Color(0x00FFFFFF);
const topLeftToBottomRightGradient = LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Color(0xff2ac3de),
transparent,
],
);
const bottomRightGradient = LinearGradient(
begin: Alignment.bottomRight,
end: Alignment.topLeft,
colors: [
Color(0xffbb9af7),
transparent,
],
);
const rightToLeftGradient = LinearGradient(
begin: Alignment.centerRight,
end: Alignment.centerLeft,
colors: [
Color(0xff9ece6a),
transparent,
],
);
const leftToRightGradinet = LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Color(0xff7dcfff),
transparent,
],
);
void main() {
runApp(
const MaterialApp(
home: HomePage(),
debugShowCheckedModeBanner: false,
),
);
}
Filter on Stream<List<T>> in Dart
import 'dart:developer' as devtools show log;
extension Filter<T> on Stream<List<T>> {
Stream<List<T>> filter(bool Function(T) where) =>
map((items) => items.where(where).toList());
}
final Stream<List<int>> allNumbers = Stream.periodic(
const Duration(seconds: 1),
(value) => [for (var i = 0; i < value; i++) i],
);
bool isEven(num value) => value % 2 == 0;
bool isOdd(num value) => value % 2 != 0;
extension EvenOdd<E extends num> on Stream<List<E>> {
Stream<List<E>> get evenNumbers => filter(isEven);
Stream<List<E>> get oddNumbers => filter(isOdd);
}
void readEvenNumbers() async {
await for (final evenNumber in allNumbers.evenNumbers) {
devtools.log('All even numbers: $evenNumber');
}
}
void readOddNumbers() async {
await for (final oddNumber in allNumbers.oddNumbers) {
devtools.log('All odd numbers: $oddNumber');
}
}
Generic Route Arguments in Flutter
extension GetArgument on BuildContext {
T? getArgument<T>() {
final modalRoute = ModalRoute.of(this);
if (modalRoute != null) {
final args = modalRoute.settings.arguments;
if (args != null && args is T) {
return args as T;
}
}
return null;
}
}
Generic Dialog in Flutter
typedef DialogOptionBuilder<T> = Map<String, T> Function();
Future<T?> showGenericDialog<T>({
required BuildContext context,
required String title,
required String content,
required DialogOptionBuilder optionsBuilder,
}) {
final options = optionsBuilder();
return showDialog<T>(
context: context,
builder: (context) {
return AlertDialog(
title: Text(title),
content: Text(content),
actions: options.keys.map(
(optionTitle) {
final T value = options[optionTitle];
return TextButton(
onPressed: () {
Navigator.of(context).pop(value);
},
child: Text(optionTitle),
);
},
).toList(),
);
},
);
}
Future<bool> showLogOutDialog(BuildContext context) {
return showGenericDialog<bool>(
context: context,
title: 'Log out',
content: 'Are you sure you want to log out?',
optionsBuilder: () => {
'Cancel': false,
'Log out': true,
},
).then(
(value) => value ?? false,
);
}
GitHub API in Flutter
import 'dart:io' show HttpHeaders, HttpClient;
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'dart:convert' show utf8, json;
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
Future<Iterable<GithubUser>> getGithubFollowers(String accessToken) =>
HttpClient()
.getUrl(Uri.parse('https://api.github.com/user/followers'))
.then((req) {
req.headers
..set(HttpHeaders.authorizationHeader, 'Bearer $accessToken')
..set(HttpHeaders.contentTypeHeader, 'application/json');
return req.close();
})
.then((resp) => resp.transform(utf8.decoder).join())
.then((jsonStr) => json.decode(jsonStr) as List<dynamic>)
.then(
(jsonArray) => jsonArray.compactMap((element) {
if (element is Map<String, dynamic>) {
return element;
} else {
return null;
}
}),
)
.then(
(listOfMaps) => listOfMaps.map(
(map) => GithubUser.fromJson(map),
),
);
class GithubUser {
final String username;
final String avatarUrl;
GithubUser.fromJson(Map<String, dynamic> json)
: username = json['login'] as String,
avatarUrl = json['avatar_url'] as String;
}
extension CompactMap<T> on List<T> {
List<E> compactMap<E>(E? Function(T element) f) {
Iterable<E> imp(E? Function(T element) f) sync* {
for (final value in this) {
final mapped = f(value);
if (mapped != null) {
yield mapped;
}
}
}
return imp(f).toList();
}
}
const token = 'PUT_YOUR_TOKEN_HERE';
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('GitHub API in Flutter'),
),
body: FutureBuilder(
future: getGithubFollowers(token),
builder: (context, snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.done:
final users = (snapshot.data as Iterable<GithubUser>).toList();
return ListView.builder(
itemCount: users.length,
itemBuilder: (context, index) {
final user = users[index];
return ListTile(
title: Text(user.username),
leading: CircularAvatar(url: user.avatarUrl),
);
},
);
default:
return const CircularProgressIndicator();
}
},
),
);
}
}
void main() {
runApp(
const MaterialApp(
home: HomePage(),
debugShowCheckedModeBanner: false,
),
);
}
ChangeNotifier in Flutter
import 'package:provider/provider.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
const allImages = [
'https://bit.ly/3ywI8l6',
'https://bit.ly/36fNNj9',
'https://bit.ly/3jOueGG',
'https://bit.ly/3qYOtDm',
'https://bit.ly/3wt11Ec',
'https://bit.ly/3yvFg7X',
'https://bit.ly/3ywzOla',
'https://bit.ly/3wnASpW',
'https://bit.ly/3jXSDto',
];
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
State<HomePage> createState() => _HomePageState();
}
class ImageData {
final Uint8List imageData;
const ImageData(this.imageData);
}
class Images extends ChangeNotifier {
final List<ImageData> _items = [];
var _isLoading = false;
bool get isLoading => _isLoading;
UnmodifiableListView<ImageData> get items => UnmodifiableListView(_items);
void loadNextImage() async {
if (_items.length < allImages.length) {
// time to load more
_isLoading = true;
notifyListeners();
final imageUrl = allImages[_items.length];
final networkAsset = NetworkAssetBundle(Uri.parse(imageUrl));
final loaded = await networkAsset.load(imageUrl);
final bytes = loaded.buffer.asUint8List();
final imageData = ImageData(bytes);
_items.insert(0, imageData);
_isLoading = false;
notifyListeners();
} else {
if (isLoading) {
_isLoading = false;
notifyListeners();
}
}
}
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('ChangeNotifier in Flutter'),
actions: [
Consumer<Images>(
builder: (context, value, child) {
return IconButton(
onPressed: () {
value.loadNextImage();
},
icon: const Icon(Icons.add_box_outlined),
);
},
)
],
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Consumer<Images>(
builder: (context, value, child) {
final images = value.items;
final isLoading = value.isLoading;
return ListView.builder(
itemBuilder: (context, index) {
if (index == 0 && isLoading) {
return Center(
child: Column(
children: const [
CircularProgressIndicator(),
SizedBox(height: 16.0),
],
),
);
} else {
final imageIndex = isLoading ? index - 1 : index;
final imageData = images[imageIndex].imageData;
return Column(
children: [
RoundedImageWithShadow(imageData: imageData),
const SizedBox(height: 16.0),
],
);
}
},
itemCount: isLoading ? images.length + 1 : images.length,
);
},
),
),
);
}
}
class RoundedImageWithShadow extends StatelessWidget {
final Uint8List imageData;
const RoundedImageWithShadow({Key? key, required this.imageData})
: super(key: key);
@override
Widget build(BuildContext context) {
return Container(
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
blurRadius: 2,
color: Colors.black.withAlpha(40),
spreadRadius: 2,
),
],
),
child: Image.memory(
imageData,
fit: BoxFit.cover,
),
);
}
}
void main() {
runApp(
MaterialApp(
home: ChangeNotifierProvider(
create: (_) => Images(),
child: const HomePage(),
),
debugShowCheckedModeBanner: false,
),
);
}
Refresh Indicator in Flutter
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
const allImages = [
'https://bit.ly/3x7J5Qt',
'https://bit.ly/3ywI8l6',
'https://bit.ly/36fNNj9',
'https://bit.ly/3jOueGG',
'https://bit.ly/3qYOtDm',
'https://bit.ly/3wt11Ec',
'https://bit.ly/3yvFg7X',
'https://bit.ly/3ywzOla',
'https://bit.ly/3wnASpW',
'https://bit.ly/3jXSDto',
];
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
final _images = [allImages.first];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Refresh Indicator in Flutter'),
),
body: RefreshIndicator(
onRefresh: () async {
final nextIndex = _images.length + 1;
if (nextIndex < allImages.length) {
setState(() {
_images.insert(0, allImages[nextIndex]);
});
}
},
child: ListView.builder(
physics: const AlwaysScrollableScrollPhysics(),
padding: const EdgeInsets.all(16),
itemCount: _images.length,
itemBuilder: (context, index) {
final imageUrl = _images[index];
return Column(
children: [
RoundedImageWithShadow(url: imageUrl),
const SizedBox(height: 16),
],
);
},
),
),
);
}
}
class RoundedImageWithShadow extends StatelessWidget {
final String url;
const RoundedImageWithShadow({Key? key, required this.url}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
blurRadius: 2,
color: Colors.black.withAlpha(40),
spreadRadius: 2,
),
],
),
child: Image.network(url),
);
}
}
FlatMap in Dart
extension FlatMap<T> on T? {
E? flatMap<E>(E? Function(T) f) => this != null ? f(this!) : null;
}
AuthUser? get insteadOfThis {
final user = FirebaseAuth.instance.currentUser;
if (user != null) {
return AuthUser.fromFirebase(user);
} else {
return null;
}
}
AuthUser? get doThis =>
FirebaseAuth.instance.currentUser.flatMap((u) => AuthUser.fromFirebase(u));
OrientationBuilder in Flutter
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
class RoundedImageWithShadow extends StatelessWidget {
final String url;
const RoundedImageWithShadow({Key? key, required this.url}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
blurRadius: 2,
color: Colors.black.withAlpha(40),
spreadRadius: 2,
),
],
),
child: Image.network(url),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: OrientationBuilder(
builder: (context, orientation) {
final int count;
switch (orientation) {
case Orientation.portrait:
count = 2;
break;
case Orientation.landscape:
count = 4;
break;
}
return GridView.count(
padding: const EdgeInsets.all(8.0),
crossAxisCount: count,
mainAxisSpacing: 8.0,
crossAxisSpacing: 8.0,
children: images
.map((url) => RoundedImageWithShadow(url: url))
.toList(),
);
},
),
),
);
}
}
final images = [
'https://bit.ly/3qJ2FCf',
'https://bit.ly/3Hs9JsV',
'https://bit.ly/3cfT6Cv',
'https://bit.ly/30wGnIE',
'https://bit.ly/3kJYsum',
'https://bit.ly/3oDoMaJ',
'https://bit.ly/3FndXQM',
'https://bit.ly/3ci4i1f',
];
Linear Gradient in Flutter
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Linear Gradient in Flutter'),
),
body: const ImageWithShadow(url: 'https://bit.ly/3otHHog'),
);
}
}
class ImageWithShadow extends StatelessWidget {
final String url;
const ImageWithShadow({
Key? key,
required this.url,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(16.0),
child: Stack(
children: [
Positioned.fill(
child: Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
blurRadius: 10.0,
color: Colors.black.withOpacity(0.5),
offset: const Offset(0.0, 3.0),
)
],
borderRadius: const BorderRadius.all(Radius.circular(20)),
gradient: const LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color.fromARGB(255, 176, 229, 251),
Color.fromARGB(255, 235, 202, 250)
],
),
),
),
),
Image.network(url),
],
),
);
}
}
Bloc Text Editing Controller in Flutter
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:bloc/bloc.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
abstract class Event {
const Event();
}
class SearchEvent extends Event {
final String searchString;
const SearchEvent(this.searchString);
}
class ClearSearch extends Event {}
class SearchBloc extends Bloc<Event, List<String>> {
static const names = ['foo', 'bar', 'baz'];
SearchBloc() : super(names) {
on<Event>((event, emit) {
if (event is SearchEvent) {
emit(names
.where((element) => element.contains(event.searchString))
.toList());
} else if (event is ClearSearch) {
emit(names);
}
});
}
}
class BlocTextEditingController extends TextEditingController {
SearchBloc? bloc;
BlocTextEditingController() {
addListener(() {
if (text.isEmpty) {
bloc?.add(ClearSearch());
} else {
bloc?.add(SearchEvent(text));
}
});
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
State<HomePage> createState() => _HomePageState();
}
const largeStyle = TextStyle(fontSize: 30);
class _HomePageState extends State<HomePage> {
late final BlocTextEditingController _controller;
@override
void initState() {
_controller = BlocTextEditingController();
super.initState();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
_controller.bloc = BlocProvider.of<SearchBloc>(context);
return Scaffold(
appBar: AppBar(
title: Text('Bloc Search in Flutter'),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: BlocBuilder<SearchBloc, List<String>>(
builder: (context, state) {
return ListView.builder(
itemBuilder: (context, index) {
if (index == 0) {
// search field
return TextField(
decoration: InputDecoration(
hintText: 'Enter search term here...',
hintStyle: largeStyle,
),
style: largeStyle,
controller: _controller,
);
} else {
final name = state[index - 1];
return ListTile(
title: Text(
name,
style: largeStyle,
),
);
}
},
itemCount: state.length + 1, // +1 for search
);
},
),
),
);
}
}
Blurred TabBar in Flutter
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
const images = [
'https://bit.ly/3x7J5Qt',
'https://bit.ly/3ywI8l6',
'https://bit.ly/36fNNj9',
'https://bit.ly/3jOueGG',
'https://bit.ly/3qYOtDm',
'https://bit.ly/3wt11Ec',
'https://bit.ly/3yvFg7X',
'https://bit.ly/3ywzOla',
'https://bit.ly/3wnASpW',
'https://bit.ly/3jXSDto',
];
class CustomTabBar extends StatelessWidget {
final List<IconButton> buttons;
const CustomTabBar({Key? key, required this.buttons}) : super(key: key);
@override
Widget build(BuildContext context) {
return Align(
alignment: Alignment.bottomCenter,
child: ClipRect(
child: Container(
height: 80,
color: Colors.white.withOpacity(0.4),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 4.0, sigmaY: 4.0),
child: Container(
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.5),
),
child: Padding(
padding: const EdgeInsets.only(bottom: 15),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: buttons,
),
),
),
),
),
),
);
}
}
const summerIcon = Icon(
Icons.surfing,
size: 40.0,
color: Colors.teal,
);
const autumnIcon = Icon(
Icons.nature_outlined,
size: 40.0,
color: Colors.black45,
);
const winterIcon = Icon(
Icons.snowboarding,
size: 40.0,
color: Colors.black45,
);
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Blurred Tab Bar'),
),
body: Stack(
children: [
ListView.builder(
itemCount: images.length,
itemBuilder: (context, index) {
final url = images[index];
return Image.network(url);
},
),
CustomTabBar(
buttons: [
IconButton(
icon: summerIcon,
onPressed: () {
// implement me
},
),
IconButton(
icon: autumnIcon,
onPressed: () {
// implement me
},
),
IconButton(
icon: winterIcon,
onPressed: () {
// implement me
},
)
],
)
],
),
);
}
}
Play YouTube in Flutter
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
const videoIds = [
'BHACKCNDMW8',
'26h9hBZFl7w',
'glENND73k4Q',
'd0tU18Ybcvk',
];
class VideoView extends StatelessWidget {
final String videoId;
final _key = UniqueKey();
VideoView({required this.videoId});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Watch a Video'),
),
body: Center(
child: Container(
height: 232.0,
child: WebView(
key: _key,
initialUrl: 'https://www.youtube.com/embed/$videoId',
javascriptMode: JavascriptMode.unrestricted,
),
),
),
);
}
}
class YouTubeVideoThumbnail extends StatelessWidget {
final String videoId;
final String thumbnailUrl;
const YouTubeVideoThumbnail({Key? key, required this.videoId})
: thumbnailUrl = 'https://img.youtube.com/vi/$videoId/maxresdefault.jpg',
super(key: key);
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (_) => VideoView(videoId: videoId),
),
);
},
child: Container(
height: 256.0,
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
blurRadius: 10.0,
color: Colors.black.withAlpha(50),
spreadRadius: 10.0,
),
],
borderRadius: BorderRadius.circular(20),
image: DecorationImage(
fit: BoxFit.fitHeight,
image: NetworkImage(thumbnailUrl),
),
),
child: Center(
child: Icon(
Icons.play_arrow,
color: Colors.white,
size: 100.0,
),
),
),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('YouTube Videos in Flutter')),
body: ListView.builder(
itemCount: videoIds.length,
itemBuilder: (context, index) {
final videoId = videoIds[index];
return Padding(
padding: const EdgeInsets.all(8.0),
child: YouTubeVideoThumbnail(videoId: videoId),
);
},
),
);
}
}
ListView Background in Flutter
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
class ListItem {
const ListItem();
factory ListItem.emptyTile() => EmptyTile();
factory ListItem.tile(
String title,
String subTitle,
) =>
Tile(
title,
subTitle,
);
}
class Tile extends ListItem {
final String title;
final String subTitle;
const Tile(this.title, this.subTitle) : super();
}
class EmptyTile extends ListItem {}
final items = [
for (var i = 1; i <= 6; i++) ListItem.tile('Title $i', 'Sub title $i'),
ListItem.emptyTile(),
for (var i = 7; i <= 12; i++) ListItem.tile('Title $i', 'Sub title $i'),
];
class Background extends StatelessWidget {
final Widget child;
const Background({Key? key, required this.child}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
image: DecorationImage(
fit: BoxFit.fitHeight,
image: NetworkImage('https://bit.ly/3jXSDto'),
),
),
child: child,
);
}
}
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Background(
child: ListView.builder(
padding: EdgeInsets.zero,
itemCount: items.length,
itemBuilder: (context, index) {
final item = items[index];
if (item is Tile) {
return Container(
color: Colors.grey[200],
child: ListTile(
title: Text(item.title),
subtitle: Text(item.subTitle),
),
);
} else if (item is EmptyTile) {
return SizedBox(
height: 450,
);
} else {
throw 'unexpcted item';
}
},
),
),
);
}
}
Integer to Binary in Dart
extension ToBinary on int {
String toBinary(
int len, {
int separateAtLength = 4,
String separator = ',',
}) =>
toRadixString(2)
.padLeft(len, '0')
.splitByLength(separateAtLength)
.join(separator);
}
void testIt() {
assert(1.toBinary(8) == '0000,0001');
assert(2.toBinary(4) == '0010');
assert(3.toBinary(16) == '0000,0000,0000,0011');
assert(255.toBinary(8, separateAtLength: 8) == '11111111');
assert(255.toBinary(8, separateAtLength: 4) == '1111,1111');
}
extension SplitByLength on String {
Iterable<String> splitByLength(int len, {String filler = '0'}) sync* {
final missingFromLength =
length % len == 0 ? 0 : len - (characters.length % len);
final expectedLength = length + missingFromLength;
final src = padLeft(expectedLength, filler);
final chars = src.characters;
for (var i = 0; i < chars.length; i += len) {
yield chars.getRange(i, i + len).toString();
}
}
}
Split String by Length in Dart
void testIt() {
assert('dartlang'
.splitByLength(5, filler: '💙')
.isEqualTo(['💙💙dar', 'tlang']));
assert('0100010'.splitByLength(4).isEqualTo(['0010', '0010']));
assert('foobar'.splitByLength(3).isEqualTo(['foo', 'bar']));
assert('flutter'.splitByLength(4, filler: 'X').isEqualTo(['Xflu', 'tter']));
assert('dart'.splitByLength(5, filler: '').isEqualTo(['dart']));
}
extension SplitByLength on String {
Iterable<String> splitByLength(int len, {String filler = '0'}) sync* {
final missingFromLength =
length % len == 0 ? 0 : len - (characters.length % len);
final expectedLength = length + missingFromLength;
final src = padLeft(expectedLength, filler);
final chars = src.characters;
for (var i = 0; i < chars.length; i += len) {
yield chars.getRange(i, i + len).toString();
}
}
}
Image Tint in Flutter
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
enum OverlayColor { brown, orange, yellow, green, blue }
extension Color on OverlayColor {
MaterialColor get color {
switch (this) {
case OverlayColor.blue:
return Colors.blue;
case OverlayColor.brown:
return Colors.brown;
case OverlayColor.green:
return Colors.green;
case OverlayColor.orange:
return Colors.orange;
case OverlayColor.yellow:
return Colors.yellow;
}
}
}
extension Title on OverlayColor {
String get title => toString().split('.').last;
}
extension ToTextButtonWithValue on OverlayColor {
TextButtonWithValue<OverlayColor> toTextButtonWithValue(
OnTextButtonWithValuePressed onPressed) {
return TextButtonWithValue(
value: this,
onPressed: onPressed,
child: Text(title),
);
}
}
typedef OnTextButtonWithValuePressed<T> = void Function(T value);
class TextButtonWithValue<T> extends StatelessWidget {
final T value;
final OnTextButtonWithValuePressed onPressed;
final Widget child;
const TextButtonWithValue({
Key? key,
required this.value,
required this.onPressed,
required this.child,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return TextButton(
onPressed: () {
onPressed(value);
},
child: child,
);
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
OverlayColor? _overlayColor;
ColorFilter? getcolorFilter() {
final overlayColor = _overlayColor;
if (overlayColor == null) {
return null;
}
return ColorFilter.mode(
overlayColor.color,
BlendMode.colorBurn,
);
}
Iterable<Widget> overlayColorButtons() {
return OverlayColor.values.map((overlayColor) {
return Expanded(
flex: 1,
child: Container(
child: overlayColor.toTextButtonWithValue(
(value) {
setState(() {
_overlayColor = value;
});
},
),
),
);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Tinting Images in Flutter'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
Container(
height: 250.0,
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
image: DecorationImage(
colorFilter: getcolorFilter(),
fit: BoxFit.fitHeight,
image: NetworkImage('https://bit.ly/3jOueGG'),
),
),
),
SizedBox(height: 16.0),
Row(
children: overlayColorButtons().toList(),
)
],
),
),
);
}
}
SlideTransition in Flutter
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/gestures.dart';
class _HomePageState extends State<HomePage>
with SingleTickerProviderStateMixin {
late final _controller = AnimationController(
duration: Duration(milliseconds: 500),
vsync: this,
);
late final _animation = Tween<Offset>(
begin: Offset(0.0, 0.0),
end: Offset(-0.83, 0.0),
).animate(
CurvedAnimation(
parent: _controller,
curve: Curves.easeInQuint,
),
);
var _isExpanded = false;
@override
void dispose() {
super.dispose();
_controller.dispose();
}
@override
Widget build(BuildContext context) {
_controller.forward();
return Scaffold(
body: SizedBox.expand(
child: Stack(
fit: StackFit.passthrough,
children: [
Image.network(
'https://bit.ly/3BWYDbz',
fit: BoxFit.fitHeight,
),
Positioned(
top: 200.0,
child: SlideTransition(
position: _animation,
child: GestureDetector(
onTap: () {
_isExpanded = !_isExpanded;
if (_isExpanded) {
_controller.reverse();
} else {
_controller.forward();
}
},
child: Box(),
),
),
),
],
),
),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
State<HomePage> createState() => _HomePageState();
}
class Box extends StatelessWidget {
const Box({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: Colors.blue[200]?.withAlpha(200),
border: Border.all(
color: Colors.blue,
style: BorderStyle.solid,
width: 1.0,
),
borderRadius: BorderRadius.only(
topRight: Radius.circular(10),
bottomRight: Radius.circular(10),
),
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
Text(
'By: Jesper Anhede',
style: TextStyle(
fontSize: 18.0,
),
),
SizedBox(width: 10.0),
Icon(
Icons.info,
color: Colors.pink[400],
),
],
),
),
);
}
}
Expansion Panels and Lists in Flutter
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
class Event {
final String title;
final String details;
final String imageUrl;
bool isExpanded = false;
Event({
required this.title,
required this.details,
required this.imageUrl,
});
@override
bool operator ==(covariant Event other) => title == other.title;
}
const diwaliDetails =
'''Diwali, or Dipawali, is India's biggest and most important holiday of the year. The festival gets its name from the row (avali) of clay lamps (deepa) that Indians light outside their homes to symbolize the inner light that protects from spiritual darkness. This festival is as important to Hindus as the Christmas holiday is to Christians.''';
const halloweenDetails =
'''Halloween or Hallowe'en, less commonly known as Allhalloween, All Hallows' Eve, or All Saints' Eve, is a celebration observed in many countries on 31 October, the eve of the Western Christian feast of All Hallows' Day.''';
final events = [
Event(
title: 'Diwali',
details: diwaliDetails,
imageUrl: 'https://bit.ly/3mGg8YW',
),
Event(
title: 'Halloween',
details: halloweenDetails,
imageUrl: 'https://bit.ly/3wb1w7j',
),
];
extension ToPanel on Event {
ExpansionPanel toPanel() {
return ExpansionPanel(
headerBuilder: (context, isExpanded) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
title,
style: TextStyle(fontSize: 30.0),
),
);
},
isExpanded: isExpanded,
body: Container(
height: 250,
width: double.infinity,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.fitWidth,
colorFilter: ColorFilter.mode(
Colors.black.withOpacity(0.5),
BlendMode.luminosity,
),
image: NetworkImage(imageUrl),
),
),
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
details,
textAlign: TextAlign.center,
style: TextStyle(fontSize: 20, color: Colors.white, shadows: [
Shadow(
blurRadius: 1.0,
offset: Offset.zero,
color: Colors.black,
)
]),
),
),
),
),
);
}
}
class HomePage extends StatefulWidget {
HomePage({Key? key}) : super(key: key);
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Expansion Panels in Flutter'),
),
body: SingleChildScrollView(
child: ExpansionPanelList(
children: events.map((e) => e.toPanel()).toList(),
expansionCallback: (panelIndex, isExpanded) {
setState(() {
events[panelIndex].isExpanded = !isExpanded;
});
},
),
),
);
}
}
Complete CRUD App in Flutter
//Want to support my work 🤝? https://buymeacoffee.com/vandad
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:path_provider/path_provider.dart';
import 'package:sqflite/sqflite.dart';
import 'package:path_provider/path_provider.dart'
show getApplicationDocumentsDirectory;
class Person implements Comparable {
final int id;
final String firstName;
final String lastName;
const Person(this.id, this.firstName, this.lastName);
String get fullName => '$firstName $lastName';
Person.fromData(Map<String, Object?> data)
: id = data['ID'] as int,
firstName = data['FIRST_NAME'] as String,
lastName = data['LAST_NAME'] as String;
@override
int compareTo(covariant Person other) => other.id.compareTo(id);
@override
bool operator ==(covariant Person other) => id == other.id;
@override
String toString() =>
'Person, ID = $id, firstName = $firstName, lastName = $lastName';
}
class PersonDB {
final _controller = StreamController<List<Person>>.broadcast();
List<Person> _persons = [];
Database? _db;
final String dbName;
PersonDB({required this.dbName});
Future<bool> close() async {
final db = _db;
if (db == null) {
return false;
}
await db.close();
return true;
}
Future<bool> open() async {
if (_db != null) {
return true;
}
final directory = await getApplicationDocumentsDirectory();
final path = '${directory.path}/$dbName';
try {
final db = await openDatabase(path);
_db = db;
// create the table if it doesn't exist
final create = '''CREATE TABLE IF NOT EXISTS PEOPLE (
ID INTEGER PRIMARY KEY AUTOINCREMENT,
FIRST_NAME STRING NOT NULL,
LAST_NAME STRING NOT NULL
)''';
await db.execute(create);
// if everything went fine, we then read all the objects
// and populate the stream
_persons = await _fetchPeople();
_controller.add(_persons);
return true;
} catch (e) {
print('error = $e');
return false;
}
}
Future<List<Person>> _fetchPeople() async {
final db = _db;
if (db == null) {
return [];
}
try {
// read the existing data if any
final readResult = await db.query(
'PEOPLE',
distinct: true,
columns: ['ID', 'FIRST_NAME', 'LAST_NAME'],
orderBy: 'ID',
);
final people = readResult.map((row) => Person.fromData(row)).toList();
return people;
} catch (e) {
print('error = $e');
return [];
}
}
Future<bool> delete(Person person) async {
final db = _db;
if (db == null) {
return false;
}
try {
final deletedCount = await db.delete(
'PEOPLE',
where: 'ID = ?',
whereArgs: [person.id],
);
// delete it locally as well
if (deletedCount == 1) {
_persons.remove(person);
_controller.add(_persons);
return true;
} else {
return false;
}
} catch (e) {
print('Error inserting $e');
return false;
}
}
Future<bool> create(String firstName, String lastName) async {
final db = _db;
if (db == null) {
return false;
}
try {
final id = await db.insert(
'PEOPLE',
{
'FIRST_NAME': firstName,
'LAST_NAME': lastName,
},
);
final person = Person(id, firstName, lastName);
_persons.add(person);
_controller.add(_persons);
return true;
} catch (e) {
print('Error inserting $e');
return false;
}
}
// uses the person's id to update its first name and last name
Future<bool> update(Person person) async {
final db = _db;
if (db == null) {
return false;
}
try {
final updatedCount = await db.update(
'PEOPLE',
{
'FIRST_NAME': person.firstName,
'LAST_NAME': person.lastName,
},
where: 'ID = ?',
whereArgs: [person.id],
);
if (updatedCount == 1) {
_persons.removeWhere((p) => p.id == person.id);
_persons.add(person);
_controller.add(_persons);
return true;
} else {
return false;
}
} catch (e) {
print('Error inserting $e');
return false;
}
}
Stream<List<Person>> all() =>
_controller.stream.map((event) => event..sort());
}
typedef OnCompose = void Function(String firstName, String lastName);
class ComposeWidget extends StatefulWidget {
final OnCompose onCompose;
const ComposeWidget({Key? key, required this.onCompose}) : super(key: key);
@override
State<ComposeWidget> createState() => _ComposeWidgetState();
}
class _ComposeWidgetState extends State<ComposeWidget> {
final firstNameController = TextEditingController();
final lastNameController = TextEditingController();
@override
void dispose() {
firstNameController.dispose();
lastNameController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Column(children: [
TextField(
style: TextStyle(fontSize: 24),
decoration: InputDecoration(
hintText: 'Enter first name',
),
controller: firstNameController,
),
TextField(
style: TextStyle(fontSize: 24),
decoration: InputDecoration(
hintText: 'Enter last name',
),
controller: lastNameController,
),
TextButton(
onPressed: () {
final firstName = firstNameController.text;
final lastName = lastNameController.text;
widget.onCompose(firstName, lastName);
},
child: Text(
'Add to list',
style: TextStyle(fontSize: 24),
),
),
]),
);
}
}
class HomePage extends StatefulWidget {
HomePage({Key? key}) : super(key: key);
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
late final PersonDB _crudStorage;
@override
void initState() {
_crudStorage = PersonDB(dbName: 'db.sqlite');
_crudStorage.open();
super.initState();
}
@override
void dispose() {
_crudStorage.close();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('SQLite in Flutter'),
),
body: StreamBuilder(
stream: _crudStorage.all(),
builder: (context, snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.active:
case ConnectionState.waiting:
if (snapshot.data == null) {
return Center(child: CircularProgressIndicator());
}
final people = snapshot.data as List<Person>;
return Column(
children: [
ComposeWidget(
onCompose: (firstName, lastName) async {
await _crudStorage.create(firstName, lastName);
},
),
Expanded(
child: ListView.builder(
itemCount: people.length,
itemBuilder: (context, index) {
final person = people[index];
return ListTile(
onTap: () async {
final update =
await showUpdateDialog(context, person);
if (update == null) {
return;
}
await _crudStorage.update(update);
},
title: Text(
person.fullName,
style: TextStyle(fontSize: 24),
),
subtitle: Text(
'ID: ${person.id}',
style: TextStyle(fontSize: 18),
),
trailing: TextButton(
onPressed: () async {
final shouldDelete =
await showDeleteDialog(context);
if (shouldDelete) {
await _crudStorage.delete(person);
}
},
child: Icon(
Icons.disabled_by_default_rounded,
color: Colors.red,
),
),
);
},
),
),
],
);
default:
return Center(child: CircularProgressIndicator());
}
},
),
);
}
}
final firstNameController = TextEditingController();
final lastNameController = TextEditingController();
Future<Person?> showUpdateDialog(BuildContext context, Person person) {
firstNameController.text = person.firstName;
lastNameController.text = person.lastName;
return showDialog(
context: context,
builder: (context) {
return AlertDialog(
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text('Enter your udpated values here:'),
TextField(controller: firstNameController),
TextField(controller: lastNameController),
],
),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop(null);
},
child: Text('Cancel'),
),
TextButton(
onPressed: () {
final newPerson = Person(
person.id,
firstNameController.text,
lastNameController.text,
);
Navigator.of(context).pop(newPerson);
},
child: Text('Save'),
),
],
);
},
).then((value) {
if (value is Person) {
return value;
} else {
return null;
}
});
}
Future<bool> showDeleteDialog(BuildContext context) {
return showDialog(
context: context,
builder: (context) {
return AlertDialog(
content: Text('Are you sure you want to delete this item?'),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop(false);
},
child: Text('No'),
),
TextButton(
onPressed: () {
Navigator.of(context).pop(true);
},
child: Text('Delete'),
)
],
);
},
).then(
(value) {
if (value is bool) {
return value;
} else {
return false;
}
},
);
}
SQLite Storage in Flutter
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:path_provider/path_provider.dart';
import 'package:sqflite/sqflite.dart';
import 'package:path_provider/path_provider.dart'
show getApplicationDocumentsDirectory;
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
State<HomePage> createState() => _HomePageState();
}
class Person implements Comparable {
final int id;
final String firstName;
final String lastName;
const Person(this.id, this.firstName, this.lastName);
String get fullName => '$firstName $lastName';
Person.fromData(Map<String, Object?> data)
: id = data['ID'] as int,
firstName = data['FIRST_NAME'] as String,
lastName = data['LAST_NAME'] as String;
@override
int compareTo(covariant Person other) => other.id.compareTo(id);
}
typedef OnCompose = void Function(String firstName, String lastName);
class ComposeWidget extends StatefulWidget {
final OnCompose onCompose;
const ComposeWidget({Key? key, required this.onCompose}) : super(key: key);
@override
State<ComposeWidget> createState() => _ComposeWidgetState();
}
class _ComposeWidgetState extends State<ComposeWidget> {
final firstNameController = TextEditingController();
final lastNameController = TextEditingController();
@override
void dispose() {
firstNameController.dispose();
lastNameController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Column(children: [
TextField(
style: TextStyle(fontSize: 24),
decoration: InputDecoration(
hintText: 'Enter first name',
),
controller: firstNameController,
),
TextField(
style: TextStyle(fontSize: 24),
decoration: InputDecoration(
hintText: 'Enter last name',
),
controller: lastNameController,
),
TextButton(
onPressed: () {
final firstName = firstNameController.text;
final lastName = lastNameController.text;
widget.onCompose(firstName, lastName);
},
child: Text(
'Add to list',
style: TextStyle(fontSize: 24),
),
),
]),
);
}
}
class _HomePageState extends State<HomePage> {
late final Database db;
bool hasSetUpAlready = false;
Future<bool> setupDatabase() async {
if (hasSetUpAlready == false) {
final directory = await getApplicationDocumentsDirectory();
final path = '${directory.path}/db.sqlite';
try {
db = await openDatabase(path);
// create the table if it doesn't exist
final create = '''CREATE TABLE IF NOT EXISTS PEOPLE (
ID INTEGER PRIMARY KEY AUTOINCREMENT,
FIRST_NAME STRING NOT NULL,
LAST_NAME STRING NOT NULL
)''';
await db.execute(create);
hasSetUpAlready = true;
return true;
} catch (e) {
print('error = $e');
hasSetUpAlready = false;
return false;
}
} else {
return true;
}
}
Future<List<Person>> fetchPersons() async {
if (!await setupDatabase()) {
return [];
}
try {
// read the existing data if any
final readResult = await db.query(
'PEOPLE',
distinct: true,
columns: ['ID', 'FIRST_NAME', 'LAST_NAME'],
orderBy: 'ID',
);
final people = readResult.map((row) => Person.fromData(row)).toList()
..sort();
return people;
} catch (e) {
print('error = $e');
return [];
}
}
Future<bool> addPerson(String firstName, String lastName) async {
try {
await db.insert(
'PEOPLE',
{
'FIRST_NAME': firstName,
'LAST_NAME': lastName,
},
);
return true;
} catch (e) {
print('Error inserting $e');
return false;
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('SQLite in Flutter'),
),
body: FutureBuilder(
future: fetchPersons(),
builder: (context, snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.done:
final people = snapshot.data as List<Person>;
return Column(
children: [
ComposeWidget(
onCompose: (firstName, lastName) async {
await addPerson(firstName, lastName);
setState(() {});
},
),
Expanded(
child: ListView.builder(
itemCount: people.length,
itemBuilder: (context, index) {
final person = people[index];
return ListTile(
title: Text(
person.fullName,
style: TextStyle(fontSize: 24),
),
subtitle: Text(
'ID: ${person.id}',
style: TextStyle(fontSize: 18),
),
);
},
),
),
],
);
default:
return CircularProgressIndicator();
}
},
),
);
}
}
Circular Progress with Percentage in Flutter
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
class SizedCircularProgressIndicator extends StatelessWidget {
final double progress;
final double width;
final double height;
final TextStyle? textStyle;
const SizedCircularProgressIndicator({
Key? key,
this.textStyle,
required this.progress,
required this.width,
required this.height,
}) : super(key: key);
TextStyle get style => textStyle ?? TextStyle(fontSize: 30.0);
int get _progress => (progress * 100.0).toInt();
@override
Widget build(BuildContext context) {
return Stack(
alignment: Alignment.center,
children: [
Text('$_progress%', style: style),
SizedBox(
width: width,
height: height,
child: CircularProgressIndicator(
backgroundColor: Colors.white70,
value: progress,
color: Colors.blueAccent,
strokeWidth: 3.0,
),
),
],
);
}
}
const images = [
'https://bit.ly/3x7J5Qt',
'https://bit.ly/3ywI8l6',
'https://bit.ly/36fNNj9',
'https://bit.ly/3jOueGG',
'https://bit.ly/3qYOtDm',
'https://bit.ly/3wt11Ec',
'https://bit.ly/3yvFg7X',
'https://bit.ly/3ywzOla',
'https://bit.ly/3wnASpW',
'https://bit.ly/3jXSDto',
];
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: PageView.builder(
scrollDirection: Axis.horizontal,
itemCount: images.length,
itemBuilder: (context, index) {
return WithBlurredBackground(imageUrl: images[index]);
},
),
);
}
}
class WithBlurredBackground extends StatelessWidget {
final String imageUrl;
const WithBlurredBackground({Key? key, required this.imageUrl})
: super(key: key);
@override
Widget build(BuildContext context) {
return SizedBox.expand(
child: Stack(
alignment: Alignment.center,
fit: StackFit.passthrough,
children: [
SizedBox.expand(
child: ClipRect(
child: ImageFiltered(
imageFilter: ImageFilter.blur(
sigmaX: 10.0,
sigmaY: 10.0,
),
child: Image.network(
imageUrl,
fit: BoxFit.fitHeight,
),
),
),
),
NetworkImageWithProgress(url: imageUrl),
],
),
);
}
}
class NetworkImageWithProgress extends StatelessWidget {
final String url;
const NetworkImageWithProgress({Key? key, required this.url})
: super(key: key);
@override
Widget build(BuildContext context) {
return Image.network(
url,
loadingBuilder: (context, child, loadingProgress) {
final totalBytes = loadingProgress?.expectedTotalBytes;
final bytesLoaded = loadingProgress?.cumulativeBytesLoaded;
if (totalBytes != null && bytesLoaded != null) {
return SizedCircularProgressIndicator(
height: 100,
width: 100,
progress: bytesLoaded / totalBytes,
);
} else {
return child;
}
},
errorBuilder: (context, error, stackTrace) {
return Text('Error!');
},
);
}
}
Opening URLs in Flutter
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
class Person {
final String profileUrl;
final String name;
final String email;
final String phoneNumber;
final String websiteUrl;
const Person({
Key? key,
required this.profileUrl,
required this.name,
required this.email,
required this.phoneNumber,
required this.websiteUrl,
});
Person.vandad()
: profileUrl = 'https://bit.ly/3jwusS0',
name = 'Vandad Nahavandipoor',
email = 'vandad.np@gmail.com',
phoneNumber = '071234567',
websiteUrl = 'https://pixolity.se';
}
void open(String url) async {
if (await canLaunch(url)) {
await launch(url);
}
}
class PersonNameView extends StatelessWidget {
final Person person;
const PersonNameView(this.person, {Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Text(
person.name,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.black,
),
);
}
}
class PersonEmailView extends StatelessWidget {
final Person person;
const PersonEmailView(this.person, {Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return TextButton(
onPressed: () {
open('mailto:${person.email}');
},
child: Text(
'💌 Email me',
style: TextStyle(fontSize: 20.0),
),
);
}
}
class PersonPhoneView extends StatelessWidget {
final Person person;
const PersonPhoneView(this.person, {Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return TextButton(
onPressed: () {
open('tel://${person.phoneNumber}');
},
child: Text(
'🤙🏻 Call me',
style: TextStyle(fontSize: 20.0),
),
);
}
}
class PersonWebsiteView extends StatelessWidget {
final Person person;
const PersonWebsiteView(this.person, {Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return TextButton(
onPressed: () {
open(person.websiteUrl);
},
child: Text(
'🌍 Visit my website',
style: TextStyle(fontSize: 20.0),
),
);
}
}
const bigText = TextStyle(fontSize: 20.0);
class PersonView extends StatelessWidget {
final Person person;
const PersonView({Key? key, required this.person}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: Colors.blue[50],
borderRadius: BorderRadius.circular(16.0),
border: Border.all(color: Colors.white, width: 3.0),
boxShadow: [
BoxShadow(
blurRadius: 30.0,
color: Colors.black.withAlpha(50),
spreadRadius: 20.0,
),
]),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CircleAvatar(
radius: 100.0,
backgroundImage: NetworkImage(person.profileUrl),
),
SizedBox(height: 10),
PersonNameView(person),
PersonEmailView(person),
PersonPhoneView(person),
PersonWebsiteView(person)
],
),
),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SingleChildScrollView(
child: PersonView(
person: Person.vandad(),
),
),
),
);
}
}
Commodore 64 Screen in Flutter
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
const textColor = Color.fromRGBO(156, 156, 247, 1);
class BoxPainter extends CustomPainter {
final bool isBlinking;
BoxPainter({required this.isBlinking});
@override
void paint(Canvas canvas, Size size) {
if (isBlinking) {
final rect = Rect.fromLTWH(
size.width / 20.0,
size.height / 2.8,
size.width / 24.0,
size.height / 13.0,
);
final paint = Paint()..color = textColor;
canvas.drawRect(rect, paint);
}
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}
class ReadyPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
final textStyle = TextStyle(
color: textColor,
fontSize: size.width / 45.0,
fontFamily: 'C64',
);
final span = TextSpan(
text: 'READY',
style: textStyle,
);
final painter = TextPainter(
text: span,
textDirection: TextDirection.ltr,
);
painter.layout(
minWidth: 0,
maxWidth: size.width,
);
final offset = Offset(
painter.width / 2.0,
painter.height * 8.0,
);
painter.paint(canvas, offset);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}
class SubTitlePainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
final textStyle = TextStyle(
color: textColor,
fontSize: size.width / 45.0,
fontFamily: 'C64',
);
final span = TextSpan(
text: '64K RAM SYSTEM 38911 BASIC BYTES FREE',
style: textStyle,
);
final painter = TextPainter(
text: span,
textDirection: TextDirection.ltr,
);
painter.layout(
minWidth: 0,
maxWidth: size.width,
);
final offset = Offset(
size.width - painter.width - (size.width / 11),
painter.height * 6.0,
);
painter.paint(canvas, offset);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}
class TitlePainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
final textStyle = TextStyle(
color: textColor,
fontSize: size.width / 40.0,
fontFamily: 'C64',
);
final span = TextSpan(
text: '**** COMMODORE 64 BASIC V2 ****',
style: textStyle,
);
final painter = TextPainter(
text: span,
textDirection: TextDirection.ltr,
);
painter.layout(
minWidth: 0,
maxWidth: size.width,
);
final offset = Offset(
size.width - painter.width - (size.width / 9),
size.height / 6,
);
painter.paint(canvas, offset);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}
class BackgroundPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
final border = size.width / 20.0;
final color = Color.fromRGBO(
58,
57,
213,
1,
);
final paint = Paint()..color = color;
final rect = Rect.fromLTWH(
border,
border,
size.width - (border * 2.0),
size.height - (border * 2.0),
);
canvas.drawRect(rect, paint);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}
class BorderPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()..color = textColor;
final rect = Rect.fromLTWH(
0.0,
0.0,
size.width,
size.height,
);
canvas.drawRect(rect, paint);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}
class Commodore64Painter extends CustomPainter {
final bool isBlinking;
late final List<CustomPainter> painters;
Commodore64Painter({required this.isBlinking}) {
painters = [
BorderPainter(),
BackgroundPainter(),
TitlePainter(),
SubTitlePainter(),
ReadyPainter(),
BoxPainter(isBlinking: isBlinking)
];
}
@override
void paint(Canvas canvas, Size size) {
painters.forEach(
(p) => p.paint(
canvas,
size,
),
);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => painters
.map((p) => p.shouldRepaint(oldDelegate))
.reduce((p1, p2) => p1 || p2);
}
class Commodore64 extends StatefulWidget {
const Commodore64({Key? key}) : super(key: key);
@override
State<Commodore64> createState() => _Commodore64State();
}
class _Commodore64State extends State<Commodore64> {
bool _isBlinking = false;
final timer = Stream.periodic(Duration(seconds: 1), (value) => value);
void _triggerRedraw() async {
await for (final _ in timer) {
setState(() {
_isBlinking = !_isBlinking;
});
}
}
@override
void initState() {
super.initState();
_triggerRedraw();
}
@override
Widget build(BuildContext context) {
return LayoutBuilder(builder: (context, constraints) {
return Container(
width: constraints.maxWidth,
height: constraints.maxWidth / (16.0 / 9.0),
child: CustomPaint(
painter: Commodore64Painter(isBlinking: _isBlinking),
),
);
});
}
}
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Commodore64(),
),
);
}
}
Animated Lists in Flutter
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
class NetworkImage extends StatelessWidget {
final String url;
const NetworkImage({
Key? key,
required this.url,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Image.network(
url,
loadingBuilder: (context, child, loadingProgress) {
final totalBytes = loadingProgress?.expectedTotalBytes;
final bytesLoaded = loadingProgress?.cumulativeBytesLoaded;
if (totalBytes != null && bytesLoaded != null) {
return LinearProgressIndicator(
value: bytesLoaded / totalBytes,
);
} else {
return child;
}
},
errorBuilder: (context, error, stackTrace) {
return Text('Error!');
},
);
}
}
class NetworkImageCard extends StatelessWidget {
final String url;
const NetworkImageCard({
Key? key,
required this.url,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Center(
child: Container(
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
),
child: NetworkImage(
url: url,
),
),
);
}
}
const imageUrls = [
'https://bit.ly/3x7J5Qt',
'https://bit.ly/3ywI8l6',
'https://bit.ly/36fNNj9',
'https://bit.ly/3jOueGG',
'https://bit.ly/3qYOtDm',
'https://bit.ly/3wt11Ec',
'https://bit.ly/3yvFg7X',
'https://bit.ly/3ywzOla',
'https://bit.ly/3wnASpW',
'https://bit.ly/3jXSDto',
];
Stream<String> images() => Stream.periodic(
Duration(seconds: 3),
(index) => index % imageUrls.length,
).map((index) => imageUrls[index]);
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
final GlobalKey<AnimatedListState> _key = GlobalKey();
List<String> imageUrls = [];
void populateList() async {
await for (final url in images()) {
imageUrls.insert(0, url);
_key.currentState?.insertItem(
0,
duration: Duration(milliseconds: 400),
);
}
}
@override
Widget build(BuildContext context) {
populateList();
return Scaffold(
appBar: AppBar(
title: Text('Animated Lists in Flutter'),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: AnimatedList(
key: _key,
initialItemCount: imageUrls.length,
itemBuilder: (context, index, animation) {
final imageUrl = imageUrls[index];
return SizeTransition(
sizeFactor: animation.drive(
CurveTween(curve: Curves.elasticInOut),
),
child: Column(
children: [
NetworkImageCard(url: imageUrl),
SizedBox(height: 10.0),
],
),
);
},
),
),
);
}
}
CheckboxListTile in Flutter
import 'package:flutter/material.dart';
enum Item { umbrella, coat, boots }
extension Info on Item {
String get title {
switch (this) {
case Item.umbrella:
return 'Umbrella';
case Item.boots:
return 'Boots';
case Item.coat:
return 'Jacket';
}
}
String get icon {
switch (this) {
case Item.umbrella:
return '☂️';
case Item.boots:
return '🥾';
case Item.coat:
return '🧥';
}
}
}
typedef OnChecked = void Function(bool);
class Tile extends StatelessWidget {
final Item item;
final bool isChecked;
final OnChecked onChecked;
const Tile({
Key? key,
required this.item,
required this.isChecked,
required this.onChecked,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return ConstrainedBox(
constraints: BoxConstraints(minHeight: 100.0),
child: Center(
child: CheckboxListTile(
shape: ContinuousRectangleBorder(),
value: isChecked,
secondary: Text(
item.icon,
style: TextStyle(fontSize: 30.0),
),
title: Text(
item.title,
style: TextStyle(fontSize: 40.0),
),
onChanged: (value) {
onChecked(value ?? false);
},
),
),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
final Set<Item> _enabledItems = {};
Widget get listView {
return ListView.builder(
shrinkWrap: true,
itemBuilder: (context, index) {
final item = Item.values[index];
final isChecked = _enabledItems.contains(item);
return Tile(
isChecked: isChecked,
item: item,
onChecked: (isChecked) {
setState(() {
if (isChecked) {
_enabledItems.add(item);
} else {
_enabledItems.remove(item);
}
});
},
);
},
itemCount: Item.values.length,
);
}
Widget get title {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Remember to pick all items! It's going to be rainy today!",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 40),
),
);
}
Widget get readyButton {
final onPressed = () async {
// program this
await showDialog(
context: context,
builder: (context) {
return AlertDialog(
content: Text('You seem to be ready for a rainy day! ✅'),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('OK'),
)
],
);
},
);
};
final isEnabled = _enabledItems.containsAll(Item.values);
return FractionallySizedBox(
widthFactor: 0.8,
child: ElevatedButton(
onPressed: isEnabled ? onPressed : null,
child: Text('Ready!'),
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Checkbox List Tile in Flutter'),
),
body: SingleChildScrollView(
child: Column(
children: [
title,
listView,
SizedBox(height: 50.0),
readyButton,
],
),
),
);
}
}
- Operator on String in Dart
extension Minus on String {
String operator -(String rhs) => replaceAll(rhs, '');
}
void testIt() {
assert('foo bar' - 'foo ' == 'bar');
assert('foo bar foo' - 'foo' == ' bar ');
assert('bar' - 'foo' == 'bar');
assert('BAR' - 'bar' == 'BAR');
assert('foo' - 'FOO' == 'foo');
assert('foobarbaz' - 'bar' == 'foobaz');
}
Dart Progress for Future<T>
import 'dart:io' show stdout;
import 'dart:async' show Future, Stream;
const loadingSequence = ['⢿', '⣻', '⣽', '⣾', '⣷', '⣯', '⣟', '⡿'];
const escape = '\x1B[38;5;';
const color = '${escape}1m';
const textColor = '${escape}6m';
String progress({required int value, required String text}) {
final progress = '$color${loadingSequence[value % loadingSequence.length]}';
final coloredText = '$textColor$text';
return '$progress\t$coloredText';
}
Future<T> performWithProgress<T>({
required Future<T> task,
required String progressText,
}) {
final stream = Stream<String>.periodic(
Duration(milliseconds: 100),
(value) => progress(
value: value,
text: progressText,
),
);
final subscription = stream.listen(
(event) {
stdout.write('\r $event');
},
);
task.whenComplete(() {
stdout.write('\r ✅\t$progressText');
stdout.write('\n');
subscription.cancel();
});
return task;
}
final task1 = Future.delayed(Duration(seconds: 1), () => 'Result 1');
final task2 = Future.delayed(Duration(seconds: 2), () => 'Result 2');
final task3 = Future.delayed(Duration(seconds: 3), () => 'Result 3');
void main(List<String> args) async {
var result = await performWithProgress(
task: task1,
progressText: 'Loading task 1',
);
print('\tTask 1 result: $result');
result = await performWithProgress(
task: task2,
progressText: 'Loading task 2',
);
print('\tTask 2 result: $result');
result = await performWithProgress(
task: task3,
progressText: 'Loading task 3',
);
print('\tTask 3 result: $result');
}
Move Widget Shadows with Animation
import 'package:flutter/material.dart';
class ImageTransition extends AnimatedWidget {
final String imageUrl;
Animation<double> get shadowXOffset => listenable as Animation<double>;
const ImageTransition(this.imageUrl, {shadowXOffset})
: super(listenable: shadowXOffset);
@override
Widget build(BuildContext context) {
return Container(
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
boxShadow: [
BoxShadow(
blurRadius: 10,
offset: Offset(shadowXOffset.value, 20.0),
color: Colors.black.withAlpha(100),
spreadRadius: -10,
)
],
),
child: Image.network(imageUrl),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
State<HomePage> createState() => _HomePageState();
}
class CustomCurve extends CurveTween {
CustomCurve() : super(curve: Curves.easeInOutSine);
@override
double transform(double t) {
return (super.transform(t) - 0.5) * 25.0;
}
}
class _HomePageState extends State<HomePage>
with SingleTickerProviderStateMixin {
late final AnimationController _controller;
late final Animation<double> _animation;
@override
void initState() {
_controller = AnimationController(
vsync: this,
duration: Duration(seconds: 1),
);
_animation = CustomCurve().animate(_controller);
super.initState();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
_controller.repeat(reverse: true);
return Scaffold(
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Center(
child: ImageTransition(
'https://bit.ly/3x7J5Qt',
shadowXOffset: _animation,
),
),
),
);
}
}
Gallery with Blurred Backgrounds in Flutter
import 'package:flutter/material.dart';
const images = [
'https://bit.ly/3x7J5Qt',
'https://bit.ly/3ywI8l6',
'https://bit.ly/36fNNj9',
'https://bit.ly/3jOueGG',
'https://bit.ly/3qYOtDm',
'https://bit.ly/3wt11Ec',
'https://bit.ly/3yvFg7X',
'https://bit.ly/3ywzOla',
'https://bit.ly/3wnASpW',
'https://bit.ly/3jXSDto',
];
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: PageView.builder(
scrollDirection: Axis.horizontal,
itemCount: images.length,
itemBuilder: (context, index) {
return WithBlurredBackground(imageUrl: images[index]);
},
),
);
}
}
class WithBlurredBackground extends StatelessWidget {
final String imageUrl;
const WithBlurredBackground({Key? key, required this.imageUrl})
: super(key: key);
@override
Widget build(BuildContext context) {
return SizedBox.expand(
child: Stack(
alignment: Alignment.center,
fit: StackFit.passthrough,
children: [
SizedBox.expand(
child: ClipRect(
child: ImageFiltered(
imageFilter: ImageFilter.blur(
sigmaX: 10.0,
sigmaY: 10.0,
),
child: Image.network(
imageUrl,
fit: BoxFit.fitHeight,
),
),
),
),
Image.network(imageUrl),
],
),
);
}
}
Custom Path Clippers in Flutter
import 'package:flutter/material.dart';
const images = [
'https://bit.ly/3x7J5Qt',
'https://bit.ly/3ywI8l6',
'https://bit.ly/36fNNj9',
'https://bit.ly/3jOueGG',
'https://bit.ly/3qYOtDm',
'https://bit.ly/3wt11Ec',
'https://bit.ly/3yvFg7X',
'https://bit.ly/3ywzOla',
'https://bit.ly/3wnASpW',
'https://bit.ly/3jXSDto',
];
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.only(
top: 40.0,
left: 10.0,
right: 10.0,
),
child: Column(
children: images
.map((url) => ElevatedNetworkImage(url: url))
.expand(
(img) => [
img,
SizedBox(height: 30.0),
],
)
.toList(),
),
),
),
);
}
}
class ElevatedNetworkImage extends StatelessWidget {
final String url;
const ElevatedNetworkImage({Key? key, required this.url}) : super(key: key);
@override
Widget build(BuildContext context) {
return PhysicalShape(
color: Colors.white,
clipper: Clipper(),
elevation: 20.0,
clipBehavior: Clip.none,
shadowColor: Colors.white.withAlpha(200),
child: CutEdges(
child: Image.network(url),
),
);
}
}
class Clipper extends CustomClipper<Path> {
static const variance = 0.2;
static const reverse = 1.0 - variance;
@override
Path getClip(Size size) {
final path = Path();
path.moveTo(0.0, size.height * Clipper.variance);
path.lineTo(size.width * Clipper.variance, 0.0);
path.lineTo(size.width, 0.0);
path.lineTo(size.width, size.height * Clipper.reverse);
path.lineTo(size.width * Clipper.reverse, size.height);
path.lineTo(0.0, size.height);
path.lineTo(0.0, size.height * Clipper.variance);
path.close;
return path;
}
@override
bool shouldReclip(covariant CustomClipper<Path> oldClipper) => false;
}
class CutEdges extends StatelessWidget {
final Widget child;
const CutEdges({Key? key, required this.child}) : super(key: key);
@override
Widget build(BuildContext context) {
return ClipPath(
clipper: Clipper(),
child: child,
);
}
}
Frost Effect on Images in Flutter
import 'package:flutter/material.dart';
const images = [
'https://bit.ly/3x7J5Qt',
'https://bit.ly/3ywI8l6',
'https://bit.ly/36fNNj9',
'https://bit.ly/3jOueGG',
'https://bit.ly/3qYOtDm',
'https://bit.ly/3wt11Ec',
'https://bit.ly/3yvFg7X',
'https://bit.ly/3ywzOla',
'https://bit.ly/3wnASpW',
'https://bit.ly/3jXSDto',
];
final loremIpsum =
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Padding(
padding: const EdgeInsets.fromLTRB(
8.0,
0.0,
8.0,
0.0,
),
child: SingleChildScrollView(
child: Column(
children: images
.map(
(url) => GlossyNetworkImageWithProgress(
url: url,
title: 'Image title',
description: loremIpsum,
),
)
.expand(
(image) => [
image,
SizedBox(height: 16.0),
],
)
.toList(),
),
),
),
),
);
}
}
class GlossyNetworkImageWithProgress extends StatefulWidget {
final String url;
final String title;
final String description;
const GlossyNetworkImageWithProgress(
{Key? key,
required this.url,
required this.title,
required this.description})
: super(key: key);
@override
_GlossyNetworkImageWithProgressState createState() =>
_GlossyNetworkImageWithProgressState();
}
class _GlossyNetworkImageWithProgressState
extends State<GlossyNetworkImageWithProgress>
with SingleTickerProviderStateMixin {
late final AnimationController _controller;
late final Animation<double> _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: Duration(seconds: 1),
);
_animation = Tween(
begin: 0.0,
end: 1.0,
).animate(_controller);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
final networkImage = Image.network(
widget.url,
fit: BoxFit.fitHeight,
frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
_controller.reset();
_controller.forward();
return FadeTransition(
opacity: _animation,
child: CustomBox(
child: child,
),
);
},
loadingBuilder: (context, child, loadingProgress) {
final totalBytes = loadingProgress?.expectedTotalBytes;
final bytesLoaded = loadingProgress?.cumulativeBytesLoaded;
if (totalBytes != null && bytesLoaded != null) {
return CustomBox(
child: CircularProgressIndicator(
backgroundColor: Colors.white70,
value: bytesLoaded / totalBytes,
color: Colors.blue[900],
strokeWidth: 5.0,
),
);
} else {
return child;
}
},
errorBuilder: (context, error, stackTrace) {
return Text('Error!');
},
);
return BottomGloss(
networkImage: networkImage,
title: widget.title,
description: widget.description,
);
}
}
class BottomGloss extends StatelessWidget {
final String title;
final String description;
const BottomGloss(
{Key? key,
required this.networkImage,
required this.title,
required this.description})
: super(key: key);
final Image networkImage;
@override
Widget build(BuildContext context) {
return ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(8.0)),
child: Stack(
fit: StackFit.passthrough,
children: [
networkImage,
Container(
height: 300.0,
alignment: Alignment.bottomCenter,
child: ClipRect(
child: FractionallySizedBox(
heightFactor: 0.5,
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 10.0,
sigmaY: 10.0,
),
child: BottomContents(
title: title,
description: description,
),
),
),
),
),
],
),
);
}
}
class BottomContents extends StatelessWidget {
final String title;
final String description;
const BottomContents({
Key? key,
required this.title,
required this.description,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white.withOpacity(0.4),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TitleText(text: title),
SizedBox(height: 8.0),
SubTitleText(text: description),
],
),
),
),
);
}
}
class SubTitleText extends StatelessWidget {
final String text;
const SubTitleText({Key? key, required this.text}) : super(key: key);
@override
Widget build(BuildContext context) {
return Text(
text,
style: TextStyle(
color: Colors.black,
fontSize: 20.0,
),
);
}
}
class TitleText extends StatelessWidget {
final String text;
const TitleText({Key? key, required this.text}) : super(key: key);
@override
Widget build(BuildContext context) {
return Text(
text,
style: TextStyle(
color: Colors.white,
fontSize: 30.0,
),
);
}
}
class CustomBox extends StatelessWidget {
final Widget child;
const CustomBox({Key? key, required this.child}) : super(key: key);
@override
Widget build(BuildContext context) {
return SizedBox(
height: 300.0,
width: MediaQuery.of(context).size.width,
child: child is ProgressIndicator ? Center(child: child) : child,
);
}
}
Custom Clippers in Flutter
import 'package:flutter/material.dart';
import 'dart:math' show min;
const gridImages = [
'https://bit.ly/3x7J5Qt',
'https://bit.ly/3ywI8l6',
'https://bit.ly/3jRSRCu',
'https://bit.ly/36fNNj9',
'https://bit.ly/3jOueGG',
'https://bit.ly/3qYOtDm',
'https://bit.ly/3wt11Ec',
'https://bit.ly/3yvFg7X',
'https://bit.ly/3ywzOla',
'https://bit.ly/3wnASpW',
'https://bit.ly/3jXSDto',
];
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: GridView.count(
padding: const EdgeInsets.fromLTRB(8.0, 48.0, 8.0, 48.0),
crossAxisCount: 2,
mainAxisSpacing: 8.0,
crossAxisSpacing: 8.0,
children: gridImages
.map((url) => NetworkImageWithProgress(url: url))
.toList(),
),
);
}
}
class CircularClipper extends CustomClipper<Rect> {
@override
Rect getClip(Size size) {
final center = Offset(
size.width / 2.0,
size.height / 2.0,
);
final minWidthorHeight = min(size.width, size.height);
return Rect.fromCenter(
center: center,
width: minWidthorHeight,
height: minWidthorHeight,
);
}
@override
bool shouldReclip(covariant CustomClipper<Rect> oldClipper) => false;
}
class Circular extends StatelessWidget {
final Widget child;
const Circular({Key? key, required this.child}) : super(key: key);
@override
Widget build(BuildContext context) {
return ClipOval(
clipper: CircularClipper(),
child: child,
);
}
}
class CustomBox extends StatelessWidget {
final Widget child;
const CustomBox({Key? key, required this.child}) : super(key: key);
@override
Widget build(BuildContext context) {
return SizedBox(
height: 220.0,
width: MediaQuery.of(context).size.width,
child: child is ProgressIndicator
? Center(child: child)
: Circular(child: child),
);
}
}
class NetworkImageWithProgress extends StatefulWidget {
final String url;
const NetworkImageWithProgress({Key? key, required this.url})
: super(key: key);
@override
_NetworkImageWithProgressState createState() =>
_NetworkImageWithProgressState();
}
class _NetworkImageWithProgressState extends State<NetworkImageWithProgress>
with SingleTickerProviderStateMixin {
late final AnimationController _controller;
late final Animation<double> _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: Duration(seconds: 1),
);
_animation = Tween(
begin: 0.0,
end: 1.0,
).animate(_controller);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Image.network(
widget.url,
fit: BoxFit.fitHeight,
frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
_controller.reset();
_controller.forward();
return FadeTransition(
opacity: _animation,
child: CustomBox(
child: child,
),
);
},
loadingBuilder: (context, child, loadingProgress) {
final totalBytes = loadingProgress?.expectedTotalBytes;
final bytesLoaded = loadingProgress?.cumulativeBytesLoaded;
if (totalBytes != null && bytesLoaded != null) {
return CustomBox(
child: CircularProgressIndicator(
backgroundColor: Colors.white70,
value: bytesLoaded / totalBytes,
color: Colors.blue[900],
strokeWidth: 5.0,
),
);
} else {
return child;
}
},
errorBuilder: (context, error, stackTrace) {
return Text('Error!');
},
);
}
}
Check if Website is Up or Down in Dart
class UpStatus {
final bool isUp;
final DateTime timestamp;
const UpStatus(this.isUp, this.timestamp);
}
class Pling {
final String url;
final Duration interval;
const Pling({
required this.url,
required this.interval,
});
Stream<UpStatus> checkIfUp() =>
Stream.periodic(interval, (_) => DateTime.now()).asyncExpand(
(now) => HttpClient()
.headUrl(Uri.parse(url))
.then((req) => req..followRedirects = false)
.then((req) => req.close())
.then((resp) => resp.statusCode)
.then((statusCode) => statusCode == 200)
.onError((error, stackTrace) => false)
.then((isUp) => UpStatus(isUp, now))
.asStream(),
);
}
const oneSecond = Duration(seconds: 1);
const url = 'https://dart.dev';
extension IsOrIsNot on bool {
String get isOrIsNot => this ? 'is' : 'is not';
}
void testIt() async {
final pling = Pling(
url: url,
interval: oneSecond,
);
await for (final upStatus in pling.checkIfUp()) {
final timestamp = upStatus.timestamp;
final isUpStr = upStatus.isUp.isOrIsNot;
print('$url $isUpStr up at $timestamp');
}
}
Section Titles on ListView in Flutter
import 'package:flutter/material.dart';
final List<Section> allSections = [
Section(
'Spring',
[
'https://cnn.it/3xu58Ap',
'https://bit.ly/3ueqqC1',
],
),
Section(
'Summer',
[
'https://bit.ly/3ojNhLc',
'https://bit.ly/2VcCSow',
],
),
Section(
'Autumn',
[
'https://bit.ly/3ib1TJk',
'https://bit.ly/2XSpjvq',
],
),
Section(
'Winter',
[
'https://bit.ly/3iaQNE7',
'https://bit.ly/3AY8YE4',
],
),
];
class Section {
final String title;
final List<String> urls;
const Section(this.title, this.urls);
}
extension ToWidgets on Section {
Iterable<Widget> toNetworkImageCards() {
return [
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
title,
style: TextStyle(
fontSize: 40,
),
),
),
...urls.expand(
(url) => [
NetworkImageCard(url: url),
SizedBox(height: 10),
],
),
];
}
}
class NetworkImageCard extends StatelessWidget {
final String url;
const NetworkImageCard({
Key? key,
required this.url,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Center(
child: Container(
child: NetworkImageWithProgress(
url: url,
),
),
);
}
}
class NetworkImageWithProgress extends StatefulWidget {
final String url;
const NetworkImageWithProgress({Key? key, required this.url})
: super(key: key);
@override
_NetworkImageWithProgressState createState() =>
_NetworkImageWithProgressState();
}
class _NetworkImageWithProgressState extends State<NetworkImageWithProgress>
with SingleTickerProviderStateMixin {
late final AnimationController _controller;
late final Animation<double> _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: Duration(seconds: 1),
);
_animation = Tween(
begin: 0.0,
end: 1.0,
).animate(_controller);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Image.network(
widget.url,
fit: BoxFit.fitWidth,
frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
_controller.reset();
_controller.forward();
return FadeTransition(
opacity: _animation,
child: CustomBox(
child: child,
),
);
},
loadingBuilder: (context, child, loadingProgress) {
final totalBytes = loadingProgress?.expectedTotalBytes;
final bytesLoaded = loadingProgress?.cumulativeBytesLoaded;
if (totalBytes != null && bytesLoaded != null) {
return CustomBox(
child: CircularProgressIndicator(
backgroundColor: Colors.white70,
value: bytesLoaded / totalBytes,
color: Colors.blue[900],
strokeWidth: 5.0,
),
);
} else {
return child;
}
},
errorBuilder: (context, error, stackTrace) {
return Text('Error!');
},
);
}
}
class CustomBox extends StatelessWidget {
final Widget child;
const CustomBox({Key? key, required this.child}) : super(key: key);
@override
Widget build(BuildContext context) {
return SizedBox(
height: 220.0,
width: MediaQuery.of(context).size.width,
child: child is ProgressIndicator ? Center(child: child) : child,
);
}
}
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListView.builder(
itemBuilder: (context, index) {
final section = allSections[index];
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: section.toNetworkImageCards().toList(),
);
},
itemCount: allSections.length,
),
);
}
}
Circular Progress in Flutter
import 'package:flutter/material.dart';
class CustomBox extends StatelessWidget {
final Widget child;
const CustomBox({Key? key, required this.child}) : super(key: key);
@override
Widget build(BuildContext context) {
return SizedBox(
height: 220.0,
width: MediaQuery.of(context).size.width,
child: Center(child: child),
);
}
}
class NetworkImageWithProgress extends StatefulWidget {
final String url;
const NetworkImageWithProgress({Key? key, required this.url})
: super(key: key);
@override
_NetworkImageWithProgressState createState() =>
_NetworkImageWithProgressState();
}
class _NetworkImageWithProgressState extends State<NetworkImageWithProgress>
with SingleTickerProviderStateMixin {
late final AnimationController _controller;
late final Animation<double> _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: Duration(seconds: 1),
);
_animation = Tween(
begin: 0.0,
end: 1.0,
).animate(_controller);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Image.network(
widget.url,
fit: BoxFit.fitWidth,
frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
_controller.reset();
_controller.forward();
return FadeTransition(
opacity: _animation,
child: CustomBox(
child: child,
),
);
},
loadingBuilder: (context, child, loadingProgress) {
final totalBytes = loadingProgress?.expectedTotalBytes;
final bytesLoaded = loadingProgress?.cumulativeBytesLoaded;
if (totalBytes != null && bytesLoaded != null) {
return CustomBox(
child: CircularProgressIndicator(
backgroundColor: Colors.white70,
value: bytesLoaded / totalBytes,
color: Colors.blue[900],
strokeWidth: 5.0,
),
);
} else {
return child;
}
},
errorBuilder: (context, error, stackTrace) {
return Text('Error!');
},
);
}
}
final images = [
'https://bit.ly/3x7J5Qt',
'https://bit.ly/3ywI8l6',
'https://bit.ly/36fNNj9',
'https://bit.ly/3jOueGG',
'https://bit.ly/3wt11Ec',
'https://bit.ly/3ywzOla',
].map((url) => NetworkImageWithProgress(url: url)).expand(
(element) => [
element,
SizedBox(
height: 10.0,
)
],
);
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Column(
children: images.toList(),
),
),
);
}
}
Displaying Scroll Wheels in Flutter
import 'package:flutter/material.dart';
class FadingNetworkImage extends StatefulWidget {
final String url;
const FadingNetworkImage({Key? key, required this.url}) : super(key: key);
@override
_FadingNetworkImageState createState() => _FadingNetworkImageState();
}
class _FadingNetworkImageState extends State<FadingNetworkImage>
with SingleTickerProviderStateMixin {
late final AnimationController _controller;
late final Animation<double> _animation;
@override
void initState() {
super.initState();
_controller =
AnimationController(vsync: this, duration: Duration(seconds: 1));
_animation = Tween(begin: 0.0, end: 1.0).animate(_controller);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Image.network(
widget.url,
frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
_controller.reset();
_controller.forward();
return FadeTransition(
opacity: _animation,
child: child,
);
},
loadingBuilder: (context, child, loadingProgress) {
final totalBytes = loadingProgress?.expectedTotalBytes;
final bytesLoaded = loadingProgress?.cumulativeBytesLoaded;
if (totalBytes != null && bytesLoaded != null) {
return LinearProgressIndicator(
value: bytesLoaded / totalBytes,
);
} else {
return child;
}
},
errorBuilder: (context, error, stackTrace) {
return Text('Error!');
},
);
}
}
final images = [
'https://bit.ly/3x7J5Qt',
'https://bit.ly/3ywI8l6',
'https://bit.ly/36fNNj9',
'https://bit.ly/3jOueGG',
'https://bit.ly/3wt11Ec',
'https://bit.ly/3ywzOla',
].map((i) => NetworkImageCard(url: i));
class NetworkImageCard extends StatelessWidget {
final String url;
const NetworkImageCard({
Key? key,
required this.url,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Center(
child: Container(
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
boxShadow: [
BoxShadow(
blurRadius: 5,
offset: Offset(0, 0),
color: Colors.black.withAlpha(40),
spreadRadius: 5,
)
],
),
child: FadingNetworkImage(
url: url,
),
),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListWheelScrollView(
itemExtent: 164.0,
squeeze: 0.9,
perspective: 0.003,
children: images.toList(),
),
);
}
}
Post Messages to Slack with Dart
import 'dart:convert' show utf8;
import 'dart:convert' show json;
class SlackMessage {
final String? inChannel;
final String? userName;
final String message;
final String? iconEmoji;
const SlackMessage({
required this.inChannel,
required this.userName,
required this.message,
required this.iconEmoji,
});
Future<bool> send(String webhookUrl) async {
final payload = {
'text': message,
if (inChannel != null) 'channel': inChannel!,
if (userName != null) 'username': userName!,
if (iconEmoji != null) 'icon_emoji': iconEmoji!
};
final request = await HttpClient().postUrl(Uri.parse(webhookUrl));
final payloadData = utf8.encode(json.encode(payload));
request.add(payloadData);
final response = await request.close();
return response.statusCode == 200;
}
}
const webhookUrl = 'put your webhook url here';
void testIt() async {
final message = SlackMessage(
inChannel: 'dart',
userName: 'Flutter',
message: 'Hello from Dart in Terminal',
iconEmoji: 'blue_heart:',
);
if (await message.send(webhookUrl)) {
print('Successfully sent the message');
} else {
print('Could not send the message');
}
}
Unwrap List<T?>? in Dart
extension Unwrap<T> on List<T?>? {
List<T> unwrap() => (this ?? []).whereType<T>().toList();
}
void testOptionalListOfOptionals() {
final List<int?>? optionalListOfOptionals = [1, 2, null, 3, null];
final unwrapped = optionalListOfOptionals.unwrap(); // List<int>
print(unwrapped); // prints [1, 2, 3]
}
void testListOfOptionals() {
final listOfOptionals = [20, 30, null, 40]; // List<int?>
final unwrapped = listOfOptionals.unwrap(); // List<int>
print(unwrapped); // prints [20, 30, 40]
}
void testNormalList() {
final list = [50, 60, 70]; // List<int>
final unwrapped = list.unwrap(); // List<int>
print(unwrapped); // prints [50, 60, 70]
}
Avoiding UI Jitters When Switching Widgets in Flutter
const imageUrls = [
'https://cnn.it/3xu58Ap', // spring
'https://bit.ly/2VcCSow', // summer
'https://bit.ly/3A3zStC', // autumn
'https://bit.ly/2TNY7wi' // winter
];
extension ToNetworkImage<T extends String> on List<T> {
List<Widget> toNetworkImages() => map((s) => Image.network(s)).toList();
}
class HomePage extends StatefulWidget {
@override
State createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
var _currentIndex = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Indexed Stack')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IndexedStack(
index: _currentIndex,
children: imageUrls.toNetworkImages(),
),
TextButton(
onPressed: () {
setState(
() {
_currentIndex++;
if (_currentIndex >= imageUrls.length) {
_currentIndex = 0;
}
},
);
},
child: Text('Go to next season'),
)
],
),
),
);
}
}
Detect Redirects in Dart
Future<bool> doesRedirect(String url) => HttpClient()
.headUrl(Uri.parse(url))
.then((req) => req..followRedirects = false)
.then((req) => req.close())
.then((resp) => resp.statusCode)
.then((statusCode) => [301, 302, 303, 307, 308].contains(statusCode));
void testIt() async {
final test1 = await doesRedirect('https://cnn.it/3xu58Ap');
assert(test1 == true);
final test2 = await doesRedirect('https://dart.dev');
assert(test2 == false);
final test3 = await doesRedirect('https://bit.ly/2VcCSow');
assert(test3 == true);
}
Proportional Constraints in Flutter
class ProportionalWidthNetworkImage extends StatelessWidget {
final String url;
final double widthProportion;
const ProportionalWidthNetworkImage(
{Key? key, required this.url, required this.widthProportion})
: super(key: key);
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
return Image.network(
url,
loadingBuilder: (context, child, loadingProgress) {
final widget =
loadingProgress == null ? child : LinearProgressIndicator();
return Container(
width: constraints.maxWidth * widthProportion,
child: widget,
);
},
);
},
);
}
}
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ProportionalWidthNetworkImage(
url: 'https://cnn.it/3xu58Ap',
widthProportion: 0.8,
),
),
);
}
}
Displaying Cupertino Action Sheets in Flutter
import 'package:flutter/cupertino.dart';
enum Season { spring, summer, autumn, winter }
extension Title on Season {
String get title => describeEnum(this).capitalized;
}
extension Caps on String {
String get capitalized => this[0].toUpperCase() + substring(1);
}
extension ToWidget on Season {
Widget toWidget() {
switch (this) {
case Season.spring:
return Image.network('https://cnn.it/3xu58Ap');
case Season.summer:
return Image.network('https://bit.ly/2VcCSow');
case Season.autumn:
return Image.network('https://bit.ly/3A3zStC');
case Season.winter:
return Image.network('https://bit.ly/2TNY7wi');
}
}
}
class HomePage extends StatefulWidget {
HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
Future<Season> _chooseSeason(
BuildContext context,
Season currentSeason,
) async {
CupertinoActionSheet actionSheet(BuildContext context) {
return CupertinoActionSheet(
title: Text('Choose your favorite season:'),
actions: Season.values
.map(
(season) => CupertinoActionSheetAction(
onPressed: () {
Navigator.of(context).pop(season);
},
child: Text(season.title),
),
)
.toList(),
cancelButton: CupertinoActionSheetAction(
onPressed: () {
Navigator.of(context).pop(currentSeason);
},
child: Text('Cancel'),
),
);
}
return await showCupertinoModalPopup(
context: context,
builder: (context) => actionSheet(context),
);
}
class _HomePageState extends State<HomePage> {
var _season = Season.spring;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(_season.title),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
_season.toWidget(),
TextButton(
onPressed: () async {
_season = await _chooseSeason(
context,
_season,
);
setState(() {});
},
child: Text('Choose a season'),
),
],
),
);
}
}
Rotating List<T> in Dart
extension Rotate<T> on List<T> {
int _rotationTimes(int places) {
if (isEmpty) {
return 0;
}
if (places == 0) {
throw ArgumentError('places should be more than 0');
}
return places % length;
}
List<T> rotatedRight(int places) {
final times = _rotationTimes(places);
if (times == 0) {
return this;
} else {
final cutOff = length - times;
return sublist(cutOff)..addAll(sublist(0, cutOff));
}
}
List<T> rotatedLeft(int places) {
final times = _rotationTimes(places);
if (times == 0) {
return this;
} else {
return sublist(times)..addAll(sublist(0, times));
}
}
}
extension Equality<T extends Comparable> on List<T> {
bool isEqualTo(List<T> other) {
if (other.length != length) {
return false;
}
for (var i = 0; i < length; i++) {
if (other[i] != this[i]) {
return false;
}
}
return true;
}
}
const arr = [1, 2, 3];
void testIt() {
assert(arr.rotatedRight(1).isEqualTo([3, 1, 2]));
assert(arr.rotatedRight(2).isEqualTo([2, 3, 1]));
assert(arr.rotatedRight(3).isEqualTo([1, 2, 3]));
assert(arr.rotatedRight(4).isEqualTo([3, 1, 2]));
assert(arr.rotatedLeft(1).isEqualTo([2, 3, 1]));
assert(arr.rotatedLeft(2).isEqualTo([3, 1, 2]));
assert(arr.rotatedLeft(3).isEqualTo([1, 2, 3]));
assert(arr.rotatedLeft(4).isEqualTo([2, 3, 1]));
}
Displaying SnackBars in Flutter
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Hello world'),
),
body: Center(
child: TextButton(
onPressed: () {
final now = DateFormat('kk:mm:ss').format(DateTime.now());
ScaffoldMessenger.of(context).removeCurrentSnackBar();
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
behavior: SnackBarBehavior.floating,
elevation: 5.0,
backgroundColor:
Colors.blue[600]!.withOpacity(0.8).withAlpha(200),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
side: BorderSide(
color: Colors.black.withOpacity(0.4),
width: 3.0,
),
),
content: Text('Some text $now'),
),
);
},
child: Text('Show toast'),
),
),
);
}
}
Custom Tab Bar Using ToggleButtons in Flutter
class TabBarButton extends StatelessWidget {
final IconData icon;
final double size;
const TabBarButton({Key? key, required this.icon, this.size = 60.0})
: super(key: key);
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Icon(
icon,
size: size,
),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Toggle Buttons'),
),
body: Column(
children: [
CustomTabBar(),
],
),
);
}
}
class CustomTabBar extends StatefulWidget {
const CustomTabBar({Key? key}) : super(key: key);
@override
_CustomTabBarState createState() => _CustomTabBarState();
}
class _CustomTabBarState extends State<CustomTabBar> {
var _selection = [false, false, false];
@override
Widget build(BuildContext context) {
return Expanded(
child: Align(
alignment: FractionalOffset.bottomCenter,
child: SafeArea(
child: ToggleButtons(
isSelected: _selection,
onPressed: (index) {
setState(() {
_selection = List.generate(
_selection.length,
(i) => index == i ? true : false,
);
});
},
selectedColor: Colors.white,
fillColor: Colors.blue,
borderRadius: BorderRadius.circular(10.0),
borderWidth: 4.0,
borderColor: Colors.blue[400],
selectedBorderColor: Colors.blue,
highlightColor: Colors.blue.withOpacity(0.2),
children: [
TabBarButton(icon: Icons.settings),
TabBarButton(icon: Icons.add),
TabBarButton(icon: Icons.settings_remote)
],
),
),
),
);
}
}
Hashable Mixins in Dart
enum PetType { cat, dog }
mixin Pet {
String get name;
int get age;
PetType get type;
@override
String toString() => 'Pet ($type), name = $name, age = $age';
@override
int get hashCode => hashValues(name, age, type);
@override
bool operator ==(covariant Pet o) => o.hashCode == hashCode;
}
class Cat with Pet {
@override
final String name;
@override
final int age;
@override
final PetType type;
const Cat({required this.name, required this.age}) : type = PetType.cat;
}
void testIt() {
final cats = <Cat>{
Cat(name: 'Kitty 1', age: 2),
Cat(name: 'Kitty 2', age: 3),
Cat(name: 'Kitty 1', age: 2),
};
cats.forEach(print);
/* 👆🏻 prints the following:
Pet (PetType.cat), name = Kitty 1, age = 2
Pet (PetType.cat), name = Kitty 2, age = 3
*/
}
Flutter Tips and Tricks in Terminal
import 'dart:convert' show utf8;
import 'dart:io' show HttpClient, exit, Process, stderr;
import 'dart:math' show Random;
const rawBlobRoot =
'https://raw.githubusercontent.com/vandadnp/flutter-tips-and-tricks/main/';
void main(List<String> args) async {
final url = Uri.https('bit.ly', '/2V1GKsC');
try {
final client = HttpClient();
final images = await client
.getUrl(url)
.then((req) => req.close())
.then((resp) => resp.transform(utf8.decoder).join())
.then((body) => body.split('\n').map((e) => e.trim()))
.then((iter) => iter.toList())
.then((list) => list..retainWhere((s) => s.endsWith('.jpg)')))
.then((imageList) => imageList.map((e) => e.replaceAll('))
.then((imageList) => imageList.map((e) => e.replaceAll(')', '')))
.then((iter) => iter.toList());
final found = images[Random().nextInt(images.length)];
final result = '$rawBlobRoot$found';
await Process.run('open', [result]);
exit(0);
} catch (e) {
stderr.writeln('Could not proceed due to $e');
exit(1);
}
}
Searching List<List<T>> in Dart
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];
const arr = [arr1, arr2, arr3];
extension FlattenFind<T extends Comparable> on Iterable<Iterable<T>> {
bool containsElement(T value) {
for (final arr in this) {
if (arr.contains(value)) {
return true;
}
}
return false;
}
}
void testIt() {
assert(arr.containsElement(2));
assert(arr.containsElement(8));
assert(!arr.containsElement(10));
assert(!arr.containsElement(10));
}
Cloning Objects in Dart
class Person {
final Map<String, Object> _values;
static const FIRST_NAME_KEY = 'FIRST_NAME';
static const LAST_NAME_KEY = 'LAST_NAME';
Person.from(Map<String, Object> props) : _values = props;
Person({
required String firstName,
required String lastName,
Map<String, Object>? props,
}) : _values = {
FIRST_NAME_KEY: firstName,
LAST_NAME_KEY: lastName,
};
@override
bool operator ==(covariant Person other) =>
other.firstName == firstName && other.lastName == lastName;
@override
String toString() => _values.toString();
}
extension Properties on Person {
String get firstName => _values[Person.FIRST_NAME_KEY].toString();
set firstName(String newValue) => _values[Person.FIRST_NAME_KEY] = newValue;
String get lastName => _values[Person.LAST_NAME_KEY].toString();
set lastName(String newValue) => _values[Person.LAST_NAME_KEY] = newValue;
}
extension Clone on Person {
Person clone([Map<String, Object>? additionalProps]) =>
Person.from(Map.from(_values)..addAll(additionalProps ?? {}));
}
extension Subscripts on Person {
Object? operator [](String key) => _values[key];
operator []=(String key, Object value) => _values[key] = value;
}
void testIt() {
final foo = Person(
firstName: 'Foo Firstname',
lastName: 'Foo Lastname',
);
print(foo); // {FIRST_NAME: Foo Firstname, LAST_NAME: Foo Lastname}
final copyOfFoo = foo.clone();
print(copyOfFoo); // {FIRST_NAME: Foo Firstname, LAST_NAME: Foo Lastname}
final bar = foo.clone({'age': 30});
print(bar); // {FIRST_NAME: Foo Firstname, LAST_NAME: Foo Lastname, age: 30}
assert(foo == copyOfFoo);
assert(foo == bar);
assert(foo['age'] == null);
assert(copyOfFoo['age'] == null);
assert(bar['age'] == 30);
}
Color Filters in Flutter
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
var sliderValue = 0.0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Color Filters in Flutter!'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ColorFiltered(
colorFilter: ColorFilter.mode(
Colors.orange.withOpacity(sliderValue),
BlendMode.colorBurn,
),
child: Image.network('https://tinyurl.com/4vtvh35h'),
),
Slider(
value: sliderValue,
onChanged: (value) {
setState(() {
sliderValue = value;
});
},
)
],
),
);
}
}
Flattening Lists in Dart
class Person {
final String name;
const Person(this.name);
@override
String toString() => 'Person: $name';
}
class House {
final List<Person>? tennants;
final List<Person> builders;
const House({
required this.tennants,
required this.builders,
});
}
const houses = [
House(tennants: null, builders: [
Person('Builder 1'),
]),
House(tennants: [
Person('Tennant 1'),
Person('Tennant 2'),
], builders: [
Person('Builder 3')
]),
];
extension OptionalFlattend<T> on Iterable<List<T>?> {
Iterable<T> flattened() => expand((e) => e ?? []);
}
void testOptionalFlatten() {
final allTennants = houses.map((h) => h.tennants).flattened();
print(allTennants); // Person: Tennant 1, Person: Tennant 2
}
extension Flattend<T> on Iterable<List<T>> {
Iterable<T> flattened() => expand((e) => e);
}
void testNonOptionalFlatten() {
final allBuilders = houses.map((h) => h.builders).flattened();
print(allBuilders); // Person: Builder 1, Person: Builder 2
}
void testIt() {
testOptionalFlatten();
testNonOptionalFlatten();
}
Managing Duplicates in List<T> in Dart
extension Duplicates<T> on List<T> {
void addAllByAvoidingDuplicates(Iterable<T> values) =>
replaceRange(0, length, {
...([...this] + [...values])
});
int get numberOfDuplicates => length - {...this}.length;
bool get containsDuplicates => numberOfDuplicates > 0;
List<T> get uniques => [
...{...this}
];
void removeDuplicates() => replaceRange(
0,
length,
uniques,
);
List<T> get duplicates => [
for (var i = 0; i < length; i++)
[...this].skip(i + 1).contains(this[i]) ? this[i] : null
].whereType<T>().toList();
}
void testIt() {
final values = [3, 2, 10, 30, 40, 30, 100, 10];
assert(values.numberOfDuplicates == 2);
assert(values.containsDuplicates == true);
assert(values.uniques.length == values.length - 2);
print(values.uniques); // [3, 2, 10, 30, 40, 100]
values.removeDuplicates();
print(values); // [3, 2, 10, 30, 40, 100]
assert(values.numberOfDuplicates == 0);
assert(!values.containsDuplicates);
assert(values.duplicates.isEmpty);
values.addAllByAvoidingDuplicates([3, 2, 10, 200]);
print(values); // [3, 2, 10, 30, 40, 100, 200]
assert(values.containsDuplicates == false);
}
FlatMap and CompactMap in Dart
extension CompactMap<T> on List<T> {
List<E> compactMap<E>(E? Function(T element) f) {
Iterable<E> imp(E? Function(T element) f) sync* {
for (final value in this) {
final mapped = f(value);
if (mapped != null) {
yield mapped;
}
}
}
return imp(f).toList();
}
}
extension FlatMap<T> on T? {
E? flatMap<E>(E? Function(T value) f) {
if (this != null) {
return f(this!);
} else {
return null;
}
}
}
void testIt() {
final foo = [1, 2, null, 3, null, 4];
final bar = foo.compactMap((element) => element.flatMap((e) => e * 2));
print(bar); // prints 2, 4, 6, 8
}
Equality of List<T> in Dart
extension Equality<T extends Comparable> on List<T> {
bool isEqualTo(List<T> other) {
if (other.length != length) {
return false;
}
for (var i = 0; i < length; i++) {
if (other[i] != this[i]) {
return false;
}
}
return true;
}
}
int ascendingComparator<T extends Comparable>(T lhs, T rhs) =>
lhs.compareTo(rhs);
int descendingComparator<T extends Comparable>(T lhs, T rhs) =>
rhs.compareTo(lhs);
extension Sorted<T extends Comparable> on List<T> {
List<T> sorted({bool descending = false}) => descending
? ([...this]..sort(descendingComparator))
: ([...this]..sort(ascendingComparator));
}
void testIt() {
assert([1, 2, 3].isEqualTo([1, 2, 3]));
assert(![1, 2, 3].isEqualTo([1, 2, 2]));
assert([3, 1, 2].sorted().isEqualTo([1, 2, 3]));
assert(![3, 1, 2].sorted().isEqualTo([3, 1, 2]));
assert(['Foo', 'Bar', 'Baz'].isEqualTo(['Foo', 'Bar', 'Baz']));
assert(!['Foo', 'Bar', 'Baz'].isEqualTo(['foo', 'Bar', 'Baz']));
}
Constants in Dart
class Person {
final String name;
final int age;
const Person({required this.name, required this.age});
}
const foo = Person(name: 'Foo', age: 20);
const foo2 = Person(name: 'Foo', age: 20);
const bar = Person(name: 'Bar', age: 20);
void assert_eq(Object lhs, Object rhs) {
assert(lhs == rhs);
}
void assert_ne(Object lhs, Object rhs) {
assert(lhs != rhs);
}
void testIt() {
assert_eq(foo, foo2);
assert_ne(foo, bar);
assert_ne(foo2, bar);
}
Displaying Scrollable Bottom Sheets in Flutter
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Scrollable Sheet')),
body: DraggableScrollableSheet(
initialChildSize: 0.2,
minChildSize: 0.2,
maxChildSize: 0.8,
builder: (context, scrollController) {
return Container(
decoration: decoration(),
clipBehavior: Clip.antiAlias,
child: SingleChildScrollView(
controller: scrollController,
child: column(),
),
);
},
),
);
}
}
const urls = [
'https://tinyurl.com/4vtvh35h',
'https://tinyurl.com/pujhs55w',
'https://tinyurl.com/u5k7zueh',
];
List<Widget> imageWithLoremIpsum(String uri) => [
Image.network(uri),
SizedBox(height: 10),
loremIpsum(),
SizedBox(height: 10),
];
Column column() => Column(
children: imageWithLoremIpsum(urls[0]) +
imageWithLoremIpsum(urls[1]) +
imageWithLoremIpsum(urls[2]),
);
Text loremIpsum() => Text(
'Lorem ipsum ' * 10,
textAlign: TextAlign.center,
);
BoxDecoration decoration() => BoxDecoration(
border: Border.all(color: Colors.white),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(10),
),
color: Colors.white70,
);
YouTube Ad Remover in Dart
import 'dart:io' show stdout, stderr, exitCode;
import 'package:collection/collection.dart' show IterableExtension;
// example argument: https://www.youtube.com/watch?v=mtETXtSP0pA
void main(List<String> args) async {
if (args.isEmpty) {
stdout.writeln('usage: dart youtube.dart "https://..."');
return;
}
final link =
args.firstWhereOrNull((element) => Uri.tryParse(element) != null);
if (link == null) {
stderr.writeln('No YouTube url found');
exitCode = 1;
return;
}
try {
final uri = Uri.parse(link);
if (uri.scheme.toLowerCase() != 'https' ||
uri.host.toLowerCase() != 'www.youtube.com' ||
uri.queryParameters['v'] == null) {
throw FormatException();
} else {
final videoId = uri.queryParameters['v'];
final embedUri = Uri.parse('${uri.scheme}://${uri.host}/embed/$videoId');
stdout.writeln(embedUri);
exitCode = 0;
}
} on FormatException catch (e) {
stderr.writeln('Invalid Uri, try again! err = $e');
exitCode = 1;
return;
}
}
Fade Between Widgets in Flutter
const urls = [
'https://bit.ly/3qYOtDm',
'https://bit.ly/3wt11Ec',
];
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
var isShowingFirstImage = true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('AnimatedCrossFade in Flutter'),
),
body: Center(
child: AnimatedCrossFade(
layoutBuilder: (topChild, topChildKey, bottomChild, bottomChildKey) {
return GestureDetector(
onTap: () {
setState(() {
isShowingFirstImage = !isShowingFirstImage;
});
},
child: AnimatedCrossFade.defaultLayoutBuilder(
topChild, topChildKey, bottomChild, bottomChildKey),
);
},
firstChild: Image.network(urls[0]),
secondChild: Image.network(urls[1]),
crossFadeState: isShowingFirstImage
? CrossFadeState.showFirst
: CrossFadeState.showSecond,
duration: Duration(milliseconds: 400),
),
),
);
}
}
Sort Descriptors in Dart
int ascendingComparator<T extends Comparable>(T lhs, T rhs) =>
lhs.compareTo(rhs);
int descendingComparator<T extends Comparable>(T lhs, T rhs) =>
rhs.compareTo(lhs);
extension Sorted<T extends Comparable> on List<T> {
List<T> sorted({bool descending = false}) => descending
? (this..sort(descendingComparator))
: (this..sort(ascendingComparator));
}
class Person implements Comparable {
final int age;
final String name;
const Person({required this.age, required this.name});
@override
int compareTo(covariant Person other) => age.compareTo(other.age);
@override
String toString() => 'Person, name = $name ($age)';
}
void testIt() {
final people = [
Person(age: 39, name: 'Father Foo'),
Person(age: 40, name: 'Mother Bar'),
Person(age: 13, name: 'Son Baz'),
];
print('ascending sort');
people.sorted().forEach(print);
// prints Son Baz (13), Father Foo (39), Mother Bar (40)
print('descending sort');
people.sorted(descending: true).forEach(print);
// prints Mother Bar (40), Father Foo (39), Son Baz (13)
}
User Sortable Columns and Tables in Flutter
class Language {
final String name;
final Image image;
const Language(this.name, this.image);
Language.dart()
: name = 'Dart',
image = Image.network('https://bit.ly/3yH1Ivj');
Language.rust()
: name = 'Rust',
image = Image.network('https://bit.ly/3lPTqhb');
Language.python()
: name = 'Python',
image = Image.network('https://bit.ly/3iCFCEP');
Language.java()
: name = 'Java',
image = Image.network('https://bit.ly/3CCapJH');
static List<Language> all = [
Language.dart(),
Language.rust(),
Language.python(),
Language.java(),
];
}
extension Sort on List<Language> {
void sortByName(bool ascending) => sort((lhs, rhs) =>
ascending ? lhs.name.compareTo(rhs.name) : rhs.name.compareTo(lhs.name));
}
List<DataRow> rows(List<Language> langs) => langs
.map(
(l) => DataRow(
cells: [
DataCell(
Padding(
padding: const EdgeInsets.all(8.0),
child: l.image,
),
),
DataCell(Text(l.name)),
],
),
)
.toList();
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
final List<Language> _langs = Language.all..sortByName(true);
int sortedColumnIndex = 1;
var isSortedAscending = true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('WhatsApp')),
body: DataTable(
sortAscending: isSortedAscending,
sortColumnIndex: sortedColumnIndex,
columns: [
DataColumn(label: Text('Image')),
DataColumn(
label: Text('Name'),
onSort: (columnIndex, ascending) {
setState(() {
sortedColumnIndex = columnIndex;
isSortedAscending = ascending;
_langs.sortByName(ascending);
});
},
),
],
rows: rows(_langs),
),
);
}
}
Content-Length of List<Uri> in Dart
Recursive Dot Notation on Maps in Dart
final person = {
'firstName': 'Foo',
'lastName': 'Bar',
'age': 30,
'address': {
'street': {
'name': 'Baz street',
'numberOfHouses': 20,
},
'houseNumber': '#20',
'city': 'Stockholm',
'country': 'Sweden'
},
};
extension KeyPath on Map {
Object? valueFor({required String keyPath}) {
final keysSplit = keyPath.split('.');
final thisKey = keysSplit.removeAt(0);
final thisValue = this[thisKey];
if (keysSplit.isEmpty) {
return thisValue;
} else if (thisValue is Map) {
return thisValue.valueFor(keyPath: keysSplit.join('.'));
}
}
}
void testIt() {
assert(person.valueFor(keyPath: 'firstName') == 'Foo');
assert(person.valueFor(keyPath: 'age') == 30);
assert(person.valueFor(keyPath: 'address.street.name') == 'Baz street');
assert(person.valueFor(keyPath: 'address.houseNumber') == '#20');
}
Allow User Selection of Text in Flutter
const text = 'Flutter is an open-source UI software development'
' kit created by Google. It is used to develop cross platform applications'
' for Android, iOS, Linux, Mac, Windows, Google Fuchsia, '
'and the web from a single codebase.';
const imageUrl = 'https://bit.ly/3gT5Qk2';
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Selectable Text in Flutter'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.network(imageUrl),
SizedBox(height: 10.0),
Padding(
padding: const EdgeInsets.all(8.0),
child: SelectableText(
text,
textAlign: TextAlign.center,
showCursor: true,
cursorColor: Colors.blue,
toolbarOptions: ToolbarOptions(
copy: true,
selectAll: true,
),
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w300,
),
),
),
],
),
);
}
}
Placing Constraints on Widgets in Flutter
const dashes = [
'https://bit.ly/3gHlTCU',
'https://bit.ly/3wOLO1c',
'https://bit.ly/3cXWD9j',
'https://bit.ly/3gT5Qk2',
];
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('ConstrainedBox in Flutter'),
),
body: InteractiveViewer(
minScale: 1.0,
maxScale: 2.0,
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Table(
defaultVerticalAlignment: TableCellVerticalAlignment.middle,
children: dashes
.map(
(dash) => TableRow(
children: [
ConstrainedBox(
constraints: BoxConstraints(
minHeight: 300,
),
child: Image.network(dash),
),
],
),
)
.toList(),
),
),
),
);
}
}
Animating Position Changes in Flutter
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
var isMovedUp = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('AnimatedPositioned in Flutter')),
body: Center(
child: GestureDetector(
onTap: () => setState(() => isMovedUp = !isMovedUp),
child: Stack(
clipBehavior: Clip.none,
alignment: Alignment.center,
children: [
Image.network('https://bit.ly/2VcCSow'),
Text(
'Summer 😎',
style: TextStyle(
fontSize: 30,
color: Colors.black,
),
),
AnimatedPositioned(
duration: Duration(seconds: 1),
bottom: isMovedUp ? 140 : 10.0,
curve: Curves.elasticInOut,
child: CircleAvatar(
radius: 100,
backgroundImage: NetworkImage('https://bit.ly/3cXWD9j'),
backgroundColor: Colors.orange[300],
),
),
],
),
),
),
);
}
}
Transitioning Between Widgets in Flutter
enum Season { spring, summer, autumn, winter }
extension Caps on String {
String get capitalized => this[0].toUpperCase() + substring(1);
}
extension Title on Season {
String get title => describeEnum(this).capitalized;
}
class TitledImage {
final String title;
final Uri uri;
final ValueKey key;
const TitledImage(this.title, this.uri, this.key);
TitledImage.spring()
: title = Season.spring.title,
uri = Uri.https('cnn.it', '/3xu58Ap'),
key = ValueKey(1);
TitledImage.summer()
: title = Season.summer.title,
uri = Uri.https('bit.ly', '/2VcCSow'),
key = ValueKey(2);
TitledImage.autumn()
: title = Season.autumn.title,
uri = Uri.https('bit.ly', '/3A3zStC'),
key = ValueKey(3);
TitledImage.winter()
: title = Season.winter.title,
uri = Uri.https('bit.ly', '/2TNY7wi'),
key = ValueKey(4);
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
var _img = TitledImage.summer();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(_img.title)),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
AnimatedSwitcher(
switchInCurve: Curves.easeIn,
switchOutCurve: Curves.easeOut,
duration: Duration(milliseconds: 300),
transitionBuilder: (child, animation) {
return FadeTransition(opacity: animation, child: child);
},
child: Image.network(
_img.uri.toString(),
key: _img.key,
),
),
getButtons(),
],
),
);
}
Widget getButtons() {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextButton(
onPressed: () => setState(() => _img = TitledImage.spring()),
child: Text(Season.spring.title),
),
TextButton(
onPressed: () => setState(() => _img = TitledImage.summer()),
child: Text(Season.summer.title),
),
TextButton(
onPressed: () => setState(() => _img = TitledImage.autumn()),
child: Text(Season.autumn.title),
),
TextButton(
onPressed: () => setState(() => _img = TitledImage.winter()),
child: Text(Season.winter.title),
),
],
);
}
}
Doubly Linked Lists in Dart
class Person extends LinkedListEntry<Person> {
final String name;
final int age;
Person({
required this.name,
required this.age,
});
@override
String toString() => 'Person name = $name, age = $age';
}
void testIt() {
final persons = LinkedList<Person>();
final dad = Person(name: 'Father Foo', age: 47);
final mom = Person(name: 'Mother Bar', age: 47);
final daughter = Person(name: 'Daughter Baz', age: 22);
persons.addAll([dad, mom, daughter]);
print(persons.first.previous); // null
print(persons.first); // Person name = Father Foo, age = 47
print(persons.first.next); // Person name = Mother Bar, age = 47
print(persons.last.previous); // Person name = Mother Bar, age = 47
print(persons.first.next?.next); // Person name = Daughter Baz, age = 22
print(persons.last.next); // null
}
Reordering Items Inside List Views in Flutter
class Item {
final Color color;
final String text;
final UniqueKey uniqueKey;
Item(this.color, this.text) : uniqueKey = UniqueKey();
}
extension ToListItem on Item {
Widget toListItem() => LimitedBox(
key: uniqueKey,
maxHeight: 200,
child: Container(
color: color,
child: Padding(
padding: const EdgeInsets.all(20),
child: Text(
text,
style: TextStyle(
color: Colors.white,
fontSize: 100,
),
),
),
),
);
}
class _HomePageState extends State<HomePage> {
var items = [
Item(Colors.deepPurple, 'Foo'),
Item(Colors.blueGrey, 'Bar'),
Item(Colors.lightGreen, 'Baz')
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Reordered List View in Flutter'),
),
body: ReorderableListView(
onReorder: (oldIndex, newIndex) {
setState(() {
final item = items.removeAt(oldIndex);
items.insert(newIndex, item);
});
},
children: items.map((i) => i.toListItem()).toList(),
),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
Custom Stream Transformers in Dart
in this example we have created our own string transformer that
can trim a Stream<String> by trimming whitespace from both
beginning and end of the string
*/
import 'dart:convert' show utf8;
class StringTrimmer extends StreamTransformerBase<String, String> {
const StringTrimmer();
@override
Stream<String> bind(Stream<String> stream) =>
Stream.fromFuture(stream.join(' ')).map((str) => str.trim());
}
final string =
''' A long line of text with spaces in the beginning and the end,
divided into three lines just for the purpose of this demonstration ''';
void testIt() async {
final bytes = utf8.encode(string);
final result = await Stream.value(bytes)
.transform(utf8.decoder)
.transform(LineSplitter())
.transform(StringTrimmer())
.join();
print(result);
}
Expanding Stream Elements in Dart
/*
in this example we expand every element inside our Stream<int> to
a stream that in turn contains n+1 elements where n is the index generated
by our main stream, that's to say, 0, 1, 2, 3, 4, etc
*/
Stream<int> nestedEvents(int count) {
return Stream.periodic(
Duration(seconds: 1),
(e) => e,
).take(count).asyncExpand(
(i) => Stream.fromIterable(
Iterable.generate(i + 1),
),
);
}
void testIt() async {
/*
prints the followings in this order
0, 1
0, 1, 2
0, 1, 2, 3
0, 1, 2, 3, 4
*/
await for (final value in nestedEvents(5)) {
print('Value is $value');
}
}
Consume Streams for a Duration in Dart
extension TakeFor<T> on Stream<T> {
Stream<T> takeFor(Duration duration) {
final upTo = DateTime.now().add(duration);
return takeWhile((_) {
final now = DateTime.now();
return now.isBefore(upTo) | now.isAtSameMomentAs(upTo);
});
}
}
Stream<DateTime> source() => Stream.periodic(
Duration(milliseconds: 500),
(_) => DateTime.now(),
);
void testIt() async {
await for (final dateTime in source().takeFor(
Duration(seconds: 4),
)) {
print('date time is $dateTime');
}
}
Shortening URLs in Dart
import 'dart:convert' show json;
Future<Uri> shortenUri(Uri uri, String bitlyToken) async {
final client = HttpClient();
final endpoint = Uri.https('api-ssl.bitly.com', '/v4/shorten');
final response = await client.postUrl(endpoint).then(
(req) {
req.headers
..set(HttpHeaders.contentTypeHeader, 'application/json')
..set(HttpHeaders.authorizationHeader, 'Bearer $bitlyToken');
final body = {
'long_url': uri.toString(),
'domain': 'bit.ly',
};
final bodyBytes = utf8.encode(json.encode(body));
req.add(bodyBytes);
return req.close();
},
);
final responseBody = await response.transform(utf8.decoder).join();
final responseJson = json.decode(responseBody) as Map<String, dynamic>;
return Uri.parse(responseJson['link']);
}
void testIt() async {
print(await shortenUri(
Uri.parse('https://pixolity.se'),
'XXX',
));
}
LimitedBox Widget as ListView Items in Flutter
const images = [
'https://bit.ly/3x7J5Qt',
'https://bit.ly/3ywI8l6',
'https://bit.ly/3jRSRCu',
'https://bit.ly/36fNNj9',
'https://bit.ly/3jOueGG',
'https://bit.ly/3qYOtDm',
'https://bit.ly/3wt11Ec',
'https://bit.ly/3yvFg7X',
'https://bit.ly/3ywzOla',
'https://bit.ly/3wnASpW',
'https://bit.ly/3jXSDto',
];
extension ToListItemImage on String {
Widget toListItemImage() {
return LimitedBox(
maxHeight: 150.0,
child: Image.network(
this,
fit: BoxFit.fitWidth,
),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Limited Box in Flutter')),
body: ListView(
children: images.map((str) => str.toListItemImage()).toList(),
),
);
}
}
Generically Convert Anything to Int in Dart
extension ToInt on Object {
int toInt() {
final list = [
if (this is Iterable<Object>)
...(List.of(this as Iterable<Object>))
else if (this is int)
[this as int]
else
(double.tryParse(toString()) ?? 0.0).round()
];
return list
.map((e) => (double.tryParse(e.toString()) ?? 0.0).round())
.reduce((lhs, rhs) => lhs + rhs);
}
}
void testIt() {
assert(1.toInt() == 1);
assert((2.2).toInt() == 2);
assert((2.0).toInt() == 2);
assert('3'.toInt() == 3);
assert(['4', '5'].toInt() == 9);
assert([4, 5].toInt() == 9);
assert(['2.4', '3.5'].toInt() == 6);
assert(['2', '3.5'].toInt() == 6);
assert({'2', 3, '4.2'}.toInt() == 9);
assert(['2', 3, '4.2', 5.3].toInt() == 14);
}
Validating URL Certificates in Dart
import 'dart:io' show HttpClient;
Future<bool> isSecuredWithValidCert(String uriString) async {
final uri = Uri.parse(uriString);
final client = HttpClient();
try {
await client.headUrl(uri).then((r) => r.close());
return true;
} on HandshakeException {
return false;
}
}
void testIt() async {
await isSecuredWithValidCert('https://expired.badssl.com');
await isSecuredWithValidCert('https://wrong.host.badssl.com');
await isSecuredWithValidCert('https://self-signed.badssl.com');
await isSecuredWithValidCert('https://untrusted-root.badssl.com');
await isSecuredWithValidCert('https://revoked.badssl.com');
}
Displaying Popup Menus in Flutter
enum ImageAction { copy }
PopupMenuItem<ImageAction> copyButton({VoidCallback? onPressed}) =>
PopupMenuItem<ImageAction>(
value: ImageAction.copy,
child: TextButton.icon(
icon: Icon(Icons.copy),
label: Text('Copy'),
onPressed: onPressed,
),
);
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter'),
),
body: Center(
child: PopupMenuButton<ImageAction>(
elevation: 10,
offset: Offset(0, 50),
itemBuilder: (_) => [
copyButton(
onPressed: () {
print('Copy the image...');
},
),
],
child: Image.network('https://bit.ly/3ywI8l6'),
),
),
);
}
}
Implementing Drag and Drop in Flutter
class HomePage extends StatefulWidget {
HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
String? _imageUrl;
bool shouldAccept(String? value) => Uri.tryParse(value ?? '') != null;
Widget dragTargetBuilder(
BuildContext context,
List<String?> incoming,
dynamic rejected,
) {
final emptyContainer = Container(
color: Colors.grey[200],
height: 200,
child: Center(
child: Text('Drag an image here'),
),
);
if (incoming.isNotEmpty) {
_imageUrl = incoming.first;
}
if (_imageUrl == null) {
return emptyContainer;
}
try {
final uri = Uri.parse(_imageUrl ?? '');
return Container(
color: Colors.grey[200],
height: 200,
child: Center(
child: Image.network(uri.toString()),
),
);
} on FormatException {
return emptyContainer;
}
}
static final firstImageUrl = 'https://bit.ly/3xnoJTm';
static final secondImageUrl = 'https://bit.ly/3hIuC78';
final firstImage = Image.network(firstImageUrl);
final secondImage = Image.network(secondImageUrl);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Tooltips in Flutter')),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
DragTarget<String>(
onWillAccept: shouldAccept,
builder: dragTargetBuilder,
),
SizedBox(height: 10.0),
DraggableImage(
imageWidget: firstImage,
imageUrl: firstImageUrl,
),
SizedBox(height: 10.0),
DraggableImage(
imageWidget: secondImage,
imageUrl: secondImageUrl,
),
],
),
),
);
}
}
class DraggableImage extends StatelessWidget {
const DraggableImage({
Key? key,
required this.imageWidget,
required this.imageUrl,
}) : super(key: key);
final Image imageWidget;
final String imageUrl;
@override
Widget build(BuildContext context) {
return Draggable<String>(
data: imageUrl,
feedback: Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
blurRadius: 30,
color: Colors.black,
spreadRadius: 10,
),
],
),
child: imageWidget,
),
child: imageWidget,
);
}
}
Dismissing List Items in Flutter
const gridImages = [
'https://bit.ly/3x7J5Qt',
'https://bit.ly/3dLJNeD',
'https://bit.ly/3ywI8l6',
'https://bit.ly/3jRSRCu',
'https://bit.ly/36fNNj9',
'https://bit.ly/3jOueGG',
'https://bit.ly/3qYOtDm',
'https://bit.ly/3wt11Ec',
'https://bit.ly/3yvFg7X',
'https://bit.ly/3ywzOla',
'https://bit.ly/3wnASpW',
'https://bit.ly/3jXSDto',
];
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: [
CustomAppBar(),
CustomGridView(),
CustomListView(
imageUrls: gridImages,
),
],
),
);
}
}
class _CustomListViewState extends State<CustomListView> {
@override
Widget build(BuildContext context) {
return SliverPadding(
padding: EdgeInsets.all(8.0),
sliver: SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) {
final url = widget.imageUrls[index];
return Dismissible(
key: ValueKey(url),
onDismissed: (_) {
widget.imageUrls.remove(url);
},
background: Container(
color: Colors.red,
child: FittedBox(
alignment: Alignment.centerRight,
fit: BoxFit.fitHeight,
child: Icon(Icons.delete, color: Colors.white),
),
),
child: Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Image.network(url),
),
);
},
childCount: widget.imageUrls.length,
),
),
);
}
}
class CustomListView extends StatefulWidget {
final List<String> imageUrls;
const CustomListView({
Key? key,
required this.imageUrls,
}) : super(key: key);
@override
_CustomListViewState createState() => _CustomListViewState();
}
class CustomGridView extends StatelessWidget {
const CustomGridView({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return SliverPadding(
padding: EdgeInsets.all(8.0),
sliver: SliverGrid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
childAspectRatio: 1.0,
),
delegate: SliverChildBuilderDelegate(
(context, index) {
return Container(
width: 100,
height: 100,
child: Image.network(gridImages[index]),
);
},
childCount: gridImages.length,
),
),
);
}
}
class CustomAppBar extends StatelessWidget {
const CustomAppBar({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return SliverAppBar(
backgroundColor: Colors.orange[300],
forceElevated: true,
pinned: false,
snap: false,
floating: true,
expandedHeight: 172,
flexibleSpace: FlexibleSpaceBar(
title: Text(
'Flutter',
style: TextStyle(
fontSize: 30,
color: Colors.white,
decoration: TextDecoration.underline,
),
),
collapseMode: CollapseMode.parallax,
background: Image.network('https://bit.ly/3x7J5Qt'),
),
);
}
}
Animating Widgets with Ease in Flutter
class Ball extends StatefulWidget {
const Ball({Key? key}) : super(key: key);
@override
_BallState createState() => _BallState();
}
class _BallState extends State<Ball> with SingleTickerProviderStateMixin {
late final AnimationController _controller;
late final Animation _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: Duration(seconds: 4),
reverseDuration: Duration(seconds: 4),
);
_animation = Tween(begin: 0.0, end: 2 * pi).animate(_controller);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
_controller.repeat();
return AnimatedBuilder(
animation: _animation,
builder: (context, image) {
return Transform.rotate(
angle: _animation.value,
child: image,
);
},
child: Image.network('https://bit.ly/3xspdrp'),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Animated Builder in Flutter'),
),
body: Center(
child: Ball(),
),
);
}
}
Displaying Tool Tips in Flutter
const imagesAndInfo = [
['https://bit.ly/3xnoJTm', 'Stockholm, Sweden'],
['https://bit.ly/3hIuC78', 'Dalarna, Sweden'],
['https://bit.ly/3wi9mdG', 'Brighton, UK'],
['https://bit.ly/3dSSMuy', 'Hove, UK'],
['https://bit.ly/3xoWCmV', 'Kerala, India'],
['https://bit.ly/3hGmjZC', 'Salvador da Bahia, Brazil']
];
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Tooltips in Flutter')),
body: ListView.builder(
itemCount: imagesAndInfo.length,
itemBuilder: (_, index) {
return Padding(
padding: const EdgeInsets.only(top: 8.0, left: 8.0, right: 8.0),
child: Tooltip(
decoration: BoxDecoration(
color: Colors.black,
boxShadow: [
BoxShadow(
color: Colors.white.withAlpha(180),
offset: Offset.zero,
spreadRadius: 30.0,
blurRadius: 30.0,
),
],
borderRadius: BorderRadius.all(Radius.circular(8.0)),
),
textStyle: TextStyle(fontSize: 20, color: Colors.white),
message: imagesAndInfo[index][1],
child: Image.network(
imagesAndInfo[index][0],
),
),
);
},
),
);
}
}
Displaying Assorted Widgets Inside TableView in Flutter
const natureUrls = [
'https://bit.ly/3dAtFwy',
'https://bit.ly/36cHehe',
'https://bit.ly/365uqt1',
'https://bit.ly/3x7J5Qt',
'https://bit.ly/3jBvJYU',
'https://bit.ly/3yhbHHi'
];
extension ToImage on String {
Widget toPaddedNetworkImage() => Padding(
padding: const EdgeInsets.all(8.0),
child: Image.network(this),
);
}
extension ToImages on List<String> {
List<Widget> toPaddedNetworkImages() =>
map((str) => str.toPaddedNetworkImage()).toList();
}
extension ToTableRow on List<Widget> {
TableRow toTableRow() => TableRow(children: this);
}
class ListPaginator<T> extends Iterable {
final List<List<T>> list;
ListPaginator({required List<T> input, required int itemsPerPage})
: list = [
for (var i = 0; i < input.length; i += itemsPerPage)
input.getRange(i, min(input.length, i + itemsPerPage)).toList(),
];
@override
Iterator get iterator => list.iterator;
}
class HomePage extends StatelessWidget {
final provider = ListPaginator<String>(
input: natureUrls,
itemsPerPage: 3,
);
HomePage({Key? key}) : super(key: key);
Iterable<TableRow> getRows() sync* {
for (final List<String> urlBatch in provider) {
final networkImages = urlBatch.toPaddedNetworkImages();
yield TableRow(children: networkImages);
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('TableView in Flutter'),
),
body: SingleChildScrollView(
child: Table(
defaultVerticalAlignment: TableCellVerticalAlignment.bottom,
children: getRows().toList(),
),
),
);
}
}
Page Indicator with Page View in Flutter
const dashes = [
'https://bit.ly/3gHlTCU',
'https://bit.ly/3wOLO1c',
'https://bit.ly/3cXWD9j',
'https://bit.ly/3gT5Qk2',
];
class PageText extends StatelessWidget {
final int current;
final int total;
const PageText({
Key? key,
required this.current,
required this.total,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Text(
'Page ${current + 1} of $total',
style: TextStyle(fontSize: 30.0, shadows: [
Shadow(
offset: Offset(0.0, 1.0),
blurRadius: 20.0,
color: Colors.black.withAlpha(140),
)
]),
);
}
}
class _HomePageState extends State<HomePage> {
var _index = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Page Indicator')),
body: SafeArea(
child: Column(
children: [
Expanded(
child: PageView.builder(
onPageChanged: (pageIndex) {
setState(() => _index = pageIndex);
},
scrollDirection: Axis.horizontal,
itemCount: dashes.length,
itemBuilder: (context, index) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.network(dashes[index]),
Text('Dash #${index + 1}'),
],
);
},
),
),
PageText(current: _index, total: dashes.length)
],
),
),
);
}
}
Animating and Moving a Floating Action Button in Flutter
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
const List<FloatingActionButtonLocation> locations = [
FloatingActionButtonLocation.centerDocked,
FloatingActionButtonLocation.startDocked,
FloatingActionButtonLocation.startFloat,
FloatingActionButtonLocation.centerFloat,
FloatingActionButtonLocation.endFloat,
FloatingActionButtonLocation.endDocked
];
extension GoAround<T> on List<T> {
T elementByGoingAround(int index) {
final finalIndex = index >= length ? index.remainder(length) : index;
return this[finalIndex];
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
var _locationIndex = 0;
FloatingActionButtonLocation get location =>
locations.elementByGoingAround(_locationIndex);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Floating Action Button'),
),
floatingActionButtonLocation: location,
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() => _locationIndex += 1);
},
child: Icon(Icons.add),
),
bottomNavigationBar: BottomNavigationBar(
backgroundColor: Colors.yellow[600],
selectedItemColor: Colors.black,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.bedtime),
label: 'Item 1',
),
BottomNavigationBarItem(
icon: Icon(Icons.access_alarms),
label: 'Item 2',
)
],
currentIndex: 0,
),
);
}
}
Fading Network Image Widget in Flutter
class FadingNetworkImage extends StatefulWidget {
final String url;
const FadingNetworkImage({Key? key, required this.url}) : super(key: key);
@override
_FadingNetworkImageState createState() => _FadingNetworkImageState();
}
class _FadingNetworkImageState extends State<FadingNetworkImage>
with SingleTickerProviderStateMixin {
late final AnimationController _controller;
late final Animation<double> _animation;
@override
void initState() {
super.initState();
_controller =
AnimationController(vsync: this, duration: Duration(seconds: 1));
_animation = Tween(begin: 0.0, end: 1.0).animate(_controller);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Image.network(
widget.url,
frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
_controller.reset();
_controller.forward();
return FadeTransition(opacity: _animation, child: child);
},
loadingBuilder: (context, child, loadingProgress) {
final totalBytes = loadingProgress?.expectedTotalBytes;
final bytesLoaded = loadingProgress?.cumulativeBytesLoaded;
if (totalBytes != null && bytesLoaded != null) {
return LinearProgressIndicator(
value: bytesLoaded / totalBytes,
);
} else {
return child;
}
},
errorBuilder: (context, error, stackTrace) {
return Text('Error!');
},
);
}
}
const dashes = [
'https://bit.ly/3gHlTCU',
'https://bit.ly/3wOLO1c',
'https://bit.ly/3cXWD9j',
'https://bit.ly/3gT5Qk2',
];
extension GoAround<T> on List<T> {
T elementByGoingAround(int index) {
final finalIndex = index >= length ? index.remainder(length) : index;
return this[finalIndex];
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int _index = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Faded Image'),
),
body: Center(
child: Column(
children: [
FadingNetworkImage(
url: dashes.elementByGoingAround(_index),
),
TextButton(
onPressed: () {
setState(() => _index += 1);
},
child: Text('Load next Dash'),
),
],
)),
);
}
}
Transparent Alert Dialogs in Flutter
TextStyle get whiteTextStyle => TextStyle(color: Colors.white);
Future<void> showTextDialog({
required BuildContext context,
required String text,
}) {
return showDialog(
context: context,
builder: (context) {
return AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(10),
),
side: BorderSide(
color: Colors.white,
style: BorderStyle.solid,
width: 2,
),
),
backgroundColor: Colors.black.withAlpha(150),
titleTextStyle: whiteTextStyle,
contentTextStyle: whiteTextStyle,
content: Text(text),
actions: [
TextButton(
style: TextButton.styleFrom(primary: Colors.white),
onPressed: () {
Navigator.of(context).pop();
},
child: Text('OK'),
)
],
);
},
);
}
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
'Rounded Corder Dialog',
),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.network('https://bit.ly/3ywI8l6'),
TextButton(
onPressed: () async {
await showTextDialog(
context: context,
text: 'Hello world',
);
},
child: Text('Show dialog'),
),
],
),
);
}
}
Network Image Size in Dart
import 'dart:ui' as ui;
Future<Size> getImageSize(String uri) {
final image = Image.network('https://bit.ly/3dAtFwy');
final comp = Completer<ui.Image>();
image.image
.resolve(
ImageConfiguration.empty,
)
.addListener(
ImageStreamListener(
(ImageInfo info, _) => comp.complete(info.image),
),
);
return comp.future.then(
(image) => Size(
image.width.toDouble(),
image.height.toDouble(),
),
);
}
void testIt() async {
final imageSize = await getImageSize('https://bit.ly/3dAtFwy');
print(imageSize);
assert(imageSize.width == 2048.0);
assert(imageSize.height == 1365.0);
print(imageSize.aspectRatio);
}
Animated Icons in Flutter
class _HomePageState extends State<HomePage>
with SingleTickerProviderStateMixin {
late final Animation<double> _animation;
late final AnimationController _controller;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: Duration(seconds: 1),
);
_animation = Tween(
begin: 0.0,
end: 1.0,
).animate(_controller);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
_controller.repeat(reverse: true);
return Scaffold(
appBar: AppBar(
title: Text('Animated Icons in Fluter'),
),
body: Center(
child: AnimatedIcon(
color: Colors.green[300],
size: MediaQuery.of(context).size.width,
icon: AnimatedIcons.search_ellipsis,
progress: _animation,
),
),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
Custom Scroll Views in Flutter
const gridImages = [
'https://bit.ly/3x7J5Qt',
'https://bit.ly/3dLJNeD',
'https://bit.ly/3ywI8l6',
'https://bit.ly/3jRSRCu',
'https://bit.ly/36fNNj9',
'https://bit.ly/3jOueGG',
'https://bit.ly/3qYOtDm',
'https://bit.ly/3wt11Ec',
'https://bit.ly/3yvFg7X',
'https://bit.ly/3ywzOla',
'https://bit.ly/3wnASpW',
'https://bit.ly/3jXSDto',
];
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: [
CustomAppBar(),
CustomGridView(),
CustomListView(),
],
),
);
}
}
class CustomListView extends StatelessWidget {
const CustomListView({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return SliverPadding(
padding: EdgeInsets.all(8.0),
sliver: SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) {
return Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Image.network(gridImages[index]),
);
},
childCount: gridImages.length,
),
),
);
}
}
class CustomGridView extends StatelessWidget {
const CustomGridView({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return SliverPadding(
padding: EdgeInsets.all(8.0),
sliver: SliverGrid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
childAspectRatio: 1.0,
),
delegate: SliverChildBuilderDelegate(
(context, index) {
return Container(
width: 100,
height: 100,
child: Image.network(gridImages[index]),
);
},
childCount: gridImages.length,
),
),
);
}
}
class CustomAppBar extends StatelessWidget {
const CustomAppBar({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return SliverAppBar(
backgroundColor: Colors.orange[300],
forceElevated: true,
pinned: false,
snap: false,
floating: true,
expandedHeight: 172,
flexibleSpace: FlexibleSpaceBar(
title: Text(
'Flutter',
style: TextStyle(
fontSize: 30,
color: Colors.white,
decoration: TextDecoration.underline,
),
),
collapseMode: CollapseMode.parallax,
background: Image.network('https://bit.ly/3x7J5Qt'),
),
);
}
}
Parallax App Bar in Flutter
JSON HTTP Requests in Dart
URL Timeouts in Dart
Detecting URL File Types in Dart
Paginated Lists in Dart
Requesting DELETE on APIs in Dart
Animated Containers in Flutter
Hiding Widgets in Flutter
Simple Opacity Animation in Flutter
Vignette Widget in Flutter
Drop Down Button Configuration and Usage in Flutter
Expandable List Items in Flutter
Infinite Scrolling in Flutter
Infinite Arrays in Dart
Custom Color Picker Component in Flutter
Displaying and Reacting to Switches in Flutter
Displaying Bottom Bars in Flutter
Displaying Buttons on AppBar in Flutter
Displaying Bottom Sheets in Flutter
Converting Enums to Radio Buttons in Flutter
Check Existence of Websites in Flutter
Images inside AlertDialog in Flutter
Returning Values from AlertDialog in Flutter
Simple Grid View in Flutter
Rendering Bullet Points in Flutter
Retrying Futures in Flutter
Containers as ClipOvals in Flutter
Rich Texts in Flutter
Wrapping Widgets in Flutter
Sweep Gradients in Flutter
Stream and StreamBuilder in Flutter
Blur Effect in Flutter
Convert Enums to Strings in Dart
Replacing Text in TextField in Flutter
Aspect Ratio in Flutter
Zoom and Pan in Flutter
Resizing Images in Flutter to Fit Screen Height
Validating URLs in Flutter
FrameBuilder for Network Images in Flutter
Adding Shadow to Icons in Flutter
Calculating Median of Lists in Dart
Generic Functions with Reduce in Dart
Passing Back Data From a Screen to the Previous One in Flutter
Flinging an Animation in Flutter
Fade Animations in Flutter
Throttling User Input in Flutter
Censoring TextFields in Flutter
Customizing TextButton in Flutter
Multiline TextFields in Flutter
Filtering TextField Input in Flutter
Focusing Manually on TextFields in Flutter
Data Streams Over HTTP/HTTPs in Dart
Catching Nonexistent Accessors or Methods in Dart
Using Expando in Dart
Implementing Custom Maps in Dart
Dynamically Calling Functions in Dart
Factory Constructors in Dart
Calculating the Sum of List Items in Dart
Removing Duplicate Strings in Lists in Dart (Case-Insensitive)
Implementing Range in Dart
Converting Lists to Maps in Dart
Implementing Hashable in Dart
Random Name Generator in Dart
Capturing Stack Traces in Dart Exceptions
Removing Duplicates from Lists in Dart
Optional Spread Operator in Dart
Calling Optional Functions in Dart
Odd-Even Sort in Dart
Implementing Zip and Tuples in Dart
Swapping Values in Lists with XOR in Dart
Waiting for Multiple Futures in Dart
Using Queues as Stacks in Dart
Custom Iterators in Dart
Iterables as Ranges and Transform in Dart
Errors vs Exceptions in Dart
Custom Annotations in Dart
Classes as Enums in Dart
Spread Operator in Collection Literals in Dart
StreamBuilder and StreamController in Dart
Almost Equal in Dart
Enum Associated Values in Dart
Implementing Comparable in Dart
Implementing Custom Integer Types in Dart
Custom Subscripts in Dart
Dart List Enumeration with Index
Applying Mixins to Other Mixins in Dart
Parameter Types in Dart
Custom Exceptions in Dart
rethrowing Exceptions in Dart
mixins and JSON Parsing in Dart
mixins vs abstract classes in Dart
Drawing Shapes in Flutter with LayoutBuilder, CustomPaint and CustomPainter
Generic Type Aliases in Dart
Callable Classes in Dart
Synchronous Generators in Dart
Implicit Interfaces in Dart
Did you know that in #Dart, every #class implicitly exports an #interface that can be #implemented (as opposed to #extended) by other classes? This is called "implicit interface".
Do you know how "const" constructors work in #Dart?
Did you know that in #Dart, it is actually preferred to use #async and #await over using raw #Futures?
In #Dart, you can use a combination of #Initializer #List plus default values for your class #member #fields to create elegant and handy convenience initializers
Did you know that in #Dart, you can extract elements of a certain type from your Lists using the #whereType #generic #function instead of calculating the #equality yourselves?
Do you know about #Type #Promotion in Dart?
"address" is an optional field of the "Person" class. If you look at the "doThis()" function you see that I'm saving the value of address in a local variable and then comparing it with null and then returning if it's null. The Dart compiler is intelligent enough to understand that after the if-statement, "address" is NOT null anymore since you've already compared it with null and returned from the function.
If you look at the "insteadOfThis" function, the first one, the Dart compiler cannot make the same assumption if you don't first store the value of address in a local variable. In that first function the Dart compiler, even after the if-statement, needs you to refer to address as an optional, using "address?" syntax.
The mechanism the Dart compiler uses in the "doThis()" function is called Type Promotion.
4 lines of #Dart code that include the #spread operator, #cascade #operator, #generics, #extensions, #private prefix and #getters
Functions as First Class Citizens in Dart
Download Details:
Author: vandadnp
Source Code: https://github.com/vandadnp/flutter-tips-and-tricks
#flutter #dart #programming #developer
1643018220
SheetJS: Parser and Writer for Various Spreadsheet Formats
SheetJS
Parser and writer for various spreadsheet formats. Pure-JS cleanroom implementation from official specifications, related documents, and test files. Emphasis on parsing and writing robustness, cross-format feature compatibility with a unified JS representation, and ES3/ES5 browser compatibility back to IE6.
This is the community version. We also offer a pro version with performance enhancements, additional features like styling, and dedicated support.
Community Translations of this README:
Supported File Formats
Diagram Legend (click to show)
Installation
In the browser, just add a script tag:
<script lang="javascript" src="dist/xlsx.full.min.js"></script>
CDN Availability (click to show)
| CDN | URL |
|---|---|
unpkg | https://unpkg.com/xlsx/ |
jsDelivr | https://jsdelivr.com/package/npm/xlsx |
CDNjs | https://cdnjs.com/libraries/xlsx |
packd | https://bundle.run/xlsx@latest?name=XLSX |
unpkg makes the latest version available at:
<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
With npm:
$ npm install xlsx
With bower:
$ bower install js-xlsx
JS Ecosystem Demos
The demos directory includes sample projects for:
Frameworks and APIs
angularjsangular and ionicknockoutmeteorreact and react-nativevue 2.x and weexXMLHttpRequest and fetchnodejs serverdatabases and key/value storestyped arrays and math
Bundlers and Tooling
Platforms and Integrations
electron applicationnw.js applicationChrome / Chromium extensionsAdobe ExtendScriptHeadless Browserscanvas-datagridx-spreadsheetSwift JSC and other engines"serverless" functionsinternet explorer
Other examples are included in the showcase.
Optional Modules
Optional features (click to show)
The node version automatically requires modules for additional features. Some of these modules are rather large in size and are only needed in special circumstances, so they do not ship with the core. For browser use, they must be included directly:
<!-- international support from js-codepage -->
<script src="dist/cpexcel.js"></script>
An appropriate version for each dependency is included in the dist/ directory.
The complete single-file version is generated at dist/xlsx.full.min.js
A slimmer build is generated at dist/xlsx.mini.min.js. Compared to full build:
- codepage library skipped (no support for XLS encodings)
- XLSX compression option not currently available
- no support for XLSB / XLS / Lotus 1-2-3 / SpreadsheetML 2003
- node stream utils removed
Webpack and Browserify builds include optional modules by default. Webpack can be configured to remove support with resolve.alias:
/* uncomment the lines below to remove support */
resolve: {
alias: { "./dist/cpexcel.js": "" } // <-- omit international support
}
ECMAScript 5 Compatibility
Since the library uses functions like Array#forEach, older browsers require shims to provide missing functions.
To use the shim, add the shim before the script tag that loads xlsx.js:
<!-- add the shim first -->
<script type="text/javascript" src="shim.min.js"></script>
<!-- after the shim is referenced, add the library -->
<script type="text/javascript" src="xlsx.full.min.js"></script>
The script also includes IE_LoadFile and IE_SaveFile for loading and saving files in Internet Explorer versions 6-9. The xlsx.extendscript.js script bundles the shim in a format suitable for Photoshop and other Adobe products.
Philosophy
Philosophy (click to show)
Prior to SheetJS, APIs for processing spreadsheet files were format-specific. Third-party libraries either supported one format, or they involved a separate set of classes for each supported file type. Even though XLSB was introduced in Excel 2007, nothing outside of SheetJS or Excel supported the format.
To promote a format-agnostic view, SheetJS starts from a pure-JS representation that we call the "Common Spreadsheet Format". Emphasizing a uniform object representation enables new features like format conversion (reading an XLSX template and saving as XLS) and circumvents the mess of classes. By abstracting the complexities of the various formats, tools need not worry about the specific file type!
A simple object representation combined with careful coding practices enables use cases in older browsers and in alternative environments like ExtendScript and Web Workers. It is always tempting to use the latest and greatest features, but they tend to require the latest versions of browsers, limiting usability.
Utility functions capture common use cases like generating JS objects or HTML. Most simple operations should only require a few lines of code. More complex operations generally should be straightforward to implement.
Excel pushes the XLSX format as default starting in Excel 2007. However, there are other formats with more appealing properties. For example, the XLSB format is spiritually similar to XLSX but files often tend up taking less than half the space and open much faster! Even though an XLSX writer is available, other format writers are available so users can take advantage of the unique characteristics of each format.
The primary focus of the Community Edition is correct data interchange, focused on extracting data from any compatible data representation and exporting data in various formats suitable for any third party interface.
Parsing Workbooks
For parsing, the first step is to read the file. This involves acquiring the data and feeding it into the library. Here are a few common scenarios:
nodejs read a file (click to show)
readFile is only available in server environments. Browsers have no API for reading arbitrary files given a path, so another strategy must be used.
if(typeof require !== 'undefined') XLSX = require('xlsx');
var workbook = XLSX.readFile('test.xlsx');
/* DO SOMETHING WITH workbook HERE */
Photoshop ExtendScript read a file (click to show)
readFile wraps the File logic in Photoshop and other ExtendScript targets. The specified path should be an absolute path:
#include "xlsx.extendscript.js"
/* Read test.xlsx from the Documents folder */
var workbook = XLSX.readFile(Folder.myDocuments + '/' + 'test.xlsx');
/* DO SOMETHING WITH workbook HERE */
The extendscript demo includes a more complex example.
Browser read TABLE element from page (click to show)
The table_to_book and table_to_sheet utility functions take a DOM TABLE element and iterate through the child nodes.
var workbook = XLSX.utils.table_to_book(document.getElementById('tableau'));
/* DO SOMETHING WITH workbook HERE */
Multiple tables on a web page can be converted to individual worksheets:
/* create new workbook */
var workbook = XLSX.utils.book_new();
/* convert table 'table1' to worksheet named "Sheet1" */
var ws1 = XLSX.utils.table_to_sheet(document.getElementById('table1'));
XLSX.utils.book_append_sheet(workbook, ws1, "Sheet1");
/* convert table 'table2' to worksheet named "Sheet2" */
var ws2 = XLSX.utils.table_to_sheet(document.getElementById('table2'));
XLSX.utils.book_append_sheet(workbook, ws2, "Sheet2");
/* workbook now has 2 worksheets */
Alternatively, the HTML code can be extracted and parsed:
var htmlstr = document.getElementById('tableau').outerHTML;
var workbook = XLSX.read(htmlstr, {type:'string'});
Browser download file (ajax) (click to show)
Note: for a more complete example that works in older browsers, check the demo at http://oss.sheetjs.com/sheetjs/ajax.html. The xhr demo includes more examples with XMLHttpRequest and fetch.
var url = "http://oss.sheetjs.com/test_files/formula_stress_test.xlsx";
/* set up async GET request */
var req = new XMLHttpRequest();
req.open("GET", url, true);
req.responseType = "arraybuffer";
req.onload = function(e) {
var workbook = XLSX.read(req.response);
/* DO SOMETHING WITH workbook HERE */
}
req.send();
Browser drag-and-drop (click to show)
For modern browsers, Blob#arrayBuffer can read data from files:
async function handleDropAsync(e) {
e.stopPropagation(); e.preventDefault();
const f = evt.dataTransfer.files[0];
const data = await f.arrayBuffer();
const workbook = XLSX.read(data);
/* DO SOMETHING WITH workbook HERE */
}
drop_dom_element.addEventListener('drop', handleDropAsync, false);
For maximal compatibility, the FileReader API should be used:
function handleDrop(e) {
e.stopPropagation(); e.preventDefault();
var f = e.dataTransfer.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var workbook = XLSX.read(e.target.result);
/* DO SOMETHING WITH workbook HERE */
};
reader.readAsArrayBuffer(f);
}
drop_dom_element.addEventListener('drop', handleDrop, false);
Browser file upload form element (click to show)
Data from file input elements can be processed using the same APIs as in the drag-and-drop example.
Using Blob#arrayBuffer:
async function handleFileAsync(e) {
const file = e.target.files[0];
const data = await file.arrayBuffer();
const workbook = XLSX.read(data);
/* DO SOMETHING WITH workbook HERE */
}
input_dom_element.addEventListener('change', handleFileAsync, false);
Using FileReader:
function handleFile(e) {
var files = e.target.files, f = files[0];
var reader = new FileReader();
reader.onload = function(e) {
var workbook = XLSX.read(e.target.result);
/* DO SOMETHING WITH workbook HERE */
};
reader.readAsArrayBuffer(f);
}
input_dom_element.addEventListener('change', handleFile, false);
The oldie demo shows an IE-compatible fallback scenario.
More specialized cases, including mobile app file processing, are covered in the included demos
Parsing Examples
- https://oss.sheetjs.com/sheetjs/ HTML5 File API / Base64 Text / Web Workers
Note that older versions of IE do not support HTML5 File API, so the Base64 mode is used for testing.
Get Base64 encoding on OSX / Windows (click to show)
On OSX you can get the Base64 encoding with:
$ <target_file base64 | pbcopy
On Windows XP and up you can get the Base64 encoding using certutil:
> certutil -encode target_file target_file.b64
(note: You have to open the file and remove the header and footer lines)
- http://oss.sheetjs.com/sheetjs/ajax.html XMLHttpRequest
Streaming Read
Why is there no Streaming Read API? (click to show)
The most common and interesting formats (XLS, XLSX/M, XLSB, ODS) are ultimately ZIP or CFB containers of files. Neither format puts the directory structure at the beginning of the file: ZIP files place the Central Directory records at the end of the logical file, while CFB files can place the storage info anywhere in the file! As a result, to properly handle these formats, a streaming function would have to buffer the entire file before commencing. That belies the expectations of streaming, so we do not provide any streaming read API.
When dealing with Readable Streams, the easiest approach is to buffer the stream and process the whole thing at the end. This can be done with a temporary file or by explicitly concatenating the stream:
Explicitly concatenating streams (click to show)
var fs = require('fs');
var XLSX = require('xlsx');
function process_RS(stream/*:ReadStream*/, cb/*:(wb:Workbook)=>void*/)/*:void*/{
var buffers = [];
stream.on('data', function(data) { buffers.push(data); });
stream.on('end', function() {
var buffer = Buffer.concat(buffers);
var workbook = XLSX.read(buffer, {type:"buffer"});
/* DO SOMETHING WITH workbook IN THE CALLBACK */
cb(workbook);
});
}
More robust solutions are available using modules like concat-stream.
Writing to filesystem first (click to show)
This example uses tempfile to generate file names:
var fs = require('fs'), tempfile = require('tempfile');
var XLSX = require('xlsx');
function process_RS(stream/*:ReadStream*/, cb/*:(wb:Workbook)=>void*/)/*:void*/{
var fname = tempfile('.sheetjs');
console.log(fname);
var ostream = fs.createWriteStream(fname);
stream.pipe(ostream);
ostream.on('finish', function() {
var workbook = XLSX.readFile(fname);
fs.unlinkSync(fname);
/* DO SOMETHING WITH workbook IN THE CALLBACK */
cb(workbook);
});
}
Working with the Workbook
The full object format is described later in this README.
Reading a specific cell (click to show)
This example extracts the value stored in cell A1 from the first worksheet:
var first_sheet_name = workbook.SheetNames[0];
var address_of_cell = 'A1';
/* Get worksheet */
var worksheet = workbook.Sheets[first_sheet_name];
/* Find desired cell */
var desired_cell = worksheet[address_of_cell];
/* Get the value */
var desired_value = (desired_cell ? desired_cell.v : undefined);
Adding a new worksheet to a workbook (click to show)
This example uses XLSX.utils.aoa_to_sheet to make a sheet and XLSX.utils.book_append_sheet to append the sheet to the workbook:
var ws_name = "SheetJS";
/* make worksheet */
var ws_data = [
[ "S", "h", "e", "e", "t", "J", "S" ],
[ 1 , 2 , 3 , 4 , 5 ]
];
var ws = XLSX.utils.aoa_to_sheet(ws_data);
/* Add the worksheet to the workbook */
XLSX.utils.book_append_sheet(wb, ws, ws_name);
Creating a new workbook from scratch (click to show)
The workbook object contains a SheetNames array of names and a Sheets object mapping sheet names to sheet objects. The XLSX.utils.book_new utility function creates a new workbook object:
/* create a new blank workbook */
var wb = XLSX.utils.book_new();
The new workbook is blank and contains no worksheets. The write functions will error if the workbook is empty.
Parsing and Writing Examples
https://sheetjs.com/demos/modify.html read + modify + write files
https://github.com/SheetJS/sheetjs/blob/HEAD/bin/xlsx.njs node
The node version installs a command line tool xlsx which can read spreadsheet files and output the contents in various formats. The source is available at xlsx.njs in the bin directory.
Some helper functions in XLSX.utils generate different views of the sheets:
XLSX.utils.sheet_to_csvgenerates CSVXLSX.utils.sheet_to_txtgenerates UTF16 Formatted TextXLSX.utils.sheet_to_htmlgenerates HTMLXLSX.utils.sheet_to_jsongenerates an array of objectsXLSX.utils.sheet_to_formulaegenerates a list of formulae
Writing Workbooks
For writing, the first step is to generate output data. The helper functions write and writeFile will produce the data in various formats suitable for dissemination. The second step is to actual share the data with the end point. Assuming workbook is a workbook object:
nodejs write a file (click to show)
XLSX.writeFile uses fs.writeFileSync in server environments:
if(typeof require !== 'undefined') XLSX = require('xlsx');
/* output format determined by filename */
XLSX.writeFile(workbook, 'out.xlsb');
/* at this point, out.xlsb is a file that you can distribute */
Photoshop ExtendScript write a file (click to show)
writeFile wraps the File logic in Photoshop and other ExtendScript targets. The specified path should be an absolute path:
#include "xlsx.extendscript.js"
/* output format determined by filename */
XLSX.writeFile(workbook, 'out.xlsx');
/* at this point, out.xlsx is a file that you can distribute */
The extendscript demo includes a more complex example.
Browser add TABLE element to page (click to show)
The sheet_to_html utility function generates HTML code that can be added to any DOM element.
var worksheet = workbook.Sheets[workbook.SheetNames[0]];
var container = document.getElementById('tableau');
container.innerHTML = XLSX.utils.sheet_to_html(worksheet);
Browser upload file (ajax) (click to show)
A complete example using XHR is included in the XHR demo, along with examples for fetch and wrapper libraries. This example assumes the server can handle Base64-encoded files (see the demo for a basic nodejs server):
/* in this example, send a base64 string to the server */
var wopts = { bookType:'xlsx', bookSST:false, type:'base64' };
var wbout = XLSX.write(workbook,wopts);
var req = new XMLHttpRequest();
req.open("POST", "/upload", true);
var formdata = new FormData();
formdata.append('file', 'test.xlsx'); // <-- server expects `file` to hold name
formdata.append('data', wbout); // <-- `data` holds the base64-encoded data
req.send(formdata);
Browser save file (click to show)
XLSX.writeFile wraps a few techniques for triggering a file save:
URLbrowser API creates an object URL for the file, which the library uses by creating a link and forcing a click. It is supported in modern browsers.msSaveBlobis an IE10+ API for triggering a file save.IE_FileSaveuses VBScript and ActiveX to write a file in IE6+ for Windows XP and Windows 7. The shim must be included in the containing HTML page.
There is no standard way to determine if the actual file has been downloaded.
/* output format determined by filename */
XLSX.writeFile(workbook, 'out.xlsb');
/* at this point, out.xlsb will have been downloaded */
Browser save file (compatibility) (click to show)
XLSX.writeFile techniques work for most modern browsers as well as older IE. For much older browsers, there are workarounds implemented by wrapper libraries.
FileSaver.js implements saveAs. Note: XLSX.writeFile will automatically call saveAs if available.
/* bookType can be any supported output type */
var wopts = { bookType:'xlsx', bookSST:false, type:'array' };
var wbout = XLSX.write(workbook,wopts);
/* the saveAs call downloads a file on the local machine */
saveAs(new Blob([wbout],{type:"application/octet-stream"}), "test.xlsx");
Downloadify uses a Flash SWF button to generate local files, suitable for environments where ActiveX is unavailable:
Downloadify.create(id,{
/* other options are required! read the downloadify docs for more info */
filename: "test.xlsx",
data: function() { return XLSX.write(wb, {bookType:"xlsx", type:'base64'}); },
append: false,
dataType: 'base64'
});
The oldie demo shows an IE-compatible fallback scenario.
The included demos cover mobile apps and other special deployments.
Writing Examples
- http://sheetjs.com/demos/table.html exporting an HTML table
- http://sheetjs.com/demos/writexlsx.html generates a simple file
Streaming Write
The streaming write functions are available in the XLSX.stream object. They take the same arguments as the normal write functions but return a Readable Stream. They are only exposed in NodeJS.
XLSX.stream.to_csvis the streaming version ofXLSX.utils.sheet_to_csv.XLSX.stream.to_htmlis the streaming version ofXLSX.utils.sheet_to_html.XLSX.stream.to_jsonis the streaming version ofXLSX.utils.sheet_to_json.
nodejs convert to CSV and write file (click to show)
var output_file_name = "out.csv";
var stream = XLSX.stream.to_csv(worksheet);
stream.pipe(fs.createWriteStream(output_file_name));
nodejs write JSON stream to screen (click to show)
/* to_json returns an object-mode stream */
var stream = XLSX.stream.to_json(worksheet, {raw:true});
/* the following stream converts JS objects to text via JSON.stringify */
var conv = new Transform({writableObjectMode:true});
conv._transform = function(obj, e, cb){ cb(null, JSON.stringify(obj) + "\n"); };
stream.pipe(conv); conv.pipe(process.stdout);
https://github.com/sheetjs/sheetaki pipes write streams to nodejs response.
Interface
XLSX is the exposed variable in the browser and the exported node variable
XLSX.version is the version of the library (added by the build script).
XLSX.SSF is an embedded version of the format library.
Parsing functions
XLSX.read(data, read_opts) attempts to parse data.
XLSX.readFile(filename, read_opts) attempts to read filename and parse.
Parse options are described in the Parsing Options section.
Writing functions
XLSX.write(wb, write_opts) attempts to write the workbook wb
XLSX.writeFile(wb, filename, write_opts) attempts to write wb to filename. In browser-based environments, it will attempt to force a client-side download.
XLSX.writeFileAsync(wb, filename, o, cb) attempts to write wb to filename. If o is omitted, the writer will use the third argument as the callback.
XLSX.stream contains a set of streaming write functions.
Write options are described in the Writing Options section.
Utilities
Utilities are available in the XLSX.utils object and are described in the Utility Functions section:
Importing:
aoa_to_sheetconverts an array of arrays of JS data to a worksheet.json_to_sheetconverts an array of JS objects to a worksheet.table_to_sheetconverts a DOM TABLE element to a worksheet.sheet_add_aoaadds an array of arrays of JS data to an existing worksheet.sheet_add_jsonadds an array of JS objects to an existing worksheet.
Exporting:
sheet_to_jsonconverts a worksheet object to an array of JSON objects.sheet_to_csvgenerates delimiter-separated-values output.sheet_to_txtgenerates UTF16 formatted text.sheet_to_htmlgenerates HTML output.sheet_to_formulaegenerates a list of the formulae (with value fallbacks).
Cell and cell address manipulation:
format_cellgenerates the text value for a cell (using number formats).encode_row / decode_rowconverts between 0-indexed rows and 1-indexed rows.encode_col / decode_colconverts between 0-indexed columns and column names.encode_cell / decode_cellconverts cell addresses.encode_range / decode_rangeconverts cell ranges.
Common Spreadsheet Format
SheetJS conforms to the Common Spreadsheet Format (CSF):
General Structures
Cell address objects are stored as {c:C, r:R} where C and R are 0-indexed column and row numbers, respectively. For example, the cell address B5 is represented by the object {c:1, r:4}.
Cell range objects are stored as {s:S, e:E} where S is the first cell and E is the last cell in the range. The ranges are inclusive. For example, the range A3:B7 is represented by the object {s:{c:0, r:2}, e:{c:1, r:6}}. Utility functions perform a row-major order walk traversal of a sheet range:
for(var R = range.s.r; R <= range.e.r; ++R) {
for(var C = range.s.c; C <= range.e.c; ++C) {
var cell_address = {c:C, r:R};
/* if an A1-style address is needed, encode the address */
var cell_ref = XLSX.utils.encode_cell(cell_address);
}
}
Cell Object
Cell objects are plain JS objects with keys and values following the convention:
| Key | Description |
|---|---|
v | raw value (see Data Types section for more info) |
w | formatted text (if applicable) |
t | type: b Boolean, e Error, n Number, d Date, s Text, z Stub |
f | cell formula encoded as an A1-style string (if applicable) |
F | range of enclosing array if formula is array formula (if applicable) |
r | rich text encoding (if applicable) |
h | HTML rendering of the rich text (if applicable) |
c | comments associated with the cell |
z | number format string associated with the cell (if requested) |
l | cell hyperlink object (.Target holds link, .Tooltip is tooltip) |
s | the style/theme of the cell (if applicable) |
Built-in export utilities (such as the CSV exporter) will use the w text if it is available. To change a value, be sure to delete cell.w (or set it to undefined) before attempting to export. The utilities will regenerate the w text from the number format (cell.z) and the raw value if possible.
The actual array formula is stored in the f field of the first cell in the array range. Other cells in the range will omit the f field.
Data Types
The raw value is stored in the v value property, interpreted based on the t type property. This separation allows for representation of numbers as well as numeric text. There are 6 valid cell types:
| Type | Description |
|---|---|
b | Boolean: value interpreted as JS boolean |
e | Error: value is a numeric code and w property stores common name ** |
n | Number: value is a JS number ** |
d | Date: value is a JS Date object or string to be parsed as Date ** |
s | Text: value interpreted as JS string and written as text ** |
z | Stub: blank stub cell that is ignored by data processing utilities ** |
Error values and interpretation (click to show)
| Value | Error Meaning |
|---|---|
0x00 | #NULL! |
0x07 | #DIV/0! |
0x0F | #VALUE! |
0x17 | #REF! |
0x1D | #NAME? |
0x24 | #NUM! |
0x2A | #N/A |
0x2B | #GETTING_DATA |
Type n is the Number type. This includes all forms of data that Excel stores as numbers, such as dates/times and Boolean fields. Excel exclusively uses data that can be fit in an IEEE754 floating point number, just like JS Number, so the v field holds the raw number. The w field holds formatted text. Dates are stored as numbers by default and converted with XLSX.SSF.parse_date_code.
Type d is the Date type, generated only when the option cellDates is passed. Since JSON does not have a natural Date type, parsers are generally expected to store ISO 8601 Date strings like you would get from date.toISOString(). On the other hand, writers and exporters should be able to handle date strings and JS Date objects. Note that Excel disregards timezone modifiers and treats all dates in the local timezone. The library does not correct for this error.
Type s is the String type. Values are explicitly stored as text. Excel will interpret these cells as "number stored as text". Generated Excel files automatically suppress that class of error, but other formats may elicit errors.
Type z represents blank stub cells. They are generated in cases where cells have no assigned value but hold comments or other metadata. They are ignored by the core library data processing utility functions. By default these cells are not generated; the parser sheetStubs option must be set to true.
Dates
Excel Date Code details (click to show)
By default, Excel stores dates as numbers with a format code that specifies date processing. For example, the date 19-Feb-17 is stored as the number 42785 with a number format of d-mmm-yy. The SSF module understands number formats and performs the appropriate conversion.
XLSX also supports a special date type d where the data is an ISO 8601 date string. The formatter converts the date back to a number.
The default behavior for all parsers is to generate number cells. Setting cellDates to true will force the generators to store dates.
Time Zones and Dates (click to show)
Excel has no native concept of universal time. All times are specified in the local time zone. Excel limitations prevent specifying true absolute dates.
Following Excel, this library treats all dates as relative to local time zone.
Epochs: 1900 and 1904 (click to show)
Excel supports two epochs (January 1 1900 and January 1 1904). The workbook's epoch can be determined by examining the workbook's wb.Workbook.WBProps.date1904 property:
!!(((wb.Workbook||{}).WBProps||{}).date1904)
Sheet Objects
Each key that does not start with ! maps to a cell (using A-1 notation)
sheet[address] returns the cell object for the specified address.
Special sheet keys (accessible as sheet[key], each starting with !):
sheet['!ref']: A-1 based range representing the sheet range. Functions that work with sheets should use this parameter to determine the range. Cells that are assigned outside of the range are not processed. In particular, when writing a sheet by hand, cells outside of the range are not included
Functions that handle sheets should test for the presence of !ref field. If the !ref is omitted or is not a valid range, functions are free to treat the sheet as empty or attempt to guess the range. The standard utilities that ship with this library treat sheets as empty (for example, the CSV output is empty string).
When reading a worksheet with the sheetRows property set, the ref parameter will use the restricted range. The original range is set at ws['!fullref']
sheet['!margins']: Object representing the page margins. The default values follow Excel's "normal" preset. Excel also has a "wide" and a "narrow" preset but they are stored as raw measurements. The main properties are listed below:
Page margin details (click to show)
| key | description | "normal" | "wide" | "narrow" |
|---|---|---|---|---|
left | left margin (inches) | 0.7 | 1.0 | 0.25 |
right | right margin (inches) | 0.7 | 1.0 | 0.25 |
top | top margin (inches) | 0.75 | 1.0 | 0.75 |
bottom | bottom margin (inches) | 0.75 | 1.0 | 0.75 |
header | header margin (inches) | 0.3 | 0.5 | 0.3 |
footer | footer margin (inches) | 0.3 | 0.5 | 0.3 |
/* Set worksheet sheet to "normal" */
ws["!margins"]={left:0.7, right:0.7, top:0.75,bottom:0.75,header:0.3,footer:0.3}
/* Set worksheet sheet to "wide" */
ws["!margins"]={left:1.0, right:1.0, top:1.0, bottom:1.0, header:0.5,footer:0.5}
/* Set worksheet sheet to "narrow" */
ws["!margins"]={left:0.25,right:0.25,top:0.75,bottom:0.75,header:0.3,footer:0.3}
Worksheet Object
In addition to the base sheet keys, worksheets also add:
ws['!cols']: array of column properties objects. Column widths are actually stored in files in a normalized manner, measured in terms of the "Maximum Digit Width" (the largest width of the rendered digits 0-9, in pixels). When parsed, the column objects store the pixel width in the wpx field, character width in the wch field, and the maximum digit width in the MDW field.
ws['!rows']: array of row properties objects as explained later in the docs. Each row object encodes properties including row height and visibility.
ws['!merges']: array of range objects corresponding to the merged cells in the worksheet. Plain text formats do not support merge cells. CSV export will write all cells in the merge range if they exist, so be sure that only the first cell (upper-left) in the range is set.
ws['!outline']: configure how outlines should behave. Options default to the default settings in Excel 2019:
| key | Excel feature | default |
|---|---|---|
above | Uncheck "Summary rows below detail" | false |
left | Uncheck "Summary rows to the right of detail" | false |
ws['!protect']: object of write sheet protection properties. Thepasswordkey specifies the password for formats that support password-protected sheets (XLSX/XLSB/XLS). The writer uses the XOR obfuscation method. The following keys control the sheet protection -- set tofalseto enable a feature when sheet is locked or set totrueto disable a feature:
Worksheet Protection Details (click to show)
| key | feature (true=disabled / false=enabled) | default |
|---|---|---|
selectLockedCells | Select locked cells | enabled |
selectUnlockedCells | Select unlocked cells | enabled |
formatCells | Format cells | disabled |
formatColumns | Format columns | disabled |
formatRows | Format rows | disabled |
insertColumns | Insert columns | disabled |
insertRows | Insert rows | disabled |
insertHyperlinks | Insert hyperlinks | disabled |
deleteColumns | Delete columns | disabled |
deleteRows | Delete rows | disabled |
sort | Sort | disabled |
autoFilter | Filter | disabled |
pivotTables | Use PivotTable reports | disabled |
objects | Edit objects | enabled |
scenarios | Edit scenarios | enabled |
ws['!autofilter']: AutoFilter object following the schema:
type AutoFilter = {
ref:string; // A-1 based range representing the AutoFilter table range
}
Chartsheet Object
Chartsheets are represented as standard sheets. They are distinguished with the !type property set to "chart".
The underlying data and !ref refer to the cached data in the chartsheet. The first row of the chartsheet is the underlying header.
Macrosheet Object
Macrosheets are represented as standard sheets. They are distinguished with the !type property set to "macro".
Dialogsheet Object
Dialogsheets are represented as standard sheets. They are distinguished with the !type property set to "dialog".
Workbook Object
workbook.SheetNames is an ordered list of the sheets in the workbook
wb.Sheets[sheetname] returns an object representing the worksheet.
wb.Props is an object storing the standard properties. wb.Custprops stores custom properties. Since the XLS standard properties deviate from the XLSX standard, XLS parsing stores core properties in both places.
wb.Workbook stores workbook-level attributes.
Workbook File Properties
The various file formats use different internal names for file properties. The workbook Props object normalizes the names:
File Properties (click to show)
| JS Name | Excel Description |
|---|---|
Title | Summary tab "Title" |
Subject | Summary tab "Subject" |
Author | Summary tab "Author" |
Manager | Summary tab "Manager" |
Company | Summary tab "Company" |
Category | Summary tab "Category" |
Keywords | Summary tab "Keywords" |
Comments | Summary tab "Comments" |
LastAuthor | Statistics tab "Last saved by" |
CreatedDate | Statistics tab "Created" |
For example, to set the workbook title property:
if(!wb.Props) wb.Props = {};
wb.Props.Title = "Insert Title Here";
Custom properties are added in the workbook Custprops object:
if(!wb.Custprops) wb.Custprops = {};
wb.Custprops["Custom Property"] = "Custom Value";
Writers will process the Props key of the options object:
/* force the Author to be "SheetJS" */
XLSX.write(wb, {Props:{Author:"SheetJS"}});
Workbook-Level Attributes
wb.Workbook stores workbook-level attributes.
Defined Names
wb.Workbook.Names is an array of defined name objects which have the keys:
Defined Name Properties (click to show)
| Key | Description |
|---|---|
Sheet | Name scope. Sheet Index (0 = first sheet) or null (Workbook) |
Name | Case-sensitive name. Standard rules apply ** |
Ref | A1-style Reference ("Sheet1!$A$1:$D$20") |
Comment | Comment (only applicable for XLS/XLSX/XLSB) |
Excel allows two sheet-scoped defined names to share the same name. However, a sheet-scoped name cannot collide with a workbook-scope name. Workbook writers may not enforce this constraint.
Workbook Views
wb.Workbook.Views is an array of workbook view objects which have the keys:
| Key | Description |
|---|---|
RTL | If true, display right-to-left |
Miscellaneous Workbook Properties
wb.Workbook.WBProps holds other workbook properties:
| Key | Description |
|---|---|
CodeName | VBA Project Workbook Code Name |
date1904 | epoch: 0/false for 1900 system, 1/true for 1904 |
filterPrivacy | Warn or strip personally identifying info on save |
Document Features
Even for basic features like date storage, the official Excel formats store the same content in different ways. The parsers are expected to convert from the underlying file format representation to the Common Spreadsheet Format. Writers are expected to convert from CSF back to the underlying file format.
Formulae
The A1-style formula string is stored in the f field. Even though different file formats store the formulae in different ways, the formats are translated. Even though some formats store formulae with a leading equal sign, CSF formulae do not start with =.
Representation of A1=1, A2=2, A3=A1+A2 (click to show)
{
"!ref": "A1:A3",
A1: { t:'n', v:1 },
A2: { t:'n', v:2 },
A3: { t:'n', v:3, f:'A1+A2' }
}
Shared formulae are decompressed and each cell has the formula corresponding to its cell. Writers generally do not attempt to generate shared formulae.
Cells with formula entries but no value will be serialized in a way that Excel and other spreadsheet tools will recognize. This library will not automatically compute formula results! For example, to compute BESSELJ in a worksheet:
Formula without known value (click to show)
{
"!ref": "A1:A3",
A1: { t:'n', v:3.14159 },
A2: { t:'n', v:2 },
A3: { t:'n', f:'BESSELJ(A1,A2)' }
}
Array Formulae
Array formulae are stored in the top-left cell of the array block. All cells of an array formula have a F field corresponding to the range. A single-cell formula can be distinguished from a plain formula by the presence of F field.
Array Formula examples (click to show)
For example, setting the cell C1 to the array formula {=SUM(A1:A3*B1:B3)}:
worksheet['C1'] = { t:'n', f: "SUM(A1:A3*B1:B3)", F:"C1:C1" };
For a multi-cell array formula, every cell has the same array range but only the first cell specifies the formula. Consider D1:D3=A1:A3*B1:B3:
worksheet['D1'] = { t:'n', F:"D1:D3", f:"A1:A3*B1:B3" };
worksheet['D2'] = { t:'n', F:"D1:D3" };
worksheet['D3'] = { t:'n', F:"D1:D3" };
Utilities and writers are expected to check for the presence of a F field and ignore any possible formula element f in cells other than the starting cell. They are not expected to perform validation of the formulae!
Formula Output Utility Function (click to show)
The sheet_to_formulae method generates one line per formula or array formula. Array formulae are rendered in the form range=formula while plain cells are rendered in the form cell=formula or value. Note that string literals are prefixed with an apostrophe ', consistent with Excel's formula bar display.
Formulae File Format Details (click to show)
| Storage Representation | Formats | Read | Write |
|---|---|---|---|
| A1-style strings | XLSX | ✔ | ✔ |
| RC-style strings | XLML and plain text | ✔ | ✔ |
| BIFF Parsed formulae | XLSB and all XLS formats | ✔ | |
| OpenFormula formulae | ODS/FODS/UOS | ✔ | ✔ |
| Lotus Parsed formulae | All Lotus WK_ formats | ✔ |
Since Excel prohibits named cells from colliding with names of A1 or RC style cell references, a (not-so-simple) regex conversion is possible. BIFF Parsed formulae and Lotus Parsed formulae have to be explicitly unwound. OpenFormula formulae can be converted with regular expressions.
Column Properties
The !cols array in each worksheet, if present, is a collection of ColInfo objects which have the following properties:
type ColInfo = {
/* visibility */
hidden?: boolean; // if true, the column is hidden
/* column width is specified in one of the following ways: */
wpx?: number; // width in screen pixels
width?: number; // width in Excel's "Max Digit Width", width*256 is integral
wch?: number; // width in characters
/* other fields for preserving features from files */
level?: number; // 0-indexed outline / group level
MDW?: number; // Excel's "Max Digit Width" unit, always integral
};
Why are there three width types? (click to show)
There are three different width types corresponding to the three different ways spreadsheets store column widths:
SYLK and other plain text formats use raw character count. Contemporaneous tools like Visicalc and Multiplan were character based. Since the characters had the same width, it sufficed to store a count. This tradition was continued into the BIFF formats.
SpreadsheetML (2003) tried to align with HTML by standardizing on screen pixel count throughout the file. Column widths, row heights, and other measures use pixels. When the pixel and character counts do not align, Excel rounds values.
XLSX internally stores column widths in a nebulous "Max Digit Width" form. The Max Digit Width is the width of the largest digit when rendered (generally the "0" character is the widest). The internal width must be an integer multiple of the the width divided by 256. ECMA-376 describes a formula for converting between pixels and the internal width. This represents a hybrid approach.
Read functions attempt to populate all three properties. Write functions will try to cycle specified values to the desired type. In order to avoid potential conflicts, manipulation should delete the other properties first. For example, when changing the pixel width, delete the wch and width properties.
Implementation details (click to show)
Given the constraints, it is possible to determine the MDW without actually inspecting the font! The parsers guess the pixel width by converting from width to pixels and back, repeating for all possible MDW and selecting the MDW that minimizes the error. XLML actually stores the pixel width, so the guess works in the opposite direction.
Even though all of the information is made available, writers are expected to follow the priority order:
- use
widthfield if available - use
wpxpixel width if available - use
wchcharacter count if available
Row Properties
The !rows array in each worksheet, if present, is a collection of RowInfo objects which have the following properties:
type RowInfo = {
/* visibility */
hidden?: boolean; // if true, the row is hidden
/* row height is specified in one of the following ways: */
hpx?: number; // height in screen pixels
hpt?: number; // height in points
level?: number; // 0-indexed outline / group level
};
Note: Excel UI displays the base outline level as 1 and the max level as 8. The level field stores the base outline as 0 and the max level as 7.
Implementation details (click to show)
Excel internally stores row heights in points. The default resolution is 72 DPI or 96 PPI, so the pixel and point size should agree. For different resolutions they may not agree, so the library separates the concepts.
Even though all of the information is made available, writers are expected to follow the priority order:
- use
hpxpixel height if available - use
hptpoint height if available
Number Formats
The cell.w formatted text for each cell is produced from cell.v and cell.z format. If the format is not specified, the Excel General format is used. The format can either be specified as a string or as an index into the format table. Parsers are expected to populate workbook.SSF with the number format table. Writers are expected to serialize the table.
Custom tools should ensure that the local table has each used format string somewhere in the table. Excel convention mandates that the custom formats start at index 164. The following example creates a custom format from scratch:
New worksheet with custom format (click to show)
var wb = {
SheetNames: ["Sheet1"],
Sheets: {
Sheet1: {
"!ref":"A1:C1",
A1: { t:"n", v:10000 }, // <-- General format
B1: { t:"n", v:10000, z: "0%" }, // <-- Builtin format
C1: { t:"n", v:10000, z: "\"T\"\ #0.00" } // <-- Custom format
}
}
}
The rules are slightly different from how Excel displays custom number formats. In particular, literal characters must be wrapped in double quotes or preceded by a backslash. For more info, see the Excel documentation article Create or delete a custom number format or ECMA-376 18.8.31 (Number Formats)
Default Number Formats (click to show)
The default formats are listed in ECMA-376 18.8.30:
| ID | Format |
|---|---|
| 0 | General |
| 1 | 0 |
| 2 | 0.00 |
| 3 | #,##0 |
| 4 | #,##0.00 |
| 9 | 0% |
| 10 | 0.00% |
| 11 | 0.00E+00 |
| 12 | # ?/? |
| 13 | # ??/?? |
| 14 | m/d/yy (see below) |
| 15 | d-mmm-yy |
| 16 | d-mmm |
| 17 | mmm-yy |
| 18 | h:mm AM/PM |
| 19 | h:mm:ss AM/PM |
| 20 | h:mm |
| 21 | h:mm:ss |
| 22 | m/d/yy h:mm |
| 37 | #,##0 ;(#,##0) |
| 38 | #,##0 ;[Red](#,##0) |
| 39 | #,##0.00;(#,##0.00) |
| 40 | #,##0.00;[Red](#,##0.00) |
| 45 | mm:ss |
| 46 | [h]:mm:ss |
| 47 | mmss.0 |
| 48 | ##0.0E+0 |
| 49 | @ |
Format 14 (m/d/yy) is localized by Excel: even though the file specifies that number format, it will be drawn differently based on system settings. It makes sense when the producer and consumer of files are in the same locale, but that is not always the case over the Internet. To get around this ambiguity, parse functions accept the dateNF option to override the interpretation of that specific format string.
Hyperlinks
Format Support (click to show)
Cell Hyperlinks: XLSX/M, XLSB, BIFF8 XLS, XLML, ODS
Tooltips: XLSX/M, XLSB, BIFF8 XLS, XLML
Hyperlinks are stored in the l key of cell objects. The Target field of the hyperlink object is the target of the link, including the URI fragment. Tooltips are stored in the Tooltip field and are displayed when you move your mouse over the text.
For example, the following snippet creates a link from cell A3 to https://sheetjs.com with the tip "Find us @ SheetJS.com!":
ws['A1'].l = { Target:"https://sheetjs.com", Tooltip:"Find us @ SheetJS.com!" };
Note that Excel does not automatically style hyperlinks -- they will generally be displayed as normal text.
Remote Links
HTTP / HTTPS links can be used directly:
ws['A2'].l = { Target:"https://docs.sheetjs.com/#hyperlinks" };
ws['A3'].l = { Target:"http://localhost:7262/yes_localhost_works" };
Excel also supports mailto email links with subject line:
ws['A4'].l = { Target:"mailto:ignored@dev.null" };
ws['A5'].l = { Target:"mailto:ignored@dev.null?subject=Test Subject" };
Local Links
Links to absolute paths should use the file:// URI scheme:
ws['B1'].l = { Target:"file:///SheetJS/t.xlsx" }; /* Link to /SheetJS/t.xlsx */
ws['B2'].l = { Target:"file:///c:/SheetJS.xlsx" }; /* Link to c:\SheetJS.xlsx */
Links to relative paths can be specified without a scheme:
ws['B3'].l = { Target:"SheetJS.xlsb" }; /* Link to SheetJS.xlsb */
ws['B4'].l = { Target:"../SheetJS.xlsm" }; /* Link to ../SheetJS.xlsm */
Relative Paths have undefined behavior in the SpreadsheetML 2003 format. Excel 2019 will treat a ..\ parent mark as two levels up.
Internal Links
Links where the target is a cell or range or defined name in the same workbook ("Internal Links") are marked with a leading hash character:
ws['C1'].l = { Target:"#E2" }; /* Link to cell E2 */
ws['C2'].l = { Target:"#Sheet2!E2" }; /* Link to cell E2 in sheet Sheet2 */
ws['C3'].l = { Target:"#SomeDefinedName" }; /* Link to Defined Name */
Cell Comments
Cell comments are objects stored in the c array of cell objects. The actual contents of the comment are split into blocks based on the comment author. The a field of each comment object is the author of the comment and the t field is the plain text representation.
For example, the following snippet appends a cell comment into cell A1:
if(!ws.A1.c) ws.A1.c = [];
ws.A1.c.push({a:"SheetJS", t:"I'm a little comment, short and stout!"});
Note: XLSB enforces a 54 character limit on the Author name. Names longer than 54 characters may cause issues with other formats.
To mark a comment as normally hidden, set the hidden property:
if(!ws.A1.c) ws.A1.c = [];
ws.A1.c.push({a:"SheetJS", t:"This comment is visible"});
if(!ws.A2.c) ws.A2.c = [];
ws.A2.c.hidden = true;
ws.A2.c.push({a:"SheetJS", t:"This comment will be hidden"});
Sheet Visibility
Excel enables hiding sheets in the lower tab bar. The sheet data is stored in the file but the UI does not readily make it available. Standard hidden sheets are revealed in the "Unhide" menu. Excel also has "very hidden" sheets which cannot be revealed in the menu. It is only accessible in the VB Editor!
The visibility setting is stored in the Hidden property of sheet props array.
More details (click to show)
| Value | Definition |
|---|---|
| 0 | Visible |
| 1 | Hidden |
| 2 | Very Hidden |
With https://rawgit.com/SheetJS/test_files/HEAD/sheet_visibility.xlsx:
> wb.Workbook.Sheets.map(function(x) { return [x.name, x.Hidden] })
[ [ 'Visible', 0 ], [ 'Hidden', 1 ], [ 'VeryHidden', 2 ] ]
Non-Excel formats do not support the Very Hidden state. The best way to test if a sheet is visible is to check if the Hidden property is logical truth:
> wb.Workbook.Sheets.map(function(x) { return [x.name, !x.Hidden] })
[ [ 'Visible', true ], [ 'Hidden', false ], [ 'VeryHidden', false ] ]
VBA and Macros
VBA Macros are stored in a special data blob that is exposed in the vbaraw property of the workbook object when the bookVBA option is true. They are supported in XLSM, XLSB, and BIFF8 XLS formats. The supported format writers automatically insert the data blobs if it is present in the workbook and associate with the worksheet names.
Custom Code Names (click to show)
The workbook code name is stored in wb.Workbook.WBProps.CodeName. By default, Excel will write ThisWorkbook or a translated phrase like DieseArbeitsmappe. Worksheet and Chartsheet code names are in the worksheet properties object at wb.Workbook.Sheets[i].CodeName. Macrosheets and Dialogsheets are ignored.
The readers and writers preserve the code names, but they have to be manually set when adding a VBA blob to a different workbook.
Macrosheets (click to show)
Older versions of Excel also supported a non-VBA "macrosheet" sheet type that stored automation commands. These are exposed in objects with the !type property set to "macro".
Detecting macros in workbooks (click to show)
The vbaraw field will only be set if macros are present, so testing is simple:
function wb_has_macro(wb/*:workbook*/)/*:boolean*/ {
if(!!wb.vbaraw) return true;
const sheets = wb.SheetNames.map((n) => wb.Sheets[n]);
return sheets.some((ws) => !!ws && ws['!type']=='macro');
}
Parsing Options
The exported read and readFile functions accept an options argument:
| Option Name | Default | Description |
|---|---|---|
type | Input data encoding (see Input Type below) | |
raw | false | If true, plain text parsing will not parse values ** |
codepage | If specified, use code page when appropriate ** | |
cellFormula | true | Save formulae to the .f field |
cellHTML | true | Parse rich text and save HTML to the .h field |
cellNF | false | Save number format string to the .z field |
cellStyles | false | Save style/theme info to the .s field |
cellText | true | Generated formatted text to the .w field |
cellDates | false | Store dates as type d (default is n) |
dateNF | If specified, use the string for date code 14 ** | |
sheetStubs | false | Create cell objects of type z for stub cells |
sheetRows | 0 | If >0, read the first sheetRows rows ** |
bookDeps | false | If true, parse calculation chains |
bookFiles | false | If true, add raw files to book object ** |
bookProps | false | If true, only parse enough to get book metadata ** |
bookSheets | false | If true, only parse enough to get the sheet names |
bookVBA | false | If true, copy VBA blob to vbaraw field ** |
password | "" | If defined and file is encrypted, use password ** |
WTF | false | If true, throw errors on unexpected file features ** |
sheets | If specified, only parse specified sheets ** | |
PRN | false | If true, allow parsing of PRN files ** |
xlfn | false | If true, preserve _xlfn. prefixes in formulae ** |
FS | DSV Field Separator override |
- Even if
cellNFis false, formatted text will be generated and saved to.w - In some cases, sheets may be parsed even if
bookSheetsis false. - Excel aggressively tries to interpret values from CSV and other plain text. This leads to surprising behavior! The
rawoption suppresses value parsing. bookSheetsandbookPropscombine to give both sets of informationDepswill be an empty object ifbookDepsis falsebookFilesbehavior depends on file type:keysarray (paths in the ZIP) for ZIP-based formatsfileshash (mapping paths to objects representing the files) for ZIPcfbobject for formats using CFB containers
sheetRows-1rows will be generated when looking at the JSON object output (since the header row is counted as a row when parsing the data)- By default all worksheets are parsed.
sheetsrestricts based on input type:- number: zero-based index of worksheet to parse (
0is first worksheet) - string: name of worksheet to parse (case insensitive)
- array of numbers and strings to select multiple worksheets.
- number: zero-based index of worksheet to parse (
bookVBAmerely exposes the raw VBA CFB object. It does not parse the data. XLSM and XLSB store the VBA CFB object inxl/vbaProject.bin. BIFF8 XLS mixes the VBA entries alongside the core Workbook entry, so the library generates a new XLSB-compatible blob from the XLS CFB container.codepageis applied to BIFF2 - BIFF5 files withoutCodePagerecords and to CSV files without BOM intype:"binary". BIFF8 XLS always defaults to 1200.PRNaffects parsing of text files without a common delimiter character.- Currently only XOR encryption is supported. Unsupported error will be thrown for files employing other encryption methods.
- Newer Excel functions are serialized with the
_xlfn.prefix, hidden from the user. SheetJS will strip_xlfn.normally. Thexlfnoption preserves them. - WTF is mainly for development. By default, the parser will suppress read errors on single worksheets, allowing you to read from the worksheets that do parse properly. Setting
WTF:trueforces those errors to be thrown.
Input Type
Strings can be interpreted in multiple ways. The type parameter for read tells the library how to parse the data argument:
type | expected input |
|---|---|
"base64" | string: Base64 encoding of the file |
"binary" | string: binary string (byte n is data.charCodeAt(n)) |
"string" | string: JS string (characters interpreted as UTF8) |
"buffer" | nodejs Buffer |
"array" | array: array of 8-bit unsigned int (byte n is data[n]) |
"file" | string: path of file that will be read (nodejs only) |
Guessing File Type
Implementation Details (click to show)
Excel and other spreadsheet tools read the first few bytes and apply other heuristics to determine a file type. This enables file type punning: renaming files with the .xls extension will tell your computer to use Excel to open the file but Excel will know how to handle it. This library applies similar logic:
| Byte 0 | Raw File Type | Spreadsheet Types |
|---|---|---|
0xD0 | CFB Container | BIFF 5/8 or protected XLSX/XLSB or WQ3/QPW or XLR |
0x09 | BIFF Stream | BIFF 2/3/4/5 |
0x3C | XML/HTML | SpreadsheetML / Flat ODS / UOS1 / HTML / plain text |
0x50 | ZIP Archive | XLSB or XLSX/M or ODS or UOS2 or plain text |
0x49 | Plain Text | SYLK or plain text |
0x54 | Plain Text | DIF or plain text |
0xEF | UTF8 Encoded | SpreadsheetML / Flat ODS / UOS1 / HTML / plain text |
0xFF | UTF16 Encoded | SpreadsheetML / Flat ODS / UOS1 / HTML / plain text |
0x00 | Record Stream | Lotus WK* or Quattro Pro or plain text |
0x7B | Plain text | RTF or plain text |
0x0A | Plain text | SpreadsheetML / Flat ODS / UOS1 / HTML / plain text |
0x0D | Plain text | SpreadsheetML / Flat ODS / UOS1 / HTML / plain text |
0x20 | Plain text | SpreadsheetML / Flat ODS / UOS1 / HTML / plain text |
DBF files are detected based on the first byte as well as the third and fourth bytes (corresponding to month and day of the file date)
Works for Windows files are detected based on the BOF record with type 0xFF
Plain text format guessing follows the priority order:
| Format | Test |
|---|---|
| XML | <?xml appears in the first 1024 characters |
| HTML | starts with < and HTML tags appear in the first 1024 characters * |
| XML | starts with < and the first tag is valid |
| RTF | starts with {\rt |
| DSV | starts with /sep=.$/, separator is the specified character |
| DSV | more unquoted ` |
| DSV | more unquoted ; chars than \t or , in the first 1024 |
| TSV | more unquoted \t chars than , chars in the first 1024 |
| CSV | one of the first 1024 characters is a comma "," |
| ETH | starts with socialcalc:version: |
| PRN | PRN option is set to true |
| CSV | (fallback) |
- HTML tags include:
html,table,head,meta,script,style,div
Why are random text files valid? (click to show)
Excel is extremely aggressive in reading files. Adding an XLS extension to any display text file (where the only characters are ANSI display chars) tricks Excel into thinking that the file is potentially a CSV or TSV file, even if it is only one column! This library attempts to replicate that behavior.
The best approach is to validate the desired worksheet and ensure it has the expected number of rows or columns. Extracting the range is extremely simple:
var range = XLSX.utils.decode_range(worksheet['!ref']);
var ncols = range.e.c - range.s.c + 1, nrows = range.e.r - range.s.r + 1;
Writing Options
The exported write and writeFile functions accept an options argument:
| Option Name | Default | Description |
|---|---|---|
type | Output data encoding (see Output Type below) | |
cellDates | false | Store dates as type d (default is n) |
bookSST | false | Generate Shared String Table ** |
bookType | "xlsx" | Type of Workbook (see below for supported formats) |
sheet | "" | Name of Worksheet for single-sheet formats ** |
compression | false | Use ZIP compression for ZIP-based formats ** |
Props | Override workbook properties when writing ** | |
themeXLSX | Override theme XML when writing XLSX/XLSB/XLSM ** | |
ignoreEC | true | Suppress "number as text" errors ** |
bookSSTis slower and more memory intensive, but has better compatibility with older versions of iOS Numbers- The raw data is the only thing guaranteed to be saved. Features not described in this README may not be serialized.
cellDatesonly applies to XLSX output and is not guaranteed to work with third-party readers. Excel itself does not usually write cells with typedso non-Excel tools may ignore the data or error in the presence of dates.Propsis an object mirroring the workbookPropsfield. See the table from the Workbook File Properties section.- if specified, the string from
themeXLSXwill be saved as the primary theme for XLSX/XLSB/XLSM files (toxl/theme/theme1.xmlin the ZIP) - Due to a bug in the program, some features like "Text to Columns" will crash Excel on worksheets where error conditions are ignored. The writer will mark files to ignore the error by default. Set
ignoreECtofalseto suppress.
Supported Output Formats
For broad compatibility with third-party tools, this library supports many output formats. The specific file type is controlled with bookType option:
bookType | file ext | container | sheets | Description |
|---|---|---|---|---|
xlsx | .xlsx | ZIP | multi | Excel 2007+ XML Format |
xlsm | .xlsm | ZIP | multi | Excel 2007+ Macro XML Format |
xlsb | .xlsb | ZIP | multi | Excel 2007+ Binary Format |
biff8 | .xls | CFB | multi | Excel 97-2004 Workbook Format |
biff5 | .xls | CFB | multi | Excel 5.0/95 Workbook Format |
biff4 | .xls | none | single | Excel 4.0 Worksheet Format |
biff3 | .xls | none | single | Excel 3.0 Worksheet Format |
biff2 | .xls | none | single | Excel 2.0 Worksheet Format |
xlml | .xls | none | multi | Excel 2003-2004 (SpreadsheetML) |
ods | .ods | ZIP | multi | OpenDocument Spreadsheet |
fods | .fods | none | multi | Flat OpenDocument Spreadsheet |
wk3 | .wk3 | none | single | Lotus Workbook (WK3) |
csv | .csv | none | single | Comma Separated Values |
txt | .txt | none | single | UTF-16 Unicode Text (TXT) |
sylk | .sylk | none | single | Symbolic Link (SYLK) |
html | .html | none | single | HTML Document |
dif | .dif | none | single | Data Interchange Format (DIF) |
dbf | .dbf | none | single | dBASE II + VFP Extensions (DBF) |
wk1 | .wk1 | none | single | Lotus Worksheet (WK1) |
rtf | .rtf | none | single | Rich Text Format (RTF) |
prn | .prn | none | single | Lotus Formatted Text |
eth | .eth | none | single | Ethercalc Record Format (ETH) |
compressiononly applies to formats with ZIP containers.- Formats that only support a single sheet require a
sheetoption specifying the worksheet. If the string is empty, the first worksheet is used. writeFilewill automatically guess the output file format based on the file extension ifbookTypeis not specified. It will choose the first format in the aforementioned table that matches the extension.
Output Type
The type argument for write mirrors the type argument for read:
type | output |
|---|---|
"base64" | string: Base64 encoding of the file |
"binary" | string: binary string (byte n is data.charCodeAt(n)) |
"string" | string: JS string (characters interpreted as UTF8) |
"buffer" | nodejs Buffer |
"array" | ArrayBuffer, fallback array of 8-bit unsigned int |
"file" | string: path of file that will be created (nodejs only) |
Utility Functions
The sheet_to_* functions accept a worksheet and an optional options object.
The *_to_sheet functions accept a data object and an optional options object.
The examples are based on the following worksheet:
XXX| A | B | C | D | E | F | G |
---+---+---+---+---+---+---+---+
1 | S | h | e | e | t | J | S |
2 | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
3 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Array of Arrays Input
XLSX.utils.aoa_to_sheet takes an array of arrays of JS values and returns a worksheet resembling the input data. Numbers, Booleans and Strings are stored as the corresponding styles. Dates are stored as date or numbers. Array holes and explicit undefined values are skipped. null values may be stubbed. All other values are stored as strings. The function takes an options argument:
| Option Name | Default | Description |
|---|---|---|
dateNF | FMT 14 | Use specified date format in string output |
cellDates | false | Store dates as type d (default is n) |
sheetStubs | false | Create cell objects of type z for null values |
nullError | false | If true, emit #NULL! error cells for null values |
Examples (click to show)
To generate the example sheet:
var ws = XLSX.utils.aoa_to_sheet([
"SheetJS".split(""),
[1,2,3,4,5,6,7],
[2,3,4,5,6,7,8]
]);
XLSX.utils.sheet_add_aoa takes an array of arrays of JS values and updates an existing worksheet object. It follows the same process as aoa_to_sheet and accepts an options argument:
| Option Name | Default | Description |
|---|---|---|
dateNF | FMT 14 | Use specified date format in string output |
cellDates | false | Store dates as type d (default is n) |
sheetStubs | false | Create cell objects of type z for null values |
nullError | false | If true, emit #NULL! error cells for null values |
origin | Use specified cell as starting point (see below) |
origin is expected to be one of:
origin | Description |
|---|---|
| (cell object) | Use specified cell (cell object) |
| (string) | Use specified cell (A1-style cell) |
| (number >= 0) | Start from the first column at specified row (0-indexed) |
| -1 | Append to bottom of worksheet starting on first column |
| (default) | Start from cell A1 |
Examples (click to show)
Consider the worksheet:
XXX| A | B | C | D | E | F | G |
---+---+---+---+---+---+---+---+
1 | S | h | e | e | t | J | S |
2 | 1 | 2 | | | 5 | 6 | 7 |
3 | 2 | 3 | | | 6 | 7 | 8 |
4 | 3 | 4 | | | 7 | 8 | 9 |
5 | 4 | 5 | 6 | 7 | 8 | 9 | 0 |
This worksheet can be built up in the order A1:G1, A2:B4, E2:G4, A5:G5:
/* Initial row */
var ws = XLSX.utils.aoa_to_sheet([ "SheetJS".split("") ]);
/* Write data starting at A2 */
XLSX.utils.sheet_add_aoa(ws, [[1,2], [2,3], [3,4]], {origin: "A2"});
/* Write data starting at E2 */
XLSX.utils.sheet_add_aoa(ws, [[5,6,7], [6,7,8], [7,8,9]], {origin:{r:1, c:4}});
/* Append row */
XLSX.utils.sheet_add_aoa(ws, [[4,5,6,7,8,9,0]], {origin: -1});
Array of Objects Input
XLSX.utils.json_to_sheet takes an array of objects and returns a worksheet with automatically-generated "headers" based on the keys of the objects. The default column order is determined by the first appearance of the field using Object.keys. The function accepts an options argument:
| Option Name | Default | Description |
|---|---|---|
header | Use specified field order (default Object.keys) ** | |
dateNF | FMT 14 | Use specified date format in string output |
cellDates | false | Store dates as type d (default is n) |
skipHeader | false | If true, do not include header row in output |
nullError | false | If true, emit #NULL! error cells for null values |
- All fields from each row will be written. If
headeris an array and it does not contain a particular field, the key will be appended to the array. - Cell types are deduced from the type of each value. For example, a
Dateobject will generate a Date cell, while a string will generate a Text cell. - Null values will be skipped by default. If
nullErroris true, an error cell corresponding to#NULL!will be written to the worksheet.
Examples (click to show)
The original sheet cannot be reproduced using plain objects since JS object keys must be unique. After replacing the second e and S with e_1 and S_1:
var ws = XLSX.utils.json_to_sheet([
{ S:1, h:2, e:3, e_1:4, t:5, J:6, S_1:7 },
{ S:2, h:3, e:4, e_1:5, t:6, J:7, S_1:8 }
], {header:["S","h","e","e_1","t","J","S_1"]});
Alternatively, the header row can be skipped:
var ws = XLSX.utils.json_to_sheet([
{ A:"S", B:"h", C:"e", D:"e", E:"t", F:"J", G:"S" },
{ A: 1, B: 2, C: 3, D: 4, E: 5, F: 6, G: 7 },
{ A: 2, B: 3, C: 4, D: 5, E: 6, F: 7, G: 8 }
], {header:["A","B","C","D","E","F","G"], skipHeader:true});
XLSX.utils.sheet_add_json takes an array of objects and updates an existing worksheet object. It follows the same process as json_to_sheet and accepts an options argument:
| Option Name | Default | Description |
|---|---|---|
header | Use specified column order (default Object.keys) | |
dateNF | FMT 14 | Use specified date format in string output |
cellDates | false | Store dates as type d (default is n) |
skipHeader | false | If true, do not include header row in output |
nullError | false | If true, emit #NULL! error cells for null values |
origin | Use specified cell as starting point (see below) |
origin is expected to be one of:
origin | Description |
|---|---|
| (cell object) | Use specified cell (cell object) |
| (string) | Use specified cell (A1-style cell) |
| (number >= 0) | Start from the first column at specified row (0-indexed) |
| -1 | Append to bottom of worksheet starting on first column |
| (default) | Start from cell A1 |
Examples (click to show)
Consider the worksheet:
XXX| A | B | C | D | E | F | G |
---+---+---+---+---+---+---+---+
1 | S | h | e | e | t | J | S |
2 | 1 | 2 | | | 5 | 6 | 7 |
3 | 2 | 3 | | | 6 | 7 | 8 |
4 | 3 | 4 | | | 7 | 8 | 9 |
5 | 4 | 5 | 6 | 7 | 8 | 9 | 0 |
This worksheet can be built up in the order A1:G1, A2:B4, E2:G4, A5:G5:
/* Initial row */
var ws = XLSX.utils.json_to_sheet([
{ A: "S", B: "h", C: "e", D: "e", E: "t", F: "J", G: "S" }
], {header: ["A", "B", "C", "D", "E", "F", "G"], skipHeader: true});
/* Write data starting at A2 */
XLSX.utils.sheet_add_json(ws, [
{ A: 1, B: 2 }, { A: 2, B: 3 }, { A: 3, B: 4 }
], {skipHeader: true, origin: "A2"});
/* Write data starting at E2 */
XLSX.utils.sheet_add_json(ws, [
{ A: 5, B: 6, C: 7 }, { A: 6, B: 7, C: 8 }, { A: 7, B: 8, C: 9 }
], {skipHeader: true, origin: { r: 1, c: 4 }, header: [ "A", "B", "C" ]});
/* Append row */
XLSX.utils.sheet_add_json(ws, [
{ A: 4, B: 5, C: 6, D: 7, E: 8, F: 9, G: 0 }
], {header: ["A", "B", "C", "D", "E", "F", "G"], skipHeader: true, origin: -1});
HTML Table Input
XLSX.utils.table_to_sheet takes a table DOM element and returns a worksheet resembling the input table. Numbers are parsed. All other data will be stored as strings.
XLSX.utils.table_to_book produces a minimal workbook based on the worksheet.
Both functions accept options arguments:
| Option Name | Default | Description |
|---|---|---|
raw | If true, every cell will hold raw strings | |
dateNF | FMT 14 | Use specified date format in string output |
cellDates | false | Store dates as type d (default is n) |
sheetRows | 0 | If >0, read the first sheetRows rows of the table |
display | false | If true, hidden rows and cells will not be parsed |
Examples (click to show)
To generate the example sheet, start with the HTML table:
<table id="sheetjs">
<tr><td>S</td><td>h</td><td>e</td><td>e</td><td>t</td><td>J</td><td>S</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td></tr>
</table>
To process the table:
var tbl = document.getElementById('sheetjs');
var wb = XLSX.utils.table_to_book(tbl);
Note: XLSX.read can handle HTML represented as strings.
XLSX.utils.sheet_add_dom takes a table DOM element and updates an existing worksheet object. It follows the same process as table_to_sheet and accepts an options argument:
| Option Name | Default | Description |
|---|---|---|
raw | If true, every cell will hold raw strings | |
dateNF | FMT 14 | Use specified date format in string output |
cellDates | false | Store dates as type d (default is n) |
sheetRows | 0 | If >0, read the first sheetRows rows of the table |
display | false | If true, hidden rows and cells will not be parsed |
origin is expected to be one of:
origin | Description |
|---|---|
| (cell object) | Use specified cell (cell object) |
| (string) | Use specified cell (A1-style cell) |
| (number >= 0) | Start from the first column at specified row (0-indexed) |
| -1 | Append to bottom of worksheet starting on first column |
| (default) | Start from cell A1 |
Examples (click to show)
A small helper function can create gap rows between tables:
function create_gap_rows(ws, nrows) {
var ref = XLSX.utils.decode_range(ws["!ref"]); // get original range
ref.e.r += nrows; // add to ending row
ws["!ref"] = XLSX.utils.encode_range(ref); // reassign row
}
/* first table */
var ws = XLSX.utils.table_to_sheet(document.getElementById('table1'));
create_gap_rows(ws, 1); // one row gap after first table
/* second table */
XLSX.utils.sheet_add_dom(ws, document.getElementById('table2'), {origin: -1});
create_gap_rows(ws, 3); // three rows gap after second table
/* third table */
XLSX.utils.sheet_add_dom(ws, document.getElementById('table3'), {origin: -1});
Formulae Output
XLSX.utils.sheet_to_formulae generates an array of commands that represent how a person would enter data into an application. Each entry is of the form A1-cell-address=formula-or-value. String literals are prefixed with a ' in accordance with Excel.
Examples (click to show)
For the example sheet:
> var o = XLSX.utils.sheet_to_formulae(ws);
> [o[0], o[5], o[10], o[15], o[20]];
[ 'A1=\'S', 'F1=\'J', 'D2=4', 'B3=3', 'G3=8' ]
Delimiter-Separated Output
As an alternative to the writeFile CSV type, XLSX.utils.sheet_to_csv also produces CSV output. The function takes an options argument:
| Option Name | Default | Description |
|---|---|---|
FS | "," | "Field Separator" delimiter between fields |
RS | "\n" | "Record Separator" delimiter between rows |
dateNF | FMT 14 | Use specified date format in string output |
strip | false | Remove trailing field separators in each record ** |
blankrows | true | Include blank lines in the CSV output |
skipHidden | false | Skips hidden rows/columns in the CSV output |
forceQuotes | false | Force quotes around fields |
stripwill remove trailing commas from each line under defaultFS/RSblankrowsmust be set tofalseto skip blank lines.- Fields containing the record or field separator will automatically be wrapped in double quotes;
forceQuotesforces all cells to be wrapped in quotes.
Examples (click to show)
For the example sheet:
> console.log(XLSX.utils.sheet_to_csv(ws));
S,h,e,e,t,J,S
1,2,3,4,5,6,7
2,3,4,5,6,7,8
> console.log(XLSX.utils.sheet_to_csv(ws, {FS:"\t"}));
S h e e t J S
1 2 3 4 5 6 7
2 3 4 5 6 7 8
> console.log(XLSX.utils.sheet_to_csv(ws,{FS:":",RS:"|"}));
S:h:e:e:t:J:S|1:2:3:4:5:6:7|2:3:4:5:6:7:8|
UTF-16 Unicode Text
The txt output type uses the tab character as the field separator. If the codepage library is available (included in full distribution but not core), the output will be encoded in CP1200 and the BOM will be prepended.
XLSX.utils.sheet_to_txt takes the same arguments as sheet_to_csv.
HTML Output
As an alternative to the writeFile HTML type, XLSX.utils.sheet_to_html also produces HTML output. The function takes an options argument:
| Option Name | Default | Description |
|---|---|---|
id | Specify the id attribute for the TABLE element | |
editable | false | If true, set contenteditable="true" for every TD |
header | Override header (default html body) | |
footer | Override footer (default /body /html) |
Examples (click to show)
For the example sheet:
> console.log(XLSX.utils.sheet_to_html(ws));
// ...
JSON
XLSX.utils.sheet_to_json generates different types of JS objects. The function takes an options argument:
| Option Name | Default | Description |
|---|---|---|
raw | true | Use raw values (true) or formatted strings (false) |
range | from WS | Override Range (see table below) |
header | Control output format (see table below) | |
dateNF | FMT 14 | Use specified date format in string output |
defval | Use specified value in place of null or undefined | |
blankrows | ** | Include blank lines in the output ** |
rawonly affects cells which have a format code (.z) field or a formatted text (.w) field.- If
headeris specified, the first row is considered a data row; ifheaderis not specified, the first row is the header row and not considered data. - When
headeris not specified, the conversion will automatically disambiguate header entries by affixing_and a count starting at1. For example, if three columns have headerfoothe output fields arefoo,foo_1,foo_2 nullvalues are returned whenrawis true but are skipped when false.- If
defvalis not specified, null and undefined values are skipped normally. If specified, all null and undefined points will be filled withdefval - When
headeris1, the default is to generate blank rows.blankrowsmust be set tofalseto skip blank rows. - When
headeris not1, the default is to skip blank rows.blankrowsmust be true to generate blank rows
range is expected to be one of:
range | Description |
|---|---|
| (number) | Use worksheet range but set starting row to the value |
| (string) | Use specified range (A1-style bounded range string) |
| (default) | Use worksheet range (ws['!ref']) |
header is expected to be one of:
header | Description |
|---|---|
1 | Generate an array of arrays ("2D Array") |
"A" | Row object keys are literal column labels |
| array of strings | Use specified strings as keys in row objects |
| (default) | Read and disambiguate first row as keys |
If header is not 1, the row object will contain the non-enumerable property __rowNum__ that represents the row of the sheet corresponding to the entry.
Examples (click to show)
For the example sheet:
> XLSX.utils.sheet_to_json(ws);
[ { S: 1, h: 2, e: 3, e_1: 4, t: 5, J: 6, S_1: 7 },
{ S: 2, h: 3, e: 4, e_1: 5, t: 6, J: 7, S_1: 8 } ]
> XLSX.utils.sheet_to_json(ws, {header:"A"});
[ { A: 'S', B: 'h', C: 'e', D: 'e', E: 't', F: 'J', G: 'S' },
{ A: '1', B: '2', C: '3', D: '4', E: '5', F: '6', G: '7' },
{ A: '2', B: '3', C: '4', D: '5', E: '6', F: '7', G: '8' } ]
> XLSX.utils.sheet_to_json(ws, {header:["A","E","I","O","U","6","9"]});
[ { '6': 'J', '9': 'S', A: 'S', E: 'h', I: 'e', O: 'e', U: 't' },
{ '6': '6', '9': '7', A: '1', E: '2', I: '3', O: '4', U: '5' },
{ '6': '7', '9': '8', A: '2', E: '3', I: '4', O: '5', U: '6' } ]
> XLSX.utils.sheet_to_json(ws, {header:1});
[ [ 'S', 'h', 'e', 'e', 't', 'J', 'S' ],
[ '1', '2', '3', '4', '5', '6', '7' ],
[ '2', '3', '4', '5', '6', '7', '8' ] ]
Example showing the effect of raw:
> ws['A2'].w = "3"; // set A2 formatted string value
> XLSX.utils.sheet_to_json(ws, {header:1, raw:false});
[ [ 'S', 'h', 'e', 'e', 't', 'J', 'S' ],
[ '3', '2', '3', '4', '5', '6', '7' ], // <-- A2 uses the formatted string
[ '2', '3', '4', '5', '6', '7', '8' ] ]
> XLSX.utils.sheet_to_json(ws, {header:1});
[ [ 'S', 'h', 'e', 'e', 't', 'J', 'S' ],
[ 1, 2, 3, 4, 5, 6, 7 ], // <-- A2 uses the raw value
[ 2, 3, 4, 5, 6, 7, 8 ] ]
File Formats
Despite the library name xlsx, it supports numerous spreadsheet file formats:
| Format | Read | Write |
|---|---|---|
| Excel Worksheet/Workbook Formats | :-----: | :-----: |
| Excel 2007+ XML Formats (XLSX/XLSM) | ✔ | ✔ |
| Excel 2007+ Binary Format (XLSB BIFF12) | ✔ | ✔ |
| Excel 2003-2004 XML Format (XML "SpreadsheetML") | ✔ | ✔ |
| Excel 97-2004 (XLS BIFF8) | ✔ | ✔ |
| Excel 5.0/95 (XLS BIFF5) | ✔ | ✔ |
| Excel 4.0 (XLS/XLW BIFF4) | ✔ | ✔ |
| Excel 3.0 (XLS BIFF3) | ✔ | ✔ |
| Excel 2.0/2.1 (XLS BIFF2) | ✔ | ✔ |
| Excel Supported Text Formats | :-----: | :-----: |
| Delimiter-Separated Values (CSV/TXT) | ✔ | ✔ |
| Data Interchange Format (DIF) | ✔ | ✔ |
| Symbolic Link (SYLK/SLK) | ✔ | ✔ |
| Lotus Formatted Text (PRN) | ✔ | ✔ |
| UTF-16 Unicode Text (TXT) | ✔ | ✔ |
| Other Workbook/Worksheet Formats | :-----: | :-----: |
| OpenDocument Spreadsheet (ODS) | ✔ | ✔ |
| Flat XML ODF Spreadsheet (FODS) | ✔ | ✔ |
| Uniform Office Format Spreadsheet (标文通 UOS1/UOS2) | ✔ | |
| dBASE II/III/IV / Visual FoxPro (DBF) | ✔ | ✔ |
| Lotus 1-2-3 (WK1/WK3) | ✔ | ✔ |
| Lotus 1-2-3 (WKS/WK2/WK4/123) | ✔ | |
| Quattro Pro Spreadsheet (WQ1/WQ2/WB1/WB2/WB3/QPW) | ✔ | |
| Works 1.x-3.x DOS / 2.x-5.x Windows Spreadsheet (WKS) | ✔ | |
| Works 6.x-9.x Spreadsheet (XLR) | ✔ | |
| Other Common Spreadsheet Output Formats | :-----: | :-----: |
| HTML Tables | ✔ | ✔ |
| Rich Text Format tables (RTF) | ✔ | |
| Ethercalc Record Format (ETH) | ✔ | ✔ |
Features not supported by a given file format will not be written. Formats with range limits will be silently truncated:
| Format | Last Cell | Max Cols | Max Rows |
|---|---|---|---|
| Excel 2007+ XML Formats (XLSX/XLSM) | XFD1048576 | 16384 | 1048576 |
| Excel 2007+ Binary Format (XLSB BIFF12) | XFD1048576 | 16384 | 1048576 |
| Excel 97-2004 (XLS BIFF8) | IV65536 | 256 | 65536 |
| Excel 5.0/95 (XLS BIFF5) | IV16384 | 256 | 16384 |
| Excel 4.0 (XLS BIFF4) | IV16384 | 256 | 16384 |
| Excel 3.0 (XLS BIFF3) | IV16384 | 256 | 16384 |
| Excel 2.0/2.1 (XLS BIFF2) | IV16384 | 256 | 16384 |
| Lotus 1-2-3 R2 - R5 (WK1/WK3/WK4) | IV8192 | 256 | 8192 |
| Lotus 1-2-3 R1 (WKS) | IV2048 | 256 | 2048 |
Excel 2003 SpreadsheetML range limits are governed by the version of Excel and are not enforced by the writer.
Excel 2007+ XML (XLSX/XLSM)
(click to show)
XLSX and XLSM files are ZIP containers containing a series of XML files in accordance with the Open Packaging Conventions (OPC). The XLSM format, almost identical to XLSX, is used for files containing macros.
The format is standardized in ECMA-376 and later in ISO/IEC 29500. Excel does not follow the specification, and there are additional documents discussing how Excel deviates from the specification.
Excel 2.0-95 (BIFF2/BIFF3/BIFF4/BIFF5)
(click to show)
BIFF 2/3 XLS are single-sheet streams of binary records. Excel 4 introduced the concept of a workbook (XLW files) but also had single-sheet XLS format. The structure is largely similar to the Lotus 1-2-3 file formats. BIFF5/8/12 extended the format in various ways but largely stuck to the same record format.
There is no official specification for any of these formats. Excel 95 can write files in these formats, so record lengths and fields were determined by writing in all of the supported formats and comparing files. Excel 2016 can generate BIFF5 files, enabling a full suite of file tests starting from XLSX or BIFF2.
Excel 97-2004 Binary (BIFF8)
(click to show)
BIFF8 exclusively uses the Compound File Binary container format, splitting some content into streams within the file. At its core, it still uses an extended version of the binary record format from older versions of BIFF.
The MS-XLS specification covers the basics of the file format, and other specifications expand on serialization of features like properties.
Excel 2003-2004 (SpreadsheetML)
(click to show)
Predating XLSX, SpreadsheetML files are simple XML files. There is no official and comprehensive specification, although MS has released documentation on the format. Since Excel 2016 can generate SpreadsheetML files, mapping features is pretty straightforward.
Excel 2007+ Binary (XLSB, BIFF12)
(click to show)
Introduced in parallel with XLSX, the XLSB format combines the BIFF architecture with the content separation and ZIP container of XLSX. For the most part nodes in an XLSX sub-file can be mapped to XLSB records in a corresponding sub-file.
The MS-XLSB specification covers the basics of the file format, and other specifications expand on serialization of features like properties.
Delimiter-Separated Values (CSV/TXT)
(click to show)
Excel CSV deviates from RFC4180 in a number of important ways. The generated CSV files should generally work in Excel although they may not work in RFC4180 compatible readers. The parser should generally understand Excel CSV. The writer proactively generates cells for formulae if values are unavailable.
Excel TXT uses tab as the delimiter and code page 1200.
Notes:
- Like in Excel, files starting with
0x49 0x44 ("ID")are treated as Symbolic Link files. Unlike Excel, if the file does not have a valid SYLK header, it will be proactively reinterpreted as CSV. There are some files with semicolon delimiter that align with a valid SYLK file. For the broadest compatibility, all cells with the value ofIDare automatically wrapped in double-quotes.
Other Workbook Formats
(click to show)
Support for other formats is generally far XLS/XLSB/XLSX support, due in large part to a lack of publicly available documentation. Test files were produced in the respective apps and compared to their XLS exports to determine structure. The main focus is data extraction.
Lotus 1-2-3 (WKS/WK1/WK2/WK3/WK4/123)
(click to show)
The Lotus formats consist of binary records similar to the BIFF structure. Lotus did release a specification decades ago covering the original WK1 format. Other features were deduced by producing files and comparing to Excel support.
Generated WK1 worksheets are compatible with Lotus 1-2-3 R2 and Excel 5.0.
Generated WK3 workbooks are compatible with Lotus 1-2-3 R9 and Excel 5.0.
Quattro Pro (WQ1/WQ2/WB1/WB2/WB3/QPW)
(click to show)
The Quattro Pro formats use binary records in the same way as BIFF and Lotus. Some of the newer formats (namely WB3 and QPW) use a CFB enclosure just like BIFF8 XLS.
Works for DOS / Windows Spreadsheet (WKS/XLR)
(click to show)
All versions of Works were limited to a single worksheet.
Works for DOS 1.x - 3.x and Works for Windows 2.x extends the Lotus WKS format with additional record types.
Works for Windows 3.x - 5.x uses the same format and WKS extension. The BOF record has type FF
Works for Windows 6.x - 9.x use the XLR format. XLR is nearly identical to BIFF8 XLS: it uses the CFB container with a Workbook stream. Works 9 saves the exact Workbook stream for the XLR and the 97-2003 XLS export. Works 6 XLS includes two empty worksheets but the main worksheet has an identical encoding. XLR also includes a WksSSWorkBook stream similar to Lotus FM3/FMT files.
OpenDocument Spreadsheet (ODS/FODS)
(click to show)
ODS is an XML-in-ZIP format akin to XLSX while FODS is an XML format akin to SpreadsheetML. Both are detailed in the OASIS standard, but tools like LO/OO add undocumented extensions. The parsers and writers do not implement the full standard, instead focusing on parts necessary to extract and store raw data.
Uniform Office Spreadsheet (UOS1/2)
(click to show)
UOS is a very similar format, and it comes in 2 varieties corresponding to ODS and FODS respectively. For the most part, the difference between the formats is in the names of tags and attributes.
Other Single-Worksheet Formats
Many older formats supported only one worksheet:
dBASE and Visual FoxPro (DBF)
(click to show)
DBF is really a typed table format: each column can only hold one data type and each record omits type information. The parser generates a header row and inserts records starting at the second row of the worksheet. The writer makes files compatible with Visual FoxPro extensions.
Multi-file extensions like external memos and tables are currently unsupported, limited by the general ability to read arbitrary files in the web browser. The reader understands DBF Level 7 extensions like DATETIME.
Symbolic Link (SYLK)
(click to show)
There is no real documentation. All knowledge was gathered by saving files in various versions of Excel to deduce the meaning of fields. Notes:
- Plain formulae are stored in the RC form.
- Column widths are rounded to integral characters.
Lotus Formatted Text (PRN)
(click to show)
There is no real documentation, and in fact Excel treats PRN as an output-only file format. Nevertheless we can guess the column widths and reverse-engineer the original layout. Excel's 240 character width limitation is not enforced.
Data Interchange Format (DIF)
(click to show)
There is no unified definition. Visicalc DIF differs from Lotus DIF, and both differ from Excel DIF. Where ambiguous, the parser/writer follows the expected behavior from Excel. In particular, Excel extends DIF in incompatible ways:
- Since Excel automatically converts numbers-as-strings to numbers, numeric string constants are converted to formulae:
"0.3" -> "=""0.3"" - DIF technically expects numeric cells to hold the raw numeric data, but Excel permits formatted numbers (including dates)
- DIF technically has no support for formulae, but Excel will automatically convert plain formulae. Array formulae are not preserved.
HTML
(click to show)
Excel HTML worksheets include special metadata encoded in styles. For example, mso-number-format is a localized string containing the number format. Despite the metadata the output is valid HTML, although it does accept bare & symbols.
The writer adds type metadata to the TD elements via the t tag. The parser looks for those tags and overrides the default interpretation. For example, text like <td>12345</td> will be parsed as numbers but <td t="s">12345</td> will be parsed as text.
Rich Text Format (RTF)
(click to show)
Excel RTF worksheets are stored in clipboard when copying cells or ranges from a worksheet. The supported codes are a subset of the Word RTF support.
Ethercalc Record Format (ETH)
(click to show)
Ethercalc is an open source web spreadsheet powered by a record format reminiscent of SYLK wrapped in a MIME multi-part message.
Testing
Node
(click to show)
make test will run the node-based tests. By default it runs tests on files in every supported format. To test a specific file type, set FMTS to the format you want to test. Feature-specific tests are available with make test_misc
$ make test_misc # run core tests
$ make test # run full tests
$ make test_xls # only use the XLS test files
$ make test_xlsx # only use the XLSX test files
$ make test_xlsb # only use the XLSB test files
$ make test_xml # only use the XML test files
$ make test_ods # only use the ODS test files
To enable all errors, set the environment variable WTF=1:
$ make test # run full tests
$ WTF=1 make test # enable all error messages
flow and eslint checks are available:
$ make lint # eslint checks
$ make flow # make lint + Flow checking
$ make tslint # check TS definitions
Browser
(click to show)
The core in-browser tests are available at tests/index.html within this repo. Start a local server and navigate to that directory to run the tests. make ctestserv will start a server on port 8000.
make ctest will generate the browser fixtures. To add more files, edit the tests/fixtures.lst file and add the paths.
To run the full in-browser tests, clone the repo for oss.sheetjs.com and replace the xlsx.js file (then open a browser window and go to stress.html):
$ cp xlsx.js ../SheetJS.github.io
$ cd ../SheetJS.github.io
$ simplehttpserver # or "python -mSimpleHTTPServer" or "serve"
$ open -a Chromium.app http://localhost:8000/stress.html
Tested Environments
(click to show)
- NodeJS
0.8,0.10,0.12,4.x,5.x,6.x,7.x,8.x - IE 6/7/8/9/10/11 (IE 6-9 require shims)
- Chrome 24+ (including Android 4.0+)
- Safari 6+ (iOS and Desktop)
- Edge 13+, FF 18+, and Opera 12+
Tests utilize the mocha testing framework.
- https://saucelabs.com/u/sheetjs for XLS* modules using Sauce Labs
The test suite also includes tests for various time zones. To change the timezone locally, set the TZ environment variable:
$ env TZ="Asia/Kolkata" WTF=1 make test_misc
Test Files
Test files are housed in another repo.
Running make init will refresh the test_files submodule and get the files. Note that this requires svn, git, hg and other commands that may not be available. If make init fails, please download the latest version of the test files snapshot from the repo
Latest Snapshot (click to show)
Latest test files snapshot: http://github.com/SheetJS/test_files/releases/download/20170409/test_files.zip
(download and unzip to the test_files subdirectory)
Contributing
Due to the precarious nature of the Open Specifications Promise, it is very important to ensure code is cleanroom. Contribution Notes
File organization (click to show)
At a high level, the final script is a concatenation of the individual files in the bits folder. Running make should reproduce the final output on all platforms. The README is similarly split into bits in the docbits folder.
Folders:
| folder | contents |
|---|---|
bits | raw source files that make up the final script |
docbits | raw markdown files that make up README.md |
bin | server-side bin scripts (xlsx.njs) |
dist | dist files for web browsers and nonstandard JS environments |
demos | demo projects for platforms like ExtendScript and Webpack |
tests | browser tests (run make ctest to rebuild) |
types | typescript definitions and tests |
misc | miscellaneous supporting scripts |
test_files | test files (pulled from the test files repository) |
After cloning the repo, running make help will display a list of commands.
OSX/Linux
(click to show)
The xlsx.js file is constructed from the files in the bits subdirectory. The build script (run make) will concatenate the individual bits to produce the script. Before submitting a contribution, ensure that running make will produce the xlsx.js file exactly. The simplest way to test is to add the script:
$ git add xlsx.js
$ make clean
$ make
$ git diff xlsx.js
To produce the dist files, run make dist. The dist files are updated in each version release and should not be committed between versions.
Windows
(click to show)
The included make.cmd script will build xlsx.js from the bits directory. Building is as simple as:
> make
To prepare development environment:
> make init
The full list of commands available in Windows are displayed in make help:
make init -- install deps and global modules
make lint -- run eslint linter
make test -- run mocha test suite
make misc -- run smaller test suite
make book -- rebuild README and summary
make help -- display this message
As explained in Test Files, on Windows the release ZIP file must be downloaded and extracted. If Bash on Windows is available, it is possible to run the OSX/Linux workflow. The following steps prepares the environment:
# Install support programs for the build and test commands
sudo apt-get install make git subversion mercurial
# Install nodejs and NPM within the WSL
wget -qO- https://deb.nodesource.com/setup_8.x | sudo bash
sudo apt-get install nodejs
# Install dev dependencies
sudo npm install -g mocha voc blanket xlsjs
Tests
(click to show)
The test_misc target (make test_misc on Linux/OSX / make misc on Windows) runs the targeted feature tests. It should take 5-10 seconds to perform feature tests without testing against the entire test battery. New features should be accompanied with tests for the relevant file formats and features.
For tests involving the read side, an appropriate feature test would involve reading an existing file and checking the resulting workbook object. If a parameter is involved, files should be read with different values to verify that the feature is working as expected.
For tests involving a new write feature which can already be parsed, appropriate feature tests would involve writing a workbook with the feature and then opening and verifying that the feature is preserved.
For tests involving a new write feature without an existing read ability, please add a feature test to the kitchen sink tests/write.js.
License
Please consult the attached LICENSE file for details. All rights not explicitly granted by the Apache 2.0 License are reserved by the Original Author.
References
OSP-covered Specifications (click to show)
MS-CFB: Compound File Binary File FormatMS-CTXLS: Excel Custom Toolbar Binary File FormatMS-EXSPXML3: Excel Calculation Version 2 Web Service XML SchemaMS-ODATA: Open Data Protocol (OData)MS-ODRAW: Office Drawing Binary File FormatMS-ODRAWXML: Office Drawing Extensions to Office Open XML StructureMS-OE376: Office Implementation Information for ECMA-376 Standards SupportMS-OFFCRYPTO: Office Document Cryptography StructureMS-OI29500: Office Implementation Information for ISO/IEC 29500 Standards SupportMS-OLEDS: Object Linking and Embedding (OLE) Data StructuresMS-OLEPS: Object Linking and Embedding (OLE) Property Set Data StructuresMS-OODF3: Office Implementation Information for ODF 1.2 Standards SupportMS-OSHARED: Office Common Data Types and Objects StructuresMS-OVBA: Office VBA File Format StructureMS-XLDM: Spreadsheet Data Model File FormatMS-XLS: Excel Binary File Format (.xls) Structure SpecificationMS-XLSB: Excel (.xlsb) Binary File FormatMS-XLSX: Excel (.xlsx) Extensions to the Office Open XML SpreadsheetML File FormatXLS: Microsoft Office Excel 97-2007 Binary File Format SpecificationRTF: Rich Text Format- ISO/IEC 29500:2012(E) "Information technology — Document description and processing languages — Office Open XML File Formats"
- Open Document Format for Office Applications Version 1.2 (29 September 2011)
- Worksheet File Format (From Lotus) December 1984
Download Details:
Author: SheetJS
Source Code: https://github.com/SheetJS/sheetjs
License: Apache-2.0 License
1644415980
SheetJS Community Edition - Spreadsheet Data Toolkit
The SheetJS Community Edition offers battle-tested open-source solutions for extracting useful data from almost any complex spreadsheet and generating new spreadsheets that will work with legacy and modern software alike.
SheetJS Pro offers solutions beyond data processing: Edit complex templates with ease; let out your inner Picasso with styling; make custom sheets with images/graphs/PivotTables; evaluate formula expressions and port calculations to web apps; automate common spreadsheet tasks, and much more!
Browser Test and Support Matrix
Supported File Formats
Diagram Legend (click to show)
Table of Contents
Expand to show Table of Contents
- Getting Started
- Acquiring and Extracting Data
- Working with the Workbook
- Writing Workbooks
- Interface
- Common Spreadsheet Format
- Parsing Options
- Writing Options
- Utility Functions
- File Formats
- Testing
- Contributing
- License
- References
Getting Started
Installation
The complete browser standalone build is saved to dist/xlsx.full.min.js and can be directly added to a page with a script tag:
<script lang="javascript" src="dist/xlsx.full.min.js"></script>
CDN Availability (click to show)
| CDN | URL |
|---|---|
unpkg | https://unpkg.com/xlsx/ |
jsDelivr | https://jsdelivr.com/package/npm/xlsx |
CDNjs | https://cdnjs.com/libraries/xlsx |
packd | https://bundle.run/xlsx@latest?name=XLSX |
For example, unpkg makes the latest version available at:
<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
Browser builds (click to show)
The complete single-file version is generated at dist/xlsx.full.min.js
A slimmer build is generated at dist/xlsx.mini.min.js. Compared to full build:
- codepage library skipped (no support for XLS encodings)
- XLSX compression option not currently available
- no support for XLSB / XLS / Lotus 1-2-3 / SpreadsheetML 2003
- node stream utils removed
Webpack and Browserify builds include optional modules by default. Webpack can be configured to remove support with resolve.alias:
/* uncomment the lines below to remove support */
resolve: {
alias: { "./dist/cpexcel.js": "" } // <-- omit international support
}
With npm:
$ npm install xlsx
With bower:
$ bower install js-xlsx
dist/xlsx.extendscript.js is an ExtendScript build for Photoshop and InDesign that is included in the npm package. It can be directly referenced with a #include directive:
#include "xlsx.extendscript.js"
Internet Explorer and ECMAScript 3 Compatibility (click to show)
For broad compatibility with JavaScript engines, the library is written using ECMAScript 3 language dialect as well as some ES5 features like Array#forEach. Older browsers require shims to provide missing functions.
To use the shim, add the shim before the script tag that loads xlsx.js:
<!-- add the shim first -->
<script type="text/javascript" src="shim.min.js"></script>
<!-- after the shim is referenced, add the library -->
<script type="text/javascript" src="xlsx.full.min.js"></script>
The script also includes IE_LoadFile and IE_SaveFile for loading and saving files in Internet Explorer versions 6-9. The xlsx.extendscript.js script bundles the shim in a format suitable for Photoshop and other Adobe products.
Usage
Most scenarios involving spreadsheets and data can be broken into 5 parts:
Acquire Data: Data may be stored anywhere: local or remote files, databases, HTML TABLE, or even generated programmatically in the web browser.
Extract Data: For spreadsheet files, this involves parsing raw bytes to read the cell data. For general JS data, this involves reshaping the data.
Process Data: From generating summary statistics to cleaning data records, this step is the heart of the problem.
Package Data: This can involve making a new spreadsheet or serializing with JSON.stringify or writing XML or simply flattening data for UI tools.
Release Data: Spreadsheet files can be uploaded to a server or written locally. Data can be presented to users in an HTML TABLE or data grid.
A common problem involves generating a valid spreadsheet export from data stored in an HTML table. In this example, an HTML TABLE on the page will be scraped, a row will be added to the bottom with the date of the report, and a new file will be generated and downloaded locally. XLSX.writeFile takes care of packaging the data and attempting a local download:
// Acquire Data (reference to the HTML table)
var table_elt = document.getElementById("my-table-id");
// Extract Data (create a workbook object from the table)
var workbook = XLSX.utils.table_to_book(table_elt);
// Process Data (add a new row)
var ws = workbook.Sheets["Sheet1"];
XLSX.utils.sheet_add_aoa(ws, [["Created "+new Date().toISOString()]], {origin:-1});
// Package and Release Data (`writeFile` tries to write and save an XLSB file)
XLSX.writeFile(workbook, "Report.xlsb");
This library tries to simplify steps 2 and 4 with functions to extract useful data from spreadsheet files (read / readFile) and generate new spreadsheet files from data (write / writeFile). Additional utility functions like table_to_book work with other common data sources like HTML tables.
This documentation and various demo projects cover a number of common scenarios and approaches for steps 1 and 5.
Utility functions help with step 3.
The Zen of SheetJS
Data processing should fit in any workflow
The library does not impose a separate lifecycle. It fits nicely in websites and apps built using any framework. The plain JS data objects play nice with Web Workers and future APIs.
"Acquiring and Extracting Data" describes solutions for common data import scenarios.
"Writing Workbooks" describes solutions for common data export scenarios involving actual spreadsheet files.
"Utility Functions" details utility functions for translating JSON Arrays and other common JS structures into worksheet objects.
JavaScript is a powerful language for data processing
The "Common Spreadsheet Format" is a simple object representation of the core concepts of a workbook. The various functions in the library provide low-level tools for working with the object.
For friendly JS processing, there are utility functions for converting parts of a worksheet to/from an Array of Arrays. The following example combines powerful JS Array methods with a network request library to download data, select the information we want and create a workbook file:
Get Data from a JSON Endpoint and Generate a Workbook (click to show)
The goal is to generate a XLSB workbook of US President names and birthdays.
Acquire Data
Raw Data
https://theunitedstates.io/congress-legislators/executive.json has the desired data. For example, John Adams:
{
"id": { /* (data omitted) */ },
"name": {
"first": "John", // <-- first name
"last": "Adams" // <-- last name
},
"bio": {
"birthday": "1735-10-19", // <-- birthday
"gender": "M"
},
"terms": [
{ "type": "viceprez", /* (other fields omitted) */ },
{ "type": "viceprez", /* (other fields omitted) */ },
{ "type": "prez", /* (other fields omitted) */ } // <-- look for "prez"
]
}
Filtering for Presidents
The dataset includes Aaron Burr, a Vice President who was never President!
Array#filter creates a new array with the desired rows. A President served at least one term with type set to "prez". To test if a particular row has at least one "prez" term, Array#some is another native JS function. The complete filter would be:
const prez = raw_data.filter(row => row.terms.some(term => term.type === "prez"));
Lining up the data
For this example, the name will be the first name combined with the last name (row.name.first + " " + row.name.last) and the birthday will be the subfield row.bio.birthday. Using Array#map, the dataset can be massaged in one call:
const rows = prez.map(row => ({
name: row.name.first + " " + row.name.last,
birthday: row.bio.birthday
}));
The result is an array of "simple" objects with no nesting:
[
{ name: "George Washington", birthday: "1732-02-22" },
{ name: "John Adams", birthday: "1735-10-19" },
// ... one row per President
]
Extract Data
With the cleaned dataset, XLSX.utils.json_to_sheet generates a worksheet:
const worksheet = XLSX.utils.json_to_sheet(rows);
XLSX.utils.book_new creates a new workbook and XLSX.utils.book_append_sheet appends a worksheet to the workbook. The new worksheet will be called "Dates":
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "Dates");
Process Data
Fixing headers
By default, json_to_sheet creates a worksheet with a header row. In this case, the headers come from the JS object keys: "name" and "birthday".
The headers are in cells A1 and B1. XLSX.utils.sheet_add_aoa can write text values to the existing worksheet starting at cell A1:
XLSX.utils.sheet_add_aoa(worksheet, [["Name", "Birthday"]], { origin: "A1" });
Fixing Column Widths
Some of the names are longer than the default column width. Column widths are set by setting the "!cols" worksheet property.
The following line sets the width of column A to approximately 10 characters:
worksheet["!cols"] = [ { wch: 10 } ]; // set column A width to 10 characters
One Array#reduce call over rows can calculate the maximum width:
const max_width = rows.reduce((w, r) => Math.max(w, r.name.length), 10);
worksheet["!cols"] = [ { wch: max_width } ];
Note: If the starting point was a file or HTML table, XLSX.utils.sheet_to_json will generate an array of JS objects.
Package and Release Data
XLSX.writeFile creates a spreadsheet file and tries to write it to the system. In the browser, it will try to prompt the user to download the file. In NodeJS, it will write to the local directory.
XLSX.writeFile(workbook, "Presidents.xlsx");
Complete Example
// Uncomment the next line for use in NodeJS:
// const XLSX = require("xlsx"), axios = require("axios");
(async() => {
/* fetch JSON data and parse */
const url = "https://theunitedstates.io/congress-legislators/executive.json";
const raw_data = (await axios(url, {responseType: "json"})).data;
/* filter for the Presidents */
const prez = raw_data.filter(row => row.terms.some(term => term.type === "prez"));
/* flatten objects */
const rows = prez.map(row => ({
name: row.name.first + " " + row.name.last,
birthday: row.bio.birthday
}));
/* generate worksheet and workbook */
const worksheet = XLSX.utils.json_to_sheet(rows);
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "Dates");
/* fix headers */
XLSX.utils.sheet_add_aoa(worksheet, [["Name", "Birthday"]], { origin: "A1" });
/* calculate column width */
const max_width = rows.reduce((w, r) => Math.max(w, r.name.length), 10);
worksheet["!cols"] = [ { wch: max_width } ];
/* create an XLSX file and try to save to Presidents.xlsx */
XLSX.writeFile(workbook, "Presidents.xlsx");
})();
For use in the web browser, assuming the snippet is saved to snippet.js, script tags should be used to include the axios and xlsx standalone builds:
<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="snippet.js"></script>
File formats are implementation details
The parser covers a wide gamut of common spreadsheet file formats to ensure that "HTML-saved-as-XLS" files work as well as actual XLS or XLSX files.
The writer supports a number of common output formats for broad compatibility with the data ecosystem.
To the greatest extent possible, data processing code should not have to worry about the specific file formats involved.
JS Ecosystem Demos
The demos directory includes sample projects for:
Frameworks and APIs
angularjsangular and ionicknockoutmeteorreact and react-nativevue 2.x and weexXMLHttpRequest and fetchnodejs serverdatabases and key/value storestyped arrays and math
Bundlers and Tooling
Platforms and Integrations
electron applicationnw.js applicationChrome / Chromium extensionsAdobe ExtendScriptHeadless Browserscanvas-datagridx-spreadsheetSwift JSC and other engines"serverless" functionsinternet explorer
Other examples are included in the showcase.
Acquiring and Extracting Data
Parsing Workbooks
API
Extract data from spreadsheet bytes
var workbook = XLSX.read(data, opts);
The read method can extract data from spreadsheet bytes stored in a JS string, "binary string", NodeJS buffer or typed array (Uint8Array or ArrayBuffer).
Read spreadsheet bytes from a local file and extract data
var workbook = XLSX.readFile(filename, opts);
The readFile method attempts to read a spreadsheet file at the supplied path. Browsers generally do not allow reading files in this way (it is deemed a security risk), and attempts to read files in this way will throw an error.
The second opts argument is optional. "Parsing Options" covers the supported properties and behaviors.
Examples
Here are a few common scenarios (click on each subtitle to see the code):
Local file in a NodeJS server (click to show)
readFile uses fs.readFileSync under the hood:
var XLSX = require("xlsx");
var workbook = XLSX.readFile("test.xlsx");
For Node ESM, the readFile helper is not enabled. Instead, fs.readFileSync should be used to read the file data as a Buffer for use with XLSX.read:
import { readFileSync } from "fs";
import { read } from "xlsx/xlsx.mjs";
const buf = readFileSync("test.xlsx");
/* buf is a Buffer */
const workbook = read(buf);
User-submitted file in a web page ("Drag-and-Drop") (click to show)
For modern websites targeting Chrome 76+, File#arrayBuffer is recommended:
// XLSX is a global from the standalone script
async function handleDropAsync(e) {
e.stopPropagation(); e.preventDefault();
const f = e.dataTransfer.files[0];
/* f is a File */
const data = await f.arrayBuffer();
/* data is an ArrayBuffer */
const workbook = XLSX.read(data);
/* DO SOMETHING WITH workbook HERE */
}
drop_dom_element.addEventListener("drop", handleDropAsync, false);
For maximal compatibility, the FileReader API should be used:
function handleDrop(e) {
e.stopPropagation(); e.preventDefault();
var f = e.dataTransfer.files[0];
/* f is a File */
var reader = new FileReader();
reader.onload = function(e) {
var data = e.target.result;
/* reader.readAsArrayBuffer(file) -> data will be an ArrayBuffer */
var workbook = XLSX.read(data);
/* DO SOMETHING WITH workbook HERE */
};
reader.readAsArrayBuffer(f);
}
drop_dom_element.addEventListener("drop", handleDrop, false);
https://oss.sheetjs.com/sheetjs/ demonstrates the FileReader technique.
User-submitted file with an HTML INPUT element (click to show)
Starting with an HTML INPUT element with type="file":
<input type="file" id="input_dom_element">
For modern websites targeting Chrome 76+, Blob#arrayBuffer is recommended:
// XLSX is a global from the standalone script
async function handleFileAsync(e) {
const file = e.target.files[0];
const data = await file.arrayBuffer();
/* data is an ArrayBuffer */
const workbook = XLSX.read(data);
/* DO SOMETHING WITH workbook HERE */
}
input_dom_element.addEventListener("change", handleFileAsync, false);
For broader support (including IE10+), the FileReader approach is recommended:
function handleFile(e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var data = e.target.result;
/* reader.readAsArrayBuffer(file) -> data will be an ArrayBuffer */
var workbook = XLSX.read(e.target.result);
/* DO SOMETHING WITH workbook HERE */
};
reader.readAsArrayBuffer(file);
}
input_dom_element.addEventListener("change", handleFile, false);
The oldie demo shows an IE-compatible fallback scenario.
Fetching a file in the web browser ("Ajax") (click to show)
For modern websites targeting Chrome 42+, fetch is recommended:
// XLSX is a global from the standalone script
(async() => {
const url = "http://oss.sheetjs.com/test_files/formula_stress_test.xlsx";
const data = await (await fetch(url)).arrayBuffer();
/* data is an ArrayBuffer */
const workbook = XLSX.read(data);
/* DO SOMETHING WITH workbook HERE */
})();
For broader support, the XMLHttpRequest approach is recommended:
var url = "http://oss.sheetjs.com/test_files/formula_stress_test.xlsx";
/* set up async GET request */
var req = new XMLHttpRequest();
req.open("GET", url, true);
req.responseType = "arraybuffer";
req.onload = function(e) {
var workbook = XLSX.read(req.response);
/* DO SOMETHING WITH workbook HERE */
};
req.send();
The xhr demo includes a longer discussion and more examples.
http://oss.sheetjs.com/sheetjs/ajax.html shows fallback approaches for IE6+.
Local file in a PhotoShop or InDesign plugin (click to show)
readFile wraps the File logic in Photoshop and other ExtendScript targets. The specified path should be an absolute path:
#include "xlsx.extendscript.js"
/* Read test.xlsx from the Documents folder */
var workbook = XLSX.readFile(Folder.myDocuments + "/test.xlsx");
The extendscript demo includes a more complex example.
Local file in an Electron app (click to show)
readFile can be used in the renderer process:
/* From the renderer process */
var XLSX = require("xlsx");
var workbook = XLSX.readFile(path);
Electron APIs have changed over time. The electron demo shows a complete example and details the required version-specific settings.
Local file in a mobile app with React Native (click to show)
The react demo includes a sample React Native app.
Since React Native does not provide a way to read files from the filesystem, a third-party library must be used. The following libraries have been tested:
The base64 encoding returns strings compatible with the base64 type:
import XLSX from "xlsx";
import { FileSystem } from "react-native-file-access";
const b64 = await FileSystem.readFile(path, "base64");
/* b64 is a base64 string */
const workbook = XLSX.read(b64, {type: "base64"});
The ascii encoding returns binary strings compatible with the binary type:
import XLSX from "xlsx";
import { readFile } from "react-native-fs";
const bstr = await readFile(path, "ascii");
/* bstr is a binary string */
const workbook = XLSX.read(bstr, {type: "binary"});
NodeJS Server File Uploads (click to show)
read can accept a NodeJS buffer. readFile can read files generated by a HTTP POST request body parser like formidable:
const XLSX = require("xlsx");
const http = require("http");
const formidable = require("formidable");
const server = http.createServer((req, res) => {
const form = new formidable.IncomingForm();
form.parse(req, (err, fields, files) => {
/* grab the first file */
const f = Object.entries(files)[0][1];
const path = f.filepath;
const workbook = XLSX.readFile(path);
/* DO SOMETHING WITH workbook HERE */
});
}).listen(process.env.PORT || 7262);
The server demo has more advanced examples.
Download files in a NodeJS process (click to show)
Node 17.5 and 18.0 have native support for fetch:
const XLSX = require("xlsx");
const data = await (await fetch(url)).arrayBuffer();
/* data is an ArrayBuffer */
const workbook = XLSX.read(data);
For broader compatibility, third-party modules are recommended.
request requires a null encoding to yield Buffers:
var XLSX = require("xlsx");
var request = require("request");
request({url: url, encoding: null}, function(err, resp, body) {
var workbook = XLSX.read(body);
/* DO SOMETHING WITH workbook HERE */
});
axios works the same way in browser and in NodeJS:
const XLSX = require("xlsx");
const axios = require("axios");
(async() => {
const res = await axios.get(url, {responseType: "arraybuffer"});
/* res.data is a Buffer */
const workbook = XLSX.read(res.data);
/* DO SOMETHING WITH workbook HERE */
})();
Download files in an Electron app (click to show)
The net module in the main process can make HTTP/HTTPS requests to external resources. Responses should be manually concatenated using Buffer.concat:
const XLSX = require("xlsx");
const { net } = require("electron");
const req = net.request(url);
req.on("response", (res) => {
const bufs = []; // this array will collect all of the buffers
res.on("data", (chunk) => { bufs.push(chunk); });
res.on("end", () => {
const workbook = XLSX.read(Buffer.concat(bufs));
/* DO SOMETHING WITH workbook HERE */
});
});
req.end();
Readable Streams in NodeJS (click to show)
When dealing with Readable Streams, the easiest approach is to buffer the stream and process the whole thing at the end:
var fs = require("fs");
var XLSX = require("xlsx");
function process_RS(stream, cb) {
var buffers = [];
stream.on("data", function(data) { buffers.push(data); });
stream.on("end", function() {
var buffer = Buffer.concat(buffers);
var workbook = XLSX.read(buffer, {type:"buffer"});
/* DO SOMETHING WITH workbook IN THE CALLBACK */
cb(workbook);
});
}
ReadableStream in the browser (click to show)
When dealing with ReadableStream, the easiest approach is to buffer the stream and process the whole thing at the end:
// XLSX is a global from the standalone script
async function process_RS(stream) {
/* collect data */
const buffers = [];
const reader = stream.getReader();
for(;;) {
const res = await reader.read();
if(res.value) buffers.push(res.value);
if(res.done) break;
}
/* concat */
const out = new Uint8Array(buffers.reduce((acc, v) => acc + v.length, 0));
let off = 0;
for(const u8 of arr) {
out.set(u8, off);
off += u8.length;
}
return out;
}
const data = await process_RS(stream);
/* data is Uint8Array */
const workbook = XLSX.read(data);
More detailed examples are covered in the included demos
Processing JSON and JS Data
JSON and JS data tend to represent single worksheets. This section will use a few utility functions to generate workbooks:
Create a new Worksheet
var workbook = XLSX.utils.book_new();
The book_new utility function creates an empty workbook with no worksheets.
Append a Worksheet to a Workbook
XLSX.utils.book_append_sheet(workbook, worksheet, sheet_name);
The book_append_sheet utility function appends a worksheet to the workbook. The third argument specifies the desired worksheet name. Multiple worksheets can be added to a workbook by calling the function multiple times.
API
Create a worksheet from an array of arrays of JS values
var worksheet = XLSX.utils.aoa_to_sheet(aoa, opts);
The aoa_to_sheet utility function walks an "array of arrays" in row-major order, generating a worksheet object. The following snippet generates a sheet with cell A1 set to the string A1, cell B1 set to B2, etc:
var worksheet = XLSX.utils.aoa_to_sheet([
["A1", "B1", "C1"],
["A2", "B2", "C2"],
["A3", "B3", "C3"]
])
"Array of Arrays Input" describes the function and the optional opts argument in more detail.
Create a worksheet from an array of JS objects
var worksheet = XLSX.utils.json_to_sheet(jsa, opts);
The json_to_sheet utility function walks an array of JS objects in order, generating a worksheet object. By default, it will generate a header row and one row per object in the array. The optional opts argument has settings to control the column order and header output.
"Array of Objects Input" describes the function and the optional opts argument in more detail.
Examples
"Zen of SheetJS" contains a detailed example "Get Data from a JSON Endpoint and Generate a Workbook"
The database demo includes examples of working with databases and query results.
Processing HTML Tables
API
Create a worksheet by scraping an HTML TABLE in the page
var worksheet = XLSX.utils.table_to_sheet(dom_element, opts);
The table_to_sheet utility function takes a DOM TABLE element and iterates through the rows to generate a worksheet. The opts argument is optional. "HTML Table Input" describes the function in more detail.
Create a workbook by scraping an HTML TABLE in the page
var workbook = XLSX.utils.table_to_book(dom_element, opts);
The table_to_book utility function follows the same logic as table_to_sheet. After generating a worksheet, it creates a blank workbook and appends the spreadsheet.
The options argument supports the same options as table_to_sheet, with the addition of a sheet property to control the worksheet name. If the property is missing or no options are specified, the default name Sheet1 is used.
Examples
Here are a few common scenarios (click on each subtitle to see the code):
HTML TABLE element in a webpage (click to show)
<!-- include the standalone script and shim. this uses the UNPKG CDN -->
<script src="https://unpkg.com/xlsx/dist/shim.min.js"></script>
<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
<!-- example table with id attribute -->
<table id="tableau">
<tr><td>Sheet</td><td>JS</td></tr>
<tr><td>12345</td><td>67</td></tr>
</table>
<!-- this block should appear after the table HTML and the standalone script -->
<script type="text/javascript">
var workbook = XLSX.utils.table_to_book(document.getElementById("tableau"));
/* DO SOMETHING WITH workbook HERE */
</script>
Multiple tables on a web page can be converted to individual worksheets:
/* create new workbook */
var workbook = XLSX.utils.book_new();
/* convert table "table1" to worksheet named "Sheet1" */
var sheet1 = XLSX.utils.table_to_sheet(document.getElementById("table1"));
XLSX.utils.book_append_sheet(workbook, sheet1, "Sheet1");
/* convert table "table2" to worksheet named "Sheet2" */
var sheet2 = XLSX.utils.table_to_sheet(document.getElementById("table2"));
XLSX.utils.book_append_sheet(workbook, sheet2, "Sheet2");
/* workbook now has 2 worksheets */
Alternatively, the HTML code can be extracted and parsed:
var htmlstr = document.getElementById("tableau").outerHTML;
var workbook = XLSX.read(htmlstr, {type:"string"});
Chrome/Chromium Extension (click to show)
The chrome demo shows a complete example and details the required permissions and other settings.
In an extension, it is recommended to generate the workbook in a content script and pass the object back to the extension:
/* in the worker script */
chrome.runtime.onMessage.addListener(function(msg, sender, cb) {
/* pass a message like { sheetjs: true } from the extension to scrape */
if(!msg || !msg.sheetjs) return;
/* create a new workbook */
var workbook = XLSX.utils.book_new();
/* loop through each table element */
var tables = document.getElementsByTagName("table")
for(var i = 0; i < tables.length; ++i) {
var worksheet = XLSX.utils.table_to_sheet(tables[i]);
XLSX.utils.book_append_sheet(workbook, worksheet, "Table" + i);
}
/* pass back to the extension */
return cb(workbook);
});
Working with the Workbook
The full object format is described later in this README.
Reading a specific cell (click to show)
This example extracts the value stored in cell A1 from the first worksheet:
var first_sheet_name = workbook.SheetNames[0];
var address_of_cell = 'A1';
/* Get worksheet */
var worksheet = workbook.Sheets[first_sheet_name];
/* Find desired cell */
var desired_cell = worksheet[address_of_cell];
/* Get the value */
var desired_value = (desired_cell ? desired_cell.v : undefined);
Adding a new worksheet to a workbook (click to show)
This example uses XLSX.utils.aoa_to_sheet to make a sheet and XLSX.utils.book_append_sheet to append the sheet to the workbook:
var ws_name = "SheetJS";
/* make worksheet */
var ws_data = [
[ "S", "h", "e", "e", "t", "J", "S" ],
[ 1 , 2 , 3 , 4 , 5 ]
];
var ws = XLSX.utils.aoa_to_sheet(ws_data);
/* Add the worksheet to the workbook */
XLSX.utils.book_append_sheet(wb, ws, ws_name);
Creating a new workbook from scratch (click to show)
The workbook object contains a SheetNames array of names and a Sheets object mapping sheet names to sheet objects. The XLSX.utils.book_new utility function creates a new workbook object:
/* create a new blank workbook */
var wb = XLSX.utils.book_new();
The new workbook is blank and contains no worksheets. The write functions will error if the workbook is empty.
Parsing and Writing Examples
https://sheetjs.com/demos/modify.html read + modify + write files
https://github.com/SheetJS/sheetjs/blob/HEAD/bin/xlsx.njs node
The node version installs a command line tool xlsx which can read spreadsheet files and output the contents in various formats. The source is available at xlsx.njs in the bin directory.
Some helper functions in XLSX.utils generate different views of the sheets:
XLSX.utils.sheet_to_csvgenerates CSVXLSX.utils.sheet_to_txtgenerates UTF16 Formatted TextXLSX.utils.sheet_to_htmlgenerates HTMLXLSX.utils.sheet_to_jsongenerates an array of objectsXLSX.utils.sheet_to_formulaegenerates a list of formulae
Writing Workbooks
For writing, the first step is to generate output data. The helper functions write and writeFile will produce the data in various formats suitable for dissemination. The second step is to actual share the data with the end point. Assuming workbook is a workbook object:
nodejs write a file (click to show)
XLSX.writeFile uses fs.writeFileSync in server environments:
if(typeof require !== 'undefined') XLSX = require('xlsx');
/* output format determined by filename */
XLSX.writeFile(workbook, 'out.xlsb');
/* at this point, out.xlsb is a file that you can distribute */
Photoshop ExtendScript write a file (click to show)
writeFile wraps the File logic in Photoshop and other ExtendScript targets. The specified path should be an absolute path:
#include "xlsx.extendscript.js"
/* output format determined by filename */
XLSX.writeFile(workbook, 'out.xlsx');
/* at this point, out.xlsx is a file that you can distribute */
The extendscript demo includes a more complex example.
Browser add TABLE element to page (click to show)
The sheet_to_html utility function generates HTML code that can be added to any DOM element.
var worksheet = workbook.Sheets[workbook.SheetNames[0]];
var container = document.getElementById('tableau');
container.innerHTML = XLSX.utils.sheet_to_html(worksheet);
Browser upload file (ajax) (click to show)
A complete example using XHR is included in the XHR demo, along with examples for fetch and wrapper libraries. This example assumes the server can handle Base64-encoded files (see the demo for a basic nodejs server):
/* in this example, send a base64 string to the server */
var wopts = { bookType:'xlsx', bookSST:false, type:'base64' };
var wbout = XLSX.write(workbook,wopts);
var req = new XMLHttpRequest();
req.open("POST", "/upload", true);
var formdata = new FormData();
formdata.append('file', 'test.xlsx'); // <-- server expects `file` to hold name
formdata.append('data', wbout); // <-- `data` holds the base64-encoded data
req.send(formdata);
Browser save file (click to show)
XLSX.writeFile wraps a few techniques for triggering a file save:
URLbrowser API creates an object URL for the file, which the library uses by creating a link and forcing a click. It is supported in modern browsers.msSaveBlobis an IE10+ API for triggering a file save.IE_FileSaveuses VBScript and ActiveX to write a file in IE6+ for Windows XP and Windows 7. The shim must be included in the containing HTML page.
There is no standard way to determine if the actual file has been downloaded.
/* output format determined by filename */
XLSX.writeFile(workbook, 'out.xlsb');
/* at this point, out.xlsb will have been downloaded */
Browser save file (compatibility) (click to show)
XLSX.writeFile techniques work for most modern browsers as well as older IE. For much older browsers, there are workarounds implemented by wrapper libraries.
FileSaver.js implements saveAs. Note: XLSX.writeFile will automatically call saveAs if available.
/* bookType can be any supported output type */
var wopts = { bookType:'xlsx', bookSST:false, type:'array' };
var wbout = XLSX.write(workbook,wopts);
/* the saveAs call downloads a file on the local machine */
saveAs(new Blob([wbout],{type:"application/octet-stream"}), "test.xlsx");
Downloadify uses a Flash SWF button to generate local files, suitable for environments where ActiveX is unavailable:
Downloadify.create(id,{
/* other options are required! read the downloadify docs for more info */
filename: "test.xlsx",
data: function() { return XLSX.write(wb, {bookType:"xlsx", type:'base64'}); },
append: false,
dataType: 'base64'
});
The oldie demo shows an IE-compatible fallback scenario.
The included demos cover mobile apps and other special deployments.
Writing Examples
- http://sheetjs.com/demos/table.html exporting an HTML table
- http://sheetjs.com/demos/writexlsx.html generates a simple file
Streaming Write
The streaming write functions are available in the XLSX.stream object. They take the same arguments as the normal write functions but return a Readable Stream. They are only exposed in NodeJS.
XLSX.stream.to_csvis the streaming version ofXLSX.utils.sheet_to_csv.XLSX.stream.to_htmlis the streaming version ofXLSX.utils.sheet_to_html.XLSX.stream.to_jsonis the streaming version ofXLSX.utils.sheet_to_json.
nodejs convert to CSV and write file (click to show)
var output_file_name = "out.csv";
var stream = XLSX.stream.to_csv(worksheet);
stream.pipe(fs.createWriteStream(output_file_name));
nodejs write JSON stream to screen (click to show)
/* to_json returns an object-mode stream */
var stream = XLSX.stream.to_json(worksheet, {raw:true});
/* the following stream converts JS objects to text via JSON.stringify */
var conv = new Transform({writableObjectMode:true});
conv._transform = function(obj, e, cb){ cb(null, JSON.stringify(obj) + "\n"); };
stream.pipe(conv); conv.pipe(process.stdout);
https://github.com/sheetjs/sheetaki pipes write streams to nodejs response.
Interface
XLSX is the exposed variable in the browser and the exported node variable
XLSX.version is the version of the library (added by the build script).
XLSX.SSF is an embedded version of the format library.
Parsing functions
XLSX.read(data, read_opts) attempts to parse data.
XLSX.readFile(filename, read_opts) attempts to read filename and parse.
Parse options are described in the Parsing Options section.
Writing functions
XLSX.write(wb, write_opts) attempts to write the workbook wb
XLSX.writeFile(wb, filename, write_opts) attempts to write wb to filename. In browser-based environments, it will attempt to force a client-side download.
XLSX.writeFileAsync(wb, filename, o, cb) attempts to write wb to filename. If o is omitted, the writer will use the third argument as the callback.
XLSX.stream contains a set of streaming write functions.
Write options are described in the Writing Options section.
Utilities
Utilities are available in the XLSX.utils object and are described in the Utility Functions section:
Constructing:
book_newcreates an empty workbookbook_append_sheetadds a worksheet to a workbook
Importing:
aoa_to_sheetconverts an array of arrays of JS data to a worksheet.json_to_sheetconverts an array of JS objects to a worksheet.table_to_sheetconverts a DOM TABLE element to a worksheet.sheet_add_aoaadds an array of arrays of JS data to an existing worksheet.sheet_add_jsonadds an array of JS objects to an existing worksheet.
Exporting:
sheet_to_jsonconverts a worksheet object to an array of JSON objects.sheet_to_csvgenerates delimiter-separated-values output.sheet_to_txtgenerates UTF16 formatted text.sheet_to_htmlgenerates HTML output.sheet_to_formulaegenerates a list of the formulae (with value fallbacks).
Cell and cell address manipulation:
format_cellgenerates the text value for a cell (using number formats).encode_row / decode_rowconverts between 0-indexed rows and 1-indexed rows.encode_col / decode_colconverts between 0-indexed columns and column names.encode_cell / decode_cellconverts cell addresses.encode_range / decode_rangeconverts cell ranges.
Common Spreadsheet Format
SheetJS conforms to the Common Spreadsheet Format (CSF):
General Structures
Cell address objects are stored as {c:C, r:R} where C and R are 0-indexed column and row numbers, respectively. For example, the cell address B5 is represented by the object {c:1, r:4}.
Cell range objects are stored as {s:S, e:E} where S is the first cell and E is the last cell in the range. The ranges are inclusive. For example, the range A3:B7 is represented by the object {s:{c:0, r:2}, e:{c:1, r:6}}. Utility functions perform a row-major order walk traversal of a sheet range:
for(var R = range.s.r; R <= range.e.r; ++R) {
for(var C = range.s.c; C <= range.e.c; ++C) {
var cell_address = {c:C, r:R};
/* if an A1-style address is needed, encode the address */
var cell_ref = XLSX.utils.encode_cell(cell_address);
}
}
Cell Object
Cell objects are plain JS objects with keys and values following the convention:
| Key | Description |
|---|---|
v | raw value (see Data Types section for more info) |
w | formatted text (if applicable) |
t | type: b Boolean, e Error, n Number, d Date, s Text, z Stub |
f | cell formula encoded as an A1-style string (if applicable) |
F | range of enclosing array if formula is array formula (if applicable) |
r | rich text encoding (if applicable) |
h | HTML rendering of the rich text (if applicable) |
c | comments associated with the cell |
z | number format string associated with the cell (if requested) |
l | cell hyperlink object (.Target holds link, .Tooltip is tooltip) |
s | the style/theme of the cell (if applicable) |
Built-in export utilities (such as the CSV exporter) will use the w text if it is available. To change a value, be sure to delete cell.w (or set it to undefined) before attempting to export. The utilities will regenerate the w text from the number format (cell.z) and the raw value if possible.
The actual array formula is stored in the f field of the first cell in the array range. Other cells in the range will omit the f field.
Data Types
The raw value is stored in the v value property, interpreted based on the t type property. This separation allows for representation of numbers as well as numeric text. There are 6 valid cell types:
| Type | Description |
|---|---|
b | Boolean: value interpreted as JS boolean |
e | Error: value is a numeric code and w property stores common name ** |
n | Number: value is a JS number ** |
d | Date: value is a JS Date object or string to be parsed as Date ** |
s | Text: value interpreted as JS string and written as text ** |
z | Stub: blank stub cell that is ignored by data processing utilities ** |
Error values and interpretation (click to show)
| Value | Error Meaning |
|---|---|
0x00 | #NULL! |
0x07 | #DIV/0! |
0x0F | #VALUE! |
0x17 | #REF! |
0x1D | #NAME? |
0x24 | #NUM! |
0x2A | #N/A |
0x2B | #GETTING_DATA |
Type n is the Number type. This includes all forms of data that Excel stores as numbers, such as dates/times and Boolean fields. Excel exclusively uses data that can be fit in an IEEE754 floating point number, just like JS Number, so the v field holds the raw number. The w field holds formatted text. Dates are stored as numbers by default and converted with XLSX.SSF.parse_date_code.
Type d is the Date type, generated only when the option cellDates is passed. Since JSON does not have a natural Date type, parsers are generally expected to store ISO 8601 Date strings like you would get from date.toISOString(). On the other hand, writers and exporters should be able to handle date strings and JS Date objects. Note that Excel disregards timezone modifiers and treats all dates in the local timezone. The library does not correct for this error.
Type s is the String type. Values are explicitly stored as text. Excel will interpret these cells as "number stored as text". Generated Excel files automatically suppress that class of error, but other formats may elicit errors.
Type z represents blank stub cells. They are generated in cases where cells have no assigned value but hold comments or other metadata. They are ignored by the core library data processing utility functions. By default these cells are not generated; the parser sheetStubs option must be set to true.
Dates
Excel Date Code details (click to show)
By default, Excel stores dates as numbers with a format code that specifies date processing. For example, the date 19-Feb-17 is stored as the number 42785 with a number format of d-mmm-yy. The SSF module understands number formats and performs the appropriate conversion.
XLSX also supports a special date type d where the data is an ISO 8601 date string. The formatter converts the date back to a number.
The default behavior for all parsers is to generate number cells. Setting cellDates to true will force the generators to store dates.
Time Zones and Dates (click to show)
Excel has no native concept of universal time. All times are specified in the local time zone. Excel limitations prevent specifying true absolute dates.
Following Excel, this library treats all dates as relative to local time zone.
Epochs: 1900 and 1904 (click to show)
Excel supports two epochs (January 1 1900 and January 1 1904). The workbook's epoch can be determined by examining the workbook's wb.Workbook.WBProps.date1904 property:
!!(((wb.Workbook||{}).WBProps||{}).date1904)
Sheet Objects
Each key that does not start with ! maps to a cell (using A-1 notation)
sheet[address] returns the cell object for the specified address.
Special sheet keys (accessible as sheet[key], each starting with !):
sheet['!ref']: A-1 based range representing the sheet range. Functions that work with sheets should use this parameter to determine the range. Cells that are assigned outside of the range are not processed. In particular, when writing a sheet by hand, cells outside of the range are not included
Functions that handle sheets should test for the presence of !ref field. If the !ref is omitted or is not a valid range, functions are free to treat the sheet as empty or attempt to guess the range. The standard utilities that ship with this library treat sheets as empty (for example, the CSV output is empty string).
When reading a worksheet with the sheetRows property set, the ref parameter will use the restricted range. The original range is set at ws['!fullref']
sheet['!margins']: Object representing the page margins. The default values follow Excel's "normal" preset. Excel also has a "wide" and a "narrow" preset but they are stored as raw measurements. The main properties are listed below:
Page margin details (click to show)
| key | description | "normal" | "wide" | "narrow" |
|---|---|---|---|---|
left | left margin (inches) | 0.7 | 1.0 | 0.25 |
right | right margin (inches) | 0.7 | 1.0 | 0.25 |
top | top margin (inches) | 0.75 | 1.0 | 0.75 |
bottom | bottom margin (inches) | 0.75 | 1.0 | 0.75 |
header | header margin (inches) | 0.3 | 0.5 | 0.3 |
footer | footer margin (inches) | 0.3 | 0.5 | 0.3 |
/* Set worksheet sheet to "normal" */
ws["!margins"]={left:0.7, right:0.7, top:0.75,bottom:0.75,header:0.3,footer:0.3}
/* Set worksheet sheet to "wide" */
ws["!margins"]={left:1.0, right:1.0, top:1.0, bottom:1.0, header:0.5,footer:0.5}
/* Set worksheet sheet to "narrow" */
ws["!margins"]={left:0.25,right:0.25,top:0.75,bottom:0.75,header:0.3,footer:0.3}
Worksheet Object
In addition to the base sheet keys, worksheets also add:
ws['!cols']: array of column properties objects. Column widths are actually stored in files in a normalized manner, measured in terms of the "Maximum Digit Width" (the largest width of the rendered digits 0-9, in pixels). When parsed, the column objects store the pixel width in the wpx field, character width in the wch field, and the maximum digit width in the MDW field.
ws['!rows']: array of row properties objects as explained later in the docs. Each row object encodes properties including row height and visibility.
ws['!merges']: array of range objects corresponding to the merged cells in the worksheet. Plain text formats do not support merge cells. CSV export will write all cells in the merge range if they exist, so be sure that only the first cell (upper-left) in the range is set.
ws['!outline']: configure how outlines should behave. Options default to the default settings in Excel 2019:
| key | Excel feature | default |
|---|---|---|
above | Uncheck "Summary rows below detail" | false |
left | Uncheck "Summary rows to the right of detail" | false |
ws['!protect']: object of write sheet protection properties. Thepasswordkey specifies the password for formats that support password-protected sheets (XLSX/XLSB/XLS). The writer uses the XOR obfuscation method. The following keys control the sheet protection -- set tofalseto enable a feature when sheet is locked or set totrueto disable a feature:
Worksheet Protection Details (click to show)
| key | feature (true=disabled / false=enabled) | default |
|---|---|---|
selectLockedCells | Select locked cells | enabled |
selectUnlockedCells | Select unlocked cells | enabled |
formatCells | Format cells | disabled |
formatColumns | Format columns | disabled |
formatRows | Format rows | disabled |
insertColumns | Insert columns | disabled |
insertRows | Insert rows | disabled |
insertHyperlinks | Insert hyperlinks | disabled |
deleteColumns | Delete columns | disabled |
deleteRows | Delete rows | disabled |
sort | Sort | disabled |
autoFilter | Filter | disabled |
pivotTables | Use PivotTable reports | disabled |
objects | Edit objects | enabled |
scenarios | Edit scenarios | enabled |
ws['!autofilter']: AutoFilter object following the schema:
type AutoFilter = {
ref:string; // A-1 based range representing the AutoFilter table range
}
Chartsheet Object
Chartsheets are represented as standard sheets. They are distinguished with the !type property set to "chart".
The underlying data and !ref refer to the cached data in the chartsheet. The first row of the chartsheet is the underlying header.
Macrosheet Object
Macrosheets are represented as standard sheets. They are distinguished with the !type property set to "macro".
Dialogsheet Object
Dialogsheets are represented as standard sheets. They are distinguished with the !type property set to "dialog".
Workbook Object
workbook.SheetNames is an ordered list of the sheets in the workbook
wb.Sheets[sheetname] returns an object representing the worksheet.
wb.Props is an object storing the standard properties. wb.Custprops stores custom properties. Since the XLS standard properties deviate from the XLSX standard, XLS parsing stores core properties in both places.
wb.Workbook stores workbook-level attributes.
Workbook File Properties
The various file formats use different internal names for file properties. The workbook Props object normalizes the names:
File Properties (click to show)
| JS Name | Excel Description |
|---|---|
Title | Summary tab "Title" |
Subject | Summary tab "Subject" |
Author | Summary tab "Author" |
Manager | Summary tab "Manager" |
Company | Summary tab "Company" |
Category | Summary tab "Category" |
Keywords | Summary tab "Keywords" |
Comments | Summary tab "Comments" |
LastAuthor | Statistics tab "Last saved by" |
CreatedDate | Statistics tab "Created" |
For example, to set the workbook title property:
if(!wb.Props) wb.Props = {};
wb.Props.Title = "Insert Title Here";
Custom properties are added in the workbook Custprops object:
if(!wb.Custprops) wb.Custprops = {};
wb.Custprops["Custom Property"] = "Custom Value";
Writers will process the Props key of the options object:
/* force the Author to be "SheetJS" */
XLSX.write(wb, {Props:{Author:"SheetJS"}});
Workbook-Level Attributes
wb.Workbook stores workbook-level attributes.
Defined Names
wb.Workbook.Names is an array of defined name objects which have the keys:
Defined Name Properties (click to show)
| Key | Description |
|---|---|
Sheet | Name scope. Sheet Index (0 = first sheet) or null (Workbook) |
Name | Case-sensitive name. Standard rules apply ** |
Ref | A1-style Reference ("Sheet1!$A$1:$D$20") |
Comment | Comment (only applicable for XLS/XLSX/XLSB) |
Excel allows two sheet-scoped defined names to share the same name. However, a sheet-scoped name cannot collide with a workbook-scope name. Workbook writers may not enforce this constraint.
Workbook Views
wb.Workbook.Views is an array of workbook view objects which have the keys:
| Key | Description |
|---|---|
RTL | If true, display right-to-left |
Miscellaneous Workbook Properties
wb.Workbook.WBProps holds other workbook properties:
| Key | Description |
|---|---|
CodeName | VBA Project Workbook Code Name |
date1904 | epoch: 0/false for 1900 system, 1/true for 1904 |
filterPrivacy | Warn or strip personally identifying info on save |
Document Features
Even for basic features like date storage, the official Excel formats store the same content in different ways. The parsers are expected to convert from the underlying file format representation to the Common Spreadsheet Format. Writers are expected to convert from CSF back to the underlying file format.
Formulae
The A1-style formula string is stored in the f field. Even though different file formats store the formulae in different ways, the formats are translated. Even though some formats store formulae with a leading equal sign, CSF formulae do not start with =.
Representation of A1=1, A2=2, A3=A1+A2 (click to show)
{
"!ref": "A1:A3",
A1: { t:'n', v:1 },
A2: { t:'n', v:2 },
A3: { t:'n', v:3, f:'A1+A2' }
}
Shared formulae are decompressed and each cell has the formula corresponding to its cell. Writers generally do not attempt to generate shared formulae.
Cells with formula entries but no value will be serialized in a way that Excel and other spreadsheet tools will recognize. This library will not automatically compute formula results! For example, to compute BESSELJ in a worksheet:
Formula without known value (click to show)
{
"!ref": "A1:A3",
A1: { t:'n', v:3.14159 },
A2: { t:'n', v:2 },
A3: { t:'n', f:'BESSELJ(A1,A2)' }
}
Array Formulae
Array formulae are stored in the top-left cell of the array block. All cells of an array formula have a F field corresponding to the range. A single-cell formula can be distinguished from a plain formula by the presence of F field.
Array Formula examples (click to show)
For example, setting the cell C1 to the array formula {=SUM(A1:A3*B1:B3)}:
worksheet['C1'] = { t:'n', f: "SUM(A1:A3*B1:B3)", F:"C1:C1" };
For a multi-cell array formula, every cell has the same array range but only the first cell specifies the formula. Consider D1:D3=A1:A3*B1:B3:
worksheet['D1'] = { t:'n', F:"D1:D3", f:"A1:A3*B1:B3" };
worksheet['D2'] = { t:'n', F:"D1:D3" };
worksheet['D3'] = { t:'n', F:"D1:D3" };
Utilities and writers are expected to check for the presence of a F field and ignore any possible formula element f in cells other than the starting cell. They are not expected to perform validation of the formulae!
Formula Output Utility Function (click to show)
The sheet_to_formulae method generates one line per formula or array formula. Array formulae are rendered in the form range=formula while plain cells are rendered in the form cell=formula or value. Note that string literals are prefixed with an apostrophe ', consistent with Excel's formula bar display.
Formulae File Format Details (click to show)
| Storage Representation | Formats | Read | Write |
|---|---|---|---|
| A1-style strings | XLSX | ✔ | ✔ |
| RC-style strings | XLML and plain text | ✔ | ✔ |
| BIFF Parsed formulae | XLSB and all XLS formats | ✔ | |
| OpenFormula formulae | ODS/FODS/UOS | ✔ | ✔ |
| Lotus Parsed formulae | All Lotus WK_ formats | ✔ |
Since Excel prohibits named cells from colliding with names of A1 or RC style cell references, a (not-so-simple) regex conversion is possible. BIFF Parsed formulae and Lotus Parsed formulae have to be explicitly unwound. OpenFormula formulae can be converted with regular expressions.
Row and Column Properties
Format Support (click to show)
Row Properties: XLSX/M, XLSB, BIFF8 XLS, XLML, SYLK, DOM, ODS
Column Properties: XLSX/M, XLSB, BIFF8 XLS, XLML, SYLK, DOM
Row and Column properties are not extracted by default when reading from a file and are not persisted by default when writing to a file. The option cellStyles: true must be passed to the relevant read or write function.
Column Properties
The !cols array in each worksheet, if present, is a collection of ColInfo objects which have the following properties:
type ColInfo = {
/* visibility */
hidden?: boolean; // if true, the column is hidden
/* column width is specified in one of the following ways: */
wpx?: number; // width in screen pixels
width?: number; // width in Excel's "Max Digit Width", width*256 is integral
wch?: number; // width in characters
/* other fields for preserving features from files */
level?: number; // 0-indexed outline / group level
MDW?: number; // Excel's "Max Digit Width" unit, always integral
};
Row Properties
The !rows array in each worksheet, if present, is a collection of RowInfo objects which have the following properties:
type RowInfo = {
/* visibility */
hidden?: boolean; // if true, the row is hidden
/* row height is specified in one of the following ways: */
hpx?: number; // height in screen pixels
hpt?: number; // height in points
level?: number; // 0-indexed outline / group level
};
Outline / Group Levels Convention
The Excel UI displays the base outline level as 1 and the max level as 8. Following JS conventions, SheetJS uses 0-indexed outline levels wherein the base outline level is 0 and the max level is 7.
Why are there three width types? (click to show)
There are three different width types corresponding to the three different ways spreadsheets store column widths:
SYLK and other plain text formats use raw character count. Contemporaneous tools like Visicalc and Multiplan were character based. Since the characters had the same width, it sufficed to store a count. This tradition was continued into the BIFF formats.
SpreadsheetML (2003) tried to align with HTML by standardizing on screen pixel count throughout the file. Column widths, row heights, and other measures use pixels. When the pixel and character counts do not align, Excel rounds values.
XLSX internally stores column widths in a nebulous "Max Digit Width" form. The Max Digit Width is the width of the largest digit when rendered (generally the "0" character is the widest). The internal width must be an integer multiple of the the width divided by 256. ECMA-376 describes a formula for converting between pixels and the internal width. This represents a hybrid approach.
Read functions attempt to populate all three properties. Write functions will try to cycle specified values to the desired type. In order to avoid potential conflicts, manipulation should delete the other properties first. For example, when changing the pixel width, delete the wch and width properties.
Implementation details (click to show)
Row Heights
Excel internally stores row heights in points. The default resolution is 72 DPI or 96 PPI, so the pixel and point size should agree. For different resolutions they may not agree, so the library separates the concepts.
Even though all of the information is made available, writers are expected to follow the priority order:
- use
hpxpixel height if available - use
hptpoint height if available
Column Widths
Given the constraints, it is possible to determine the MDW without actually inspecting the font! The parsers guess the pixel width by converting from width to pixels and back, repeating for all possible MDW and selecting the MDW that minimizes the error. XLML actually stores the pixel width, so the guess works in the opposite direction.
Even though all of the information is made available, writers are expected to follow the priority order:
- use
widthfield if available - use
wpxpixel width if available - use
wchcharacter count if available
Number Formats
The cell.w formatted text for each cell is produced from cell.v and cell.z format. If the format is not specified, the Excel General format is used. The format can either be specified as a string or as an index into the format table. Parsers are expected to populate workbook.SSF with the number format table. Writers are expected to serialize the table.
Custom tools should ensure that the local table has each used format string somewhere in the table. Excel convention mandates that the custom formats start at index 164. The following example creates a custom format from scratch:
New worksheet with custom format (click to show)
var wb = {
SheetNames: ["Sheet1"],
Sheets: {
Sheet1: {
"!ref":"A1:C1",
A1: { t:"n", v:10000 }, // <-- General format
B1: { t:"n", v:10000, z: "0%" }, // <-- Builtin format
C1: { t:"n", v:10000, z: "\"T\"\ #0.00" } // <-- Custom format
}
}
}
The rules are slightly different from how Excel displays custom number formats. In particular, literal characters must be wrapped in double quotes or preceded by a backslash. For more info, see the Excel documentation article Create or delete a custom number format or ECMA-376 18.8.31 (Number Formats)
Default Number Formats (click to show)
The default formats are listed in ECMA-376 18.8.30:
| ID | Format |
|---|---|
| 0 | General |
| 1 | 0 |
| 2 | 0.00 |
| 3 | #,##0 |
| 4 | #,##0.00 |
| 9 | 0% |
| 10 | 0.00% |
| 11 | 0.00E+00 |
| 12 | # ?/? |
| 13 | # ??/?? |
| 14 | m/d/yy (see below) |
| 15 | d-mmm-yy |
| 16 | d-mmm |
| 17 | mmm-yy |
| 18 | h:mm AM/PM |
| 19 | h:mm:ss AM/PM |
| 20 | h:mm |
| 21 | h:mm:ss |
| 22 | m/d/yy h:mm |
| 37 | #,##0 ;(#,##0) |
| 38 | #,##0 ;[Red](#,##0) |
| 39 | #,##0.00;(#,##0.00) |
| 40 | #,##0.00;[Red](#,##0.00) |
| 45 | mm:ss |
| 46 | [h]:mm:ss |
| 47 | mmss.0 |
| 48 | ##0.0E+0 |
| 49 | @ |
Format 14 (m/d/yy) is localized by Excel: even though the file specifies that number format, it will be drawn differently based on system settings. It makes sense when the producer and consumer of files are in the same locale, but that is not always the case over the Internet. To get around this ambiguity, parse functions accept the dateNF option to override the interpretation of that specific format string.
Hyperlinks
Format Support (click to show)
Cell Hyperlinks: XLSX/M, XLSB, BIFF8 XLS, XLML, ODS
Tooltips: XLSX/M, XLSB, BIFF8 XLS, XLML
Hyperlinks are stored in the l key of cell objects. The Target field of the hyperlink object is the target of the link, including the URI fragment. Tooltips are stored in the Tooltip field and are displayed when you move your mouse over the text.
For example, the following snippet creates a link from cell A3 to https://sheetjs.com with the tip "Find us @ SheetJS.com!":
ws['A1'].l = { Target:"https://sheetjs.com", Tooltip:"Find us @ SheetJS.com!" };
Note that Excel does not automatically style hyperlinks -- they will generally be displayed as normal text.
Remote Links
HTTP / HTTPS links can be used directly:
ws['A2'].l = { Target:"https://docs.sheetjs.com/#hyperlinks" };
ws['A3'].l = { Target:"http://localhost:7262/yes_localhost_works" };
Excel also supports mailto email links with subject line:
ws['A4'].l = { Target:"mailto:ignored@dev.null" };
ws['A5'].l = { Target:"mailto:ignored@dev.null?subject=Test Subject" };
Local Links
Links to absolute paths should use the file:// URI scheme:
ws['B1'].l = { Target:"file:///SheetJS/t.xlsx" }; /* Link to /SheetJS/t.xlsx */
ws['B2'].l = { Target:"file:///c:/SheetJS.xlsx" }; /* Link to c:\SheetJS.xlsx */
Links to relative paths can be specified without a scheme:
ws['B3'].l = { Target:"SheetJS.xlsb" }; /* Link to SheetJS.xlsb */
ws['B4'].l = { Target:"../SheetJS.xlsm" }; /* Link to ../SheetJS.xlsm */
Relative Paths have undefined behavior in the SpreadsheetML 2003 format. Excel 2019 will treat a ..\ parent mark as two levels up.
Internal Links
Links where the target is a cell or range or defined name in the same workbook ("Internal Links") are marked with a leading hash character:
ws['C1'].l = { Target:"#E2" }; /* Link to cell E2 */
ws['C2'].l = { Target:"#Sheet2!E2" }; /* Link to cell E2 in sheet Sheet2 */
ws['C3'].l = { Target:"#SomeDefinedName" }; /* Link to Defined Name */
Cell Comments
Cell comments are objects stored in the c array of cell objects. The actual contents of the comment are split into blocks based on the comment author. The a field of each comment object is the author of the comment and the t field is the plain text representation.
For example, the following snippet appends a cell comment into cell A1:
if(!ws.A1.c) ws.A1.c = [];
ws.A1.c.push({a:"SheetJS", t:"I'm a little comment, short and stout!"});
Note: XLSB enforces a 54 character limit on the Author name. Names longer than 54 characters may cause issues with other formats.
To mark a comment as normally hidden, set the hidden property:
if(!ws.A1.c) ws.A1.c = [];
ws.A1.c.push({a:"SheetJS", t:"This comment is visible"});
if(!ws.A2.c) ws.A2.c = [];
ws.A2.c.hidden = true;
ws.A2.c.push({a:"SheetJS", t:"This comment will be hidden"});
Sheet Visibility
Excel enables hiding sheets in the lower tab bar. The sheet data is stored in the file but the UI does not readily make it available. Standard hidden sheets are revealed in the "Unhide" menu. Excel also has "very hidden" sheets which cannot be revealed in the menu. It is only accessible in the VB Editor!
The visibility setting is stored in the Hidden property of sheet props array.
More details (click to show)
| Value | Definition |
|---|---|
| 0 | Visible |
| 1 | Hidden |
| 2 | Very Hidden |
With https://rawgit.com/SheetJS/test_files/HEAD/sheet_visibility.xlsx:
> wb.Workbook.Sheets.map(function(x) { return [x.name, x.Hidden] })
[ [ 'Visible', 0 ], [ 'Hidden', 1 ], [ 'VeryHidden', 2 ] ]
Non-Excel formats do not support the Very Hidden state. The best way to test if a sheet is visible is to check if the Hidden property is logical truth:
> wb.Workbook.Sheets.map(function(x) { return [x.name, !x.Hidden] })
[ [ 'Visible', true ], [ 'Hidden', false ], [ 'VeryHidden', false ] ]
VBA and Macros
VBA Macros are stored in a special data blob that is exposed in the vbaraw property of the workbook object when the bookVBA option is true. They are supported in XLSM, XLSB, and BIFF8 XLS formats. The supported format writers automatically insert the data blobs if it is present in the workbook and associate with the worksheet names.
Custom Code Names (click to show)
The workbook code name is stored in wb.Workbook.WBProps.CodeName. By default, Excel will write ThisWorkbook or a translated phrase like DieseArbeitsmappe. Worksheet and Chartsheet code names are in the worksheet properties object at wb.Workbook.Sheets[i].CodeName. Macrosheets and Dialogsheets are ignored.
The readers and writers preserve the code names, but they have to be manually set when adding a VBA blob to a different workbook.
Macrosheets (click to show)
Older versions of Excel also supported a non-VBA "macrosheet" sheet type that stored automation commands. These are exposed in objects with the !type property set to "macro".
Detecting macros in workbooks (click to show)
The vbaraw field will only be set if macros are present, so testing is simple:
function wb_has_macro(wb/*:workbook*/)/*:boolean*/ {
if(!!wb.vbaraw) return true;
const sheets = wb.SheetNames.map((n) => wb.Sheets[n]);
return sheets.some((ws) => !!ws && ws['!type']=='macro');
}
Parsing Options
The exported read and readFile functions accept an options argument:
| Option Name | Default | Description |
|---|---|---|
type | Input data encoding (see Input Type below) | |
raw | false | If true, plain text parsing will not parse values ** |
codepage | If specified, use code page when appropriate ** | |
cellFormula | true | Save formulae to the .f field |
cellHTML | true | Parse rich text and save HTML to the .h field |
cellNF | false | Save number format string to the .z field |
cellStyles | false | Save style/theme info to the .s field |
cellText | true | Generated formatted text to the .w field |
cellDates | false | Store dates as type d (default is n) |
dateNF | If specified, use the string for date code 14 ** | |
sheetStubs | false | Create cell objects of type z for stub cells |
sheetRows | 0 | If >0, read the first sheetRows rows ** |
bookDeps | false | If true, parse calculation chains |
bookFiles | false | If true, add raw files to book object ** |
bookProps | false | If true, only parse enough to get book metadata ** |
bookSheets | false | If true, only parse enough to get the sheet names |
bookVBA | false | If true, copy VBA blob to vbaraw field ** |
password | "" | If defined and file is encrypted, use password ** |
WTF | false | If true, throw errors on unexpected file features ** |
sheets | If specified, only parse specified sheets ** | |
PRN | false | If true, allow parsing of PRN files ** |
xlfn | false | If true, preserve _xlfn. prefixes in formulae ** |
FS | DSV Field Separator override |
- Even if
cellNFis false, formatted text will be generated and saved to.w - In some cases, sheets may be parsed even if
bookSheetsis false. - Excel aggressively tries to interpret values from CSV and other plain text. This leads to surprising behavior! The
rawoption suppresses value parsing. bookSheetsandbookPropscombine to give both sets of informationDepswill be an empty object ifbookDepsis falsebookFilesbehavior depends on file type:keysarray (paths in the ZIP) for ZIP-based formatsfileshash (mapping paths to objects representing the files) for ZIPcfbobject for formats using CFB containers
sheetRows-1rows will be generated when looking at the JSON object output (since the header row is counted as a row when parsing the data)- By default all worksheets are parsed.
sheetsrestricts based on input type:- number: zero-based index of worksheet to parse (
0is first worksheet) - string: name of worksheet to parse (case insensitive)
- array of numbers and strings to select multiple worksheets.
- number: zero-based index of worksheet to parse (
bookVBAmerely exposes the raw VBA CFB object. It does not parse the data. XLSM and XLSB store the VBA CFB object inxl/vbaProject.bin. BIFF8 XLS mixes the VBA entries alongside the core Workbook entry, so the library generates a new XLSB-compatible blob from the XLS CFB container.codepageis applied to BIFF2 - BIFF5 files withoutCodePagerecords and to CSV files without BOM intype:"binary". BIFF8 XLS always defaults to 1200.PRNaffects parsing of text files without a common delimiter character.- Currently only XOR encryption is supported. Unsupported error will be thrown for files employing other encryption methods.
- Newer Excel functions are serialized with the
_xlfn.prefix, hidden from the user. SheetJS will strip_xlfn.normally. Thexlfnoption preserves them. - WTF is mainly for development. By default, the parser will suppress read errors on single worksheets, allowing you to read from the worksheets that do parse properly. Setting
WTF:trueforces those errors to be thrown.
Input Type
Strings can be interpreted in multiple ways. The type parameter for read tells the library how to parse the data argument:
type | expected input |
|---|---|
"base64" | string: Base64 encoding of the file |
"binary" | string: binary string (byte n is data.charCodeAt(n)) |
"string" | string: JS string (characters interpreted as UTF8) |
"buffer" | nodejs Buffer |
"array" | array: array of 8-bit unsigned int (byte n is data[n]) |
"file" | string: path of file that will be read (nodejs only) |
Guessing File Type
Implementation Details (click to show)
Excel and other spreadsheet tools read the first few bytes and apply other heuristics to determine a file type. This enables file type punning: renaming files with the .xls extension will tell your computer to use Excel to open the file but Excel will know how to handle it. This library applies similar logic:
| Byte 0 | Raw File Type | Spreadsheet Types |
|---|---|---|
0xD0 | CFB Container | BIFF 5/8 or protected XLSX/XLSB or WQ3/QPW or XLR |
0x09 | BIFF Stream | BIFF 2/3/4/5 |
0x3C | XML/HTML | SpreadsheetML / Flat ODS / UOS1 / HTML / plain text |
0x50 | ZIP Archive | XLSB or XLSX/M or ODS or UOS2 or NUMBERS or text |
0x49 | Plain Text | SYLK or plain text |
0x54 | Plain Text | DIF or plain text |
0xEF | UTF8 Encoded | SpreadsheetML / Flat ODS / UOS1 / HTML / plain text |
0xFF | UTF16 Encoded | SpreadsheetML / Flat ODS / UOS1 / HTML / plain text |
0x00 | Record Stream | Lotus WK* or Quattro Pro or plain text |
0x7B | Plain text | RTF or plain text |
0x0A | Plain text | SpreadsheetML / Flat ODS / UOS1 / HTML / plain text |
0x0D | Plain text | SpreadsheetML / Flat ODS / UOS1 / HTML / plain text |
0x20 | Plain text | SpreadsheetML / Flat ODS / UOS1 / HTML / plain text |
DBF files are detected based on the first byte as well as the third and fourth bytes (corresponding to month and day of the file date)
Works for Windows files are detected based on the BOF record with type 0xFF
Plain text format guessing follows the priority order:
| Format | Test |
|---|---|
| XML | <?xml appears in the first 1024 characters |
| HTML | starts with < and HTML tags appear in the first 1024 characters * |
| XML | starts with < and the first tag is valid |
| RTF | starts with {\rt |
| DSV | starts with /sep=.$/, separator is the specified character |
| DSV | more unquoted ` |
| DSV | more unquoted ; chars than \t or , in the first 1024 |
| TSV | more unquoted \t chars than , chars in the first 1024 |
| CSV | one of the first 1024 characters is a comma "," |
| ETH | starts with socialcalc:version: |
| PRN | PRN option is set to true |
| CSV | (fallback) |
- HTML tags include:
html,table,head,meta,script,style,div
Why are random text files valid? (click to show)
Excel is extremely aggressive in reading files. Adding an XLS extension to any display text file (where the only characters are ANSI display chars) tricks Excel into thinking that the file is potentially a CSV or TSV file, even if it is only one column! This library attempts to replicate that behavior.
The best approach is to validate the desired worksheet and ensure it has the expected number of rows or columns. Extracting the range is extremely simple:
var range = XLSX.utils.decode_range(worksheet['!ref']);
var ncols = range.e.c - range.s.c + 1, nrows = range.e.r - range.s.r + 1;
Writing Options
The exported write and writeFile functions accept an options argument:
| Option Name | Default | Description |
|---|---|---|
type | Output data encoding (see Output Type below) | |
cellDates | false | Store dates as type d (default is n) |
bookSST | false | Generate Shared String Table ** |
bookType | "xlsx" | Type of Workbook (see below for supported formats) |
sheet | "" | Name of Worksheet for single-sheet formats ** |
compression | false | Use ZIP compression for ZIP-based formats ** |
Props | Override workbook properties when writing ** | |
themeXLSX | Override theme XML when writing XLSX/XLSB/XLSM ** | |
ignoreEC | true | Suppress "number as text" errors ** |
bookSSTis slower and more memory intensive, but has better compatibility with older versions of iOS Numbers- The raw data is the only thing guaranteed to be saved. Features not described in this README may not be serialized.
cellDatesonly applies to XLSX output and is not guaranteed to work with third-party readers. Excel itself does not usually write cells with typedso non-Excel tools may ignore the data or error in the presence of dates.Propsis an object mirroring the workbookPropsfield. See the table from the Workbook File Properties section.- if specified, the string from
themeXLSXwill be saved as the primary theme for XLSX/XLSB/XLSM files (toxl/theme/theme1.xmlin the ZIP) - Due to a bug in the program, some features like "Text to Columns" will crash Excel on worksheets where error conditions are ignored. The writer will mark files to ignore the error by default. Set
ignoreECtofalseto suppress.
Supported Output Formats
For broad compatibility with third-party tools, this library supports many output formats. The specific file type is controlled with bookType option:
bookType | file ext | container | sheets | Description |
|---|---|---|---|---|
xlsx | .xlsx | ZIP | multi | Excel 2007+ XML Format |
xlsm | .xlsm | ZIP | multi | Excel 2007+ Macro XML Format |
xlsb | .xlsb | ZIP | multi | Excel 2007+ Binary Format |
biff8 | .xls | CFB | multi | Excel 97-2004 Workbook Format |
biff5 | .xls | CFB | multi | Excel 5.0/95 Workbook Format |
biff4 | .xls | none | single | Excel 4.0 Worksheet Format |
biff3 | .xls | none | single | Excel 3.0 Worksheet Format |
biff2 | .xls | none | single | Excel 2.0 Worksheet Format |
xlml | .xls | none | multi | Excel 2003-2004 (SpreadsheetML) |
ods | .ods | ZIP | multi | OpenDocument Spreadsheet |
fods | .fods | none | multi | Flat OpenDocument Spreadsheet |
wk3 | .wk3 | none | single | Lotus Workbook (WK3) |
csv | .csv | none | single | Comma Separated Values |
txt | .txt | none | single | UTF-16 Unicode Text (TXT) |
sylk | .sylk | none | single | Symbolic Link (SYLK) |
html | .html | none | single | HTML Document |
dif | .dif | none | single | Data Interchange Format (DIF) |
dbf | .dbf | none | single | dBASE II + VFP Extensions (DBF) |
wk1 | .wk1 | none | single | Lotus Worksheet (WK1) |
rtf | .rtf | none | single | Rich Text Format (RTF) |
prn | .prn | none | single | Lotus Formatted Text |
eth | .eth | none | single | Ethercalc Record Format (ETH) |
compressiononly applies to formats with ZIP containers.- Formats that only support a single sheet require a
sheetoption specifying the worksheet. If the string is empty, the first worksheet is used. writeFilewill automatically guess the output file format based on the file extension ifbookTypeis not specified. It will choose the first format in the aforementioned table that matches the extension.
Output Type
The type argument for write mirrors the type argument for read:
type | output |
|---|---|
"base64" | string: Base64 encoding of the file |
"binary" | string: binary string (byte n is data.charCodeAt(n)) |
"string" | string: JS string (characters interpreted as UTF8) |
"buffer" | nodejs Buffer |
"array" | ArrayBuffer, fallback array of 8-bit unsigned int |
"file" | string: path of file that will be created (nodejs only) |
Utility Functions
The sheet_to_* functions accept a worksheet and an optional options object.
The *_to_sheet functions accept a data object and an optional options object.
The examples are based on the following worksheet:
XXX| A | B | C | D | E | F | G |
---+---+---+---+---+---+---+---+
1 | S | h | e | e | t | J | S |
2 | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
3 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Array of Arrays Input
XLSX.utils.aoa_to_sheet takes an array of arrays of JS values and returns a worksheet resembling the input data. Numbers, Booleans and Strings are stored as the corresponding styles. Dates are stored as date or numbers. Array holes and explicit undefined values are skipped. null values may be stubbed. All other values are stored as strings. The function takes an options argument:
| Option Name | Default | Description |
|---|---|---|
dateNF | FMT 14 | Use specified date format in string output |
cellDates | false | Store dates as type d (default is n) |
sheetStubs | false | Create cell objects of type z for null values |
nullError | false | If true, emit #NULL! error cells for null values |
Examples (click to show)
To generate the example sheet:
var ws = XLSX.utils.aoa_to_sheet([
"SheetJS".split(""),
[1,2,3,4,5,6,7],
[2,3,4,5,6,7,8]
]);
XLSX.utils.sheet_add_aoa takes an array of arrays of JS values and updates an existing worksheet object. It follows the same process as aoa_to_sheet and accepts an options argument:
| Option Name | Default | Description |
|---|---|---|
dateNF | FMT 14 | Use specified date format in string output |
cellDates | false | Store dates as type d (default is n) |
sheetStubs | false | Create cell objects of type z for null values |
nullError | false | If true, emit #NULL! error cells for null values |
origin | Use specified cell as starting point (see below) |
origin is expected to be one of:
origin | Description |
|---|---|
| (cell object) | Use specified cell (cell object) |
| (string) | Use specified cell (A1-style cell) |
| (number >= 0) | Start from the first column at specified row (0-indexed) |
| -1 | Append to bottom of worksheet starting on first column |
| (default) | Start from cell A1 |
Examples (click to show)
Consider the worksheet:
XXX| A | B | C | D | E | F | G |
---+---+---+---+---+---+---+---+
1 | S | h | e | e | t | J | S |
2 | 1 | 2 | | | 5 | 6 | 7 |
3 | 2 | 3 | | | 6 | 7 | 8 |
4 | 3 | 4 | | | 7 | 8 | 9 |
5 | 4 | 5 | 6 | 7 | 8 | 9 | 0 |
This worksheet can be built up in the order A1:G1, A2:B4, E2:G4, A5:G5:
/* Initial row */
var ws = XLSX.utils.aoa_to_sheet([ "SheetJS".split("") ]);
/* Write data starting at A2 */
XLSX.utils.sheet_add_aoa(ws, [[1,2], [2,3], [3,4]], {origin: "A2"});
/* Write data starting at E2 */
XLSX.utils.sheet_add_aoa(ws, [[5,6,7], [6,7,8], [7,8,9]], {origin:{r:1, c:4}});
/* Append row */
XLSX.utils.sheet_add_aoa(ws, [[4,5,6,7,8,9,0]], {origin: -1});
Array of Objects Input
XLSX.utils.json_to_sheet takes an array of objects and returns a worksheet with automatically-generated "headers" based on the keys of the objects. The default column order is determined by the first appearance of the field using Object.keys. The function accepts an options argument:
| Option Name | Default | Description |
|---|---|---|
header | Use specified field order (default Object.keys) ** | |
dateNF | FMT 14 | Use specified date format in string output |
cellDates | false | Store dates as type d (default is n) |
skipHeader | false | If true, do not include header row in output |
nullError | false | If true, emit #NULL! error cells for null values |
- All fields from each row will be written. If
headeris an array and it does not contain a particular field, the key will be appended to the array. - Cell types are deduced from the type of each value. For example, a
Dateobject will generate a Date cell, while a string will generate a Text cell. - Null values will be skipped by default. If
nullErroris true, an error cell corresponding to#NULL!will be written to the worksheet.
Examples (click to show)
The original sheet cannot be reproduced using plain objects since JS object keys must be unique. After replacing the second e and S with e_1 and S_1:
var ws = XLSX.utils.json_to_sheet([
{ S:1, h:2, e:3, e_1:4, t:5, J:6, S_1:7 },
{ S:2, h:3, e:4, e_1:5, t:6, J:7, S_1:8 }
], {header:["S","h","e","e_1","t","J","S_1"]});
Alternatively, the header row can be skipped:
var ws = XLSX.utils.json_to_sheet([
{ A:"S", B:"h", C:"e", D:"e", E:"t", F:"J", G:"S" },
{ A: 1, B: 2, C: 3, D: 4, E: 5, F: 6, G: 7 },
{ A: 2, B: 3, C: 4, D: 5, E: 6, F: 7, G: 8 }
], {header:["A","B","C","D","E","F","G"], skipHeader:true});
XLSX.utils.sheet_add_json takes an array of objects and updates an existing worksheet object. It follows the same process as json_to_sheet and accepts an options argument:
| Option Name | Default | Description |
|---|---|---|
header | Use specified column order (default Object.keys) | |
dateNF | FMT 14 | Use specified date format in string output |
cellDates | false | Store dates as type d (default is n) |
skipHeader | false | If true, do not include header row in output |
nullError | false | If true, emit #NULL! error cells for null values |
origin | Use specified cell as starting point (see below) |
origin is expected to be one of:
origin | Description |
|---|---|
| (cell object) | Use specified cell (cell object) |
| (string) | Use specified cell (A1-style cell) |
| (number >= 0) | Start from the first column at specified row (0-indexed) |
| -1 | Append to bottom of worksheet starting on first column |
| (default) | Start from cell A1 |
Examples (click to show)
Consider the worksheet:
XXX| A | B | C | D | E | F | G |
---+---+---+---+---+---+---+---+
1 | S | h | e | e | t | J | S |
2 | 1 | 2 | | | 5 | 6 | 7 |
3 | 2 | 3 | | | 6 | 7 | 8 |
4 | 3 | 4 | | | 7 | 8 | 9 |
5 | 4 | 5 | 6 | 7 | 8 | 9 | 0 |
This worksheet can be built up in the order A1:G1, A2:B4, E2:G4, A5:G5:
/* Initial row */
var ws = XLSX.utils.json_to_sheet([
{ A: "S", B: "h", C: "e", D: "e", E: "t", F: "J", G: "S" }
], {header: ["A", "B", "C", "D", "E", "F", "G"], skipHeader: true});
/* Write data starting at A2 */
XLSX.utils.sheet_add_json(ws, [
{ A: 1, B: 2 }, { A: 2, B: 3 }, { A: 3, B: 4 }
], {skipHeader: true, origin: "A2"});
/* Write data starting at E2 */
XLSX.utils.sheet_add_json(ws, [
{ A: 5, B: 6, C: 7 }, { A: 6, B: 7, C: 8 }, { A: 7, B: 8, C: 9 }
], {skipHeader: true, origin: { r: 1, c: 4 }, header: [ "A", "B", "C" ]});
/* Append row */
XLSX.utils.sheet_add_json(ws, [
{ A: 4, B: 5, C: 6, D: 7, E: 8, F: 9, G: 0 }
], {header: ["A", "B", "C", "D", "E", "F", "G"], skipHeader: true, origin: -1});
HTML Table Input
XLSX.utils.table_to_sheet takes a table DOM element and returns a worksheet resembling the input table. Numbers are parsed. All other data will be stored as strings.
XLSX.utils.table_to_book produces a minimal workbook based on the worksheet.
Both functions accept options arguments:
| Option Name | Default | Description |
|---|---|---|
raw | If true, every cell will hold raw strings | |
dateNF | FMT 14 | Use specified date format in string output |
cellDates | false | Store dates as type d (default is n) |
sheetRows | 0 | If >0, read the first sheetRows rows of the table |
display | false | If true, hidden rows and cells will not be parsed |
Examples (click to show)
To generate the example sheet, start with the HTML table:
<table id="sheetjs">
<tr><td>S</td><td>h</td><td>e</td><td>e</td><td>t</td><td>J</td><td>S</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td></tr>
</table>
To process the table:
var tbl = document.getElementById('sheetjs');
var wb = XLSX.utils.table_to_book(tbl);
Note: XLSX.read can handle HTML represented as strings.
XLSX.utils.sheet_add_dom takes a table DOM element and updates an existing worksheet object. It follows the same process as table_to_sheet and accepts an options argument:
| Option Name | Default | Description |
|---|---|---|
raw | If true, every cell will hold raw strings | |
dateNF | FMT 14 | Use specified date format in string output |
cellDates | false | Store dates as type d (default is n) |
sheetRows | 0 | If >0, read the first sheetRows rows of the table |
display | false | If true, hidden rows and cells will not be parsed |
origin is expected to be one of:
origin | Description |
|---|---|
| (cell object) | Use specified cell (cell object) |
| (string) | Use specified cell (A1-style cell) |
| (number >= 0) | Start from the first column at specified row (0-indexed) |
| -1 | Append to bottom of worksheet starting on first column |
| (default) | Start from cell A1 |
Examples (click to show)
A small helper function can create gap rows between tables:
function create_gap_rows(ws, nrows) {
var ref = XLSX.utils.decode_range(ws["!ref"]); // get original range
ref.e.r += nrows; // add to ending row
ws["!ref"] = XLSX.utils.encode_range(ref); // reassign row
}
/* first table */
var ws = XLSX.utils.table_to_sheet(document.getElementById('table1'));
create_gap_rows(ws, 1); // one row gap after first table
/* second table */
XLSX.utils.sheet_add_dom(ws, document.getElementById('table2'), {origin: -1});
create_gap_rows(ws, 3); // three rows gap after second table
/* third table */
XLSX.utils.sheet_add_dom(ws, document.getElementById('table3'), {origin: -1});
Formulae Output
XLSX.utils.sheet_to_formulae generates an array of commands that represent how a person would enter data into an application. Each entry is of the form A1-cell-address=formula-or-value. String literals are prefixed with a ' in accordance with Excel.
Examples (click to show)
For the example sheet:
> var o = XLSX.utils.sheet_to_formulae(ws);
> [o[0], o[5], o[10], o[15], o[20]];
[ 'A1=\'S', 'F1=\'J', 'D2=4', 'B3=3', 'G3=8' ]
Delimiter-Separated Output
As an alternative to the writeFile CSV type, XLSX.utils.sheet_to_csv also produces CSV output. The function takes an options argument:
| Option Name | Default | Description |
|---|---|---|
FS | "," | "Field Separator" delimiter between fields |
RS | "\n" | "Record Separator" delimiter between rows |
dateNF | FMT 14 | Use specified date format in string output |
strip | false | Remove trailing field separators in each record ** |
blankrows | true | Include blank lines in the CSV output |
skipHidden | false | Skips hidden rows/columns in the CSV output |
forceQuotes | false | Force quotes around fields |
stripwill remove trailing commas from each line under defaultFS/RSblankrowsmust be set tofalseto skip blank lines.- Fields containing the record or field separator will automatically be wrapped in double quotes;
forceQuotesforces all cells to be wrapped in quotes.
Examples (click to show)
For the example sheet:
> console.log(XLSX.utils.sheet_to_csv(ws));
S,h,e,e,t,J,S
1,2,3,4,5,6,7
2,3,4,5,6,7,8
> console.log(XLSX.utils.sheet_to_csv(ws, {FS:"\t"}));
S h e e t J S
1 2 3 4 5 6 7
2 3 4 5 6 7 8
> console.log(XLSX.utils.sheet_to_csv(ws,{FS:":",RS:"|"}));
S:h:e:e:t:J:S|1:2:3:4:5:6:7|2:3:4:5:6:7:8|
UTF-16 Unicode Text
The txt output type uses the tab character as the field separator. If the codepage library is available (included in full distribution but not core), the output will be encoded in CP1200 and the BOM will be prepended.
XLSX.utils.sheet_to_txt takes the same arguments as sheet_to_csv.
HTML Output
As an alternative to the writeFile HTML type, XLSX.utils.sheet_to_html also produces HTML output. The function takes an options argument:
| Option Name | Default | Description |
|---|---|---|
id | Specify the id attribute for the TABLE element | |
editable | false | If true, set contenteditable="true" for every TD |
header | Override header (default html body) | |
footer | Override footer (default /body /html) |
Examples (click to show)
For the example sheet:
> console.log(XLSX.utils.sheet_to_html(ws));
// ...
JSON
XLSX.utils.sheet_to_json generates different types of JS objects. The function takes an options argument:
| Option Name | Default | Description |
|---|---|---|
raw | true | Use raw values (true) or formatted strings (false) |
range | from WS | Override Range (see table below) |
header | Control output format (see table below) | |
dateNF | FMT 14 | Use specified date format in string output |
defval | Use specified value in place of null or undefined | |
blankrows | ** | Include blank lines in the output ** |
rawonly affects cells which have a format code (.z) field or a formatted text (.w) field.- If
headeris specified, the first row is considered a data row; ifheaderis not specified, the first row is the header row and not considered data. - When
headeris not specified, the conversion will automatically disambiguate header entries by affixing_and a count starting at1. For example, if three columns have headerfoothe output fields arefoo,foo_1,foo_2 nullvalues are returned whenrawis true but are skipped when false.- If
defvalis not specified, null and undefined values are skipped normally. If specified, all null and undefined points will be filled withdefval - When
headeris1, the default is to generate blank rows.blankrowsmust be set tofalseto skip blank rows. - When
headeris not1, the default is to skip blank rows.blankrowsmust be true to generate blank rows
range is expected to be one of:
range | Description |
|---|---|
| (number) | Use worksheet range but set starting row to the value |
| (string) | Use specified range (A1-style bounded range string) |
| (default) | Use worksheet range (ws['!ref']) |
header is expected to be one of:
header | Description |
|---|---|
1 | Generate an array of arrays ("2D Array") |
"A" | Row object keys are literal column labels |
| array of strings | Use specified strings as keys in row objects |
| (default) | Read and disambiguate first row as keys |
If header is not 1, the row object will contain the non-enumerable property __rowNum__ that represents the row of the sheet corresponding to the entry.
Examples (click to show)
For the example sheet:
> XLSX.utils.sheet_to_json(ws);
[ { S: 1, h: 2, e: 3, e_1: 4, t: 5, J: 6, S_1: 7 },
{ S: 2, h: 3, e: 4, e_1: 5, t: 6, J: 7, S_1: 8 } ]
> XLSX.utils.sheet_to_json(ws, {header:"A"});
[ { A: 'S', B: 'h', C: 'e', D: 'e', E: 't', F: 'J', G: 'S' },
{ A: '1', B: '2', C: '3', D: '4', E: '5', F: '6', G: '7' },
{ A: '2', B: '3', C: '4', D: '5', E: '6', F: '7', G: '8' } ]
> XLSX.utils.sheet_to_json(ws, {header:["A","E","I","O","U","6","9"]});
[ { '6': 'J', '9': 'S', A: 'S', E: 'h', I: 'e', O: 'e', U: 't' },
{ '6': '6', '9': '7', A: '1', E: '2', I: '3', O: '4', U: '5' },
{ '6': '7', '9': '8', A: '2', E: '3', I: '4', O: '5', U: '6' } ]
> XLSX.utils.sheet_to_json(ws, {header:1});
[ [ 'S', 'h', 'e', 'e', 't', 'J', 'S' ],
[ '1', '2', '3', '4', '5', '6', '7' ],
[ '2', '3', '4', '5', '6', '7', '8' ] ]
Example showing the effect of raw:
> ws['A2'].w = "3"; // set A2 formatted string value
> XLSX.utils.sheet_to_json(ws, {header:1, raw:false});
[ [ 'S', 'h', 'e', 'e', 't', 'J', 'S' ],
[ '3', '2', '3', '4', '5', '6', '7' ], // <-- A2 uses the formatted string
[ '2', '3', '4', '5', '6', '7', '8' ] ]
> XLSX.utils.sheet_to_json(ws, {header:1});
[ [ 'S', 'h', 'e', 'e', 't', 'J', 'S' ],
[ 1, 2, 3, 4, 5, 6, 7 ], // <-- A2 uses the raw value
[ 2, 3, 4, 5, 6, 7, 8 ] ]
File Formats
Despite the library name xlsx, it supports numerous spreadsheet file formats:
| Format | Read | Write |
|---|---|---|
| Excel Worksheet/Workbook Formats | :-----: | :-----: |
| Excel 2007+ XML Formats (XLSX/XLSM) | ✔ | ✔ |
| Excel 2007+ Binary Format (XLSB BIFF12) | ✔ | ✔ |
| Excel 2003-2004 XML Format (XML "SpreadsheetML") | ✔ | ✔ |
| Excel 97-2004 (XLS BIFF8) | ✔ | ✔ |
| Excel 5.0/95 (XLS BIFF5) | ✔ | ✔ |
| Excel 4.0 (XLS/XLW BIFF4) | ✔ | ✔ |
| Excel 3.0 (XLS BIFF3) | ✔ | ✔ |
| Excel 2.0/2.1 (XLS BIFF2) | ✔ | ✔ |
| Excel Supported Text Formats | :-----: | :-----: |
| Delimiter-Separated Values (CSV/TXT) | ✔ | ✔ |
| Data Interchange Format (DIF) | ✔ | ✔ |
| Symbolic Link (SYLK/SLK) | ✔ | ✔ |
| Lotus Formatted Text (PRN) | ✔ | ✔ |
| UTF-16 Unicode Text (TXT) | ✔ | ✔ |
| Other Workbook/Worksheet Formats | :-----: | :-----: |
| Numbers 3.0+ / iWork 2013+ Spreadsheet (NUMBERS) | ✔ | |
| OpenDocument Spreadsheet (ODS) | ✔ | ✔ |
| Flat XML ODF Spreadsheet (FODS) | ✔ | ✔ |
| Uniform Office Format Spreadsheet (标文通 UOS1/UOS2) | ✔ | |
| dBASE II/III/IV / Visual FoxPro (DBF) | ✔ | ✔ |
| Lotus 1-2-3 (WK1/WK3) | ✔ | ✔ |
| Lotus 1-2-3 (WKS/WK2/WK4/123) | ✔ | |
| Quattro Pro Spreadsheet (WQ1/WQ2/WB1/WB2/WB3/QPW) | ✔ | |
| Works 1.x-3.x DOS / 2.x-5.x Windows Spreadsheet (WKS) | ✔ | |
| Works 6.x-9.x Spreadsheet (XLR) | ✔ | |
| Other Common Spreadsheet Output Formats | :-----: | :-----: |
| HTML Tables | ✔ | ✔ |
| Rich Text Format tables (RTF) | ✔ | |
| Ethercalc Record Format (ETH) | ✔ | ✔ |
Features not supported by a given file format will not be written. Formats with range limits will be silently truncated:
| Format | Last Cell | Max Cols | Max Rows |
|---|---|---|---|
| Excel 2007+ XML Formats (XLSX/XLSM) | XFD1048576 | 16384 | 1048576 |
| Excel 2007+ Binary Format (XLSB BIFF12) | XFD1048576 | 16384 | 1048576 |
| Excel 97-2004 (XLS BIFF8) | IV65536 | 256 | 65536 |
| Excel 5.0/95 (XLS BIFF5) | IV16384 | 256 | 16384 |
| Excel 4.0 (XLS BIFF4) | IV16384 | 256 | 16384 |
| Excel 3.0 (XLS BIFF3) | IV16384 | 256 | 16384 |
| Excel 2.0/2.1 (XLS BIFF2) | IV16384 | 256 | 16384 |
| Lotus 1-2-3 R2 - R5 (WK1/WK3/WK4) | IV8192 | 256 | 8192 |
| Lotus 1-2-3 R1 (WKS) | IV2048 | 256 | 2048 |
Excel 2003 SpreadsheetML range limits are governed by the version of Excel and are not enforced by the writer.
File Format Details (click to show)
Core Spreadsheet Formats
- Excel 2007+ XML (XLSX/XLSM)
XLSX and XLSM files are ZIP containers containing a series of XML files in accordance with the Open Packaging Conventions (OPC). The XLSM format, almost identical to XLSX, is used for files containing macros.
The format is standardized in ECMA-376 and later in ISO/IEC 29500. Excel does not follow the specification, and there are additional documents discussing how Excel deviates from the specification.
- Excel 2.0-95 (BIFF2/BIFF3/BIFF4/BIFF5)
BIFF 2/3 XLS are single-sheet streams of binary records. Excel 4 introduced the concept of a workbook (XLW files) but also had single-sheet XLS format. The structure is largely similar to the Lotus 1-2-3 file formats. BIFF5/8/12 extended the format in various ways but largely stuck to the same record format.
There is no official specification for any of these formats. Excel 95 can write files in these formats, so record lengths and fields were determined by writing in all of the supported formats and comparing files. Excel 2016 can generate BIFF5 files, enabling a full suite of file tests starting from XLSX or BIFF2.
- Excel 97-2004 Binary (BIFF8)
BIFF8 exclusively uses the Compound File Binary container format, splitting some content into streams within the file. At its core, it still uses an extended version of the binary record format from older versions of BIFF.
The MS-XLS specification covers the basics of the file format, and other specifications expand on serialization of features like properties.
- Excel 2003-2004 (SpreadsheetML)
Predating XLSX, SpreadsheetML files are simple XML files. There is no official and comprehensive specification, although MS has released documentation on the format. Since Excel 2016 can generate SpreadsheetML files, mapping features is pretty straightforward.
- Excel 2007+ Binary (XLSB, BIFF12)
Introduced in parallel with XLSX, the XLSB format combines the BIFF architecture with the content separation and ZIP container of XLSX. For the most part nodes in an XLSX sub-file can be mapped to XLSB records in a corresponding sub-file.
The MS-XLSB specification covers the basics of the file format, and other specifications expand on serialization of features like properties.
- Delimiter-Separated Values (CSV/TXT)
Excel CSV deviates from RFC4180 in a number of important ways. The generated CSV files should generally work in Excel although they may not work in RFC4180 compatible readers. The parser should generally understand Excel CSV. The writer proactively generates cells for formulae if values are unavailable.
Excel TXT uses tab as the delimiter and code page 1200.
Like in Excel, files starting with 0x49 0x44 ("ID") are treated as Symbolic Link files. Unlike Excel, if the file does not have a valid SYLK header, it will be proactively reinterpreted as CSV. There are some files with semicolon delimiter that align with a valid SYLK file. For the broadest compatibility, all cells with the value of ID are automatically wrapped in double-quotes.
Miscellaneous Workbook Formats
Support for other formats is generally far behind XLS/XLSB/XLSX support, due in part to a lack of publicly available documentation. Test files were produced in the respective apps and compared to their XLS exports to determine structure. The main focus is data extraction.
- Lotus 1-2-3 (WKS/WK1/WK2/WK3/WK4/123)
The Lotus formats consist of binary records similar to the BIFF structure. Lotus did release a specification decades ago covering the original WK1 format. Other features were deduced by producing files and comparing to Excel support.
Generated WK1 worksheets are compatible with Lotus 1-2-3 R2 and Excel 5.0.
Generated WK3 workbooks are compatible with Lotus 1-2-3 R9 and Excel 5.0.
- Quattro Pro (WQ1/WQ2/WB1/WB2/WB3/QPW)
The Quattro Pro formats use binary records in the same way as BIFF and Lotus. Some of the newer formats (namely WB3 and QPW) use a CFB enclosure just like BIFF8 XLS.
- Works for DOS / Windows Spreadsheet (WKS/XLR)
All versions of Works were limited to a single worksheet.
Works for DOS 1.x - 3.x and Works for Windows 2.x extends the Lotus WKS format with additional record types.
Works for Windows 3.x - 5.x uses the same format and WKS extension. The BOF record has type FF
Works for Windows 6.x - 9.x use the XLR format. XLR is nearly identical to BIFF8 XLS: it uses the CFB container with a Workbook stream. Works 9 saves the exact Workbook stream for the XLR and the 97-2003 XLS export. Works 6 XLS includes two empty worksheets but the main worksheet has an identical encoding. XLR also includes a WksSSWorkBook stream similar to Lotus FM3/FMT files.
- Numbers 3.0+ / iWork 2013+ Spreadsheet (NUMBERS)
iWork 2013 (Numbers 3.0 / Pages 5.0 / Keynote 6.0) switched from a proprietary XML-based format to the current file format based on the iWork Archive (IWA). This format has been used up through the current release (Numbers 11.2).
The parser focuses on extracting raw data from tables. Numbers technically supports multiple tables in a logical worksheet, including custom titles. This parser will generate one worksheet per Numbers table.
- OpenDocument Spreadsheet (ODS/FODS)
ODS is an XML-in-ZIP format akin to XLSX while FODS is an XML format akin to SpreadsheetML. Both are detailed in the OASIS standard, but tools like LO/OO add undocumented extensions. The parsers and writers do not implement the full standard, instead focusing on parts necessary to extract and store raw data.
- Uniform Office Spreadsheet (UOS1/2)
UOS is a very similar format, and it comes in 2 varieties corresponding to ODS and FODS respectively. For the most part, the difference between the formats is in the names of tags and attributes.
Miscellaneous Worksheet Formats
Many older formats supported only one worksheet:
- dBASE and Visual FoxPro (DBF)
DBF is really a typed table format: each column can only hold one data type and each record omits type information. The parser generates a header row and inserts records starting at the second row of the worksheet. The writer makes files compatible with Visual FoxPro extensions.
Multi-file extensions like external memos and tables are currently unsupported, limited by the general ability to read arbitrary files in the web browser. The reader understands DBF Level 7 extensions like DATETIME.
- Symbolic Link (SYLK)
There is no real documentation. All knowledge was gathered by saving files in various versions of Excel to deduce the meaning of fields. Notes:
Plain formulae are stored in the RC form.
Column widths are rounded to integral characters.
Lotus Formatted Text (PRN)
There is no real documentation, and in fact Excel treats PRN as an output-only file format. Nevertheless we can guess the column widths and reverse-engineer the original layout. Excel's 240 character width limitation is not enforced.
- Data Interchange Format (DIF)
There is no unified definition. Visicalc DIF differs from Lotus DIF, and both differ from Excel DIF. Where ambiguous, the parser/writer follows the expected behavior from Excel. In particular, Excel extends DIF in incompatible ways:
Since Excel automatically converts numbers-as-strings to numbers, numeric string constants are converted to formulae: "0.3" -> "=""0.3""
DIF technically expects numeric cells to hold the raw numeric data, but Excel permits formatted numbers (including dates)
DIF technically has no support for formulae, but Excel will automatically convert plain formulae. Array formulae are not preserved.
HTML
Excel HTML worksheets include special metadata encoded in styles. For example, mso-number-format is a localized string containing the number format. Despite the metadata the output is valid HTML, although it does accept bare & symbols.
The writer adds type metadata to the TD elements via the t tag. The parser looks for those tags and overrides the default interpretation. For example, text like <td>12345</td> will be parsed as numbers but <td t="s">12345</td> will be parsed as text.
- Rich Text Format (RTF)
Excel RTF worksheets are stored in clipboard when copying cells or ranges from a worksheet. The supported codes are a subset of the Word RTF support.
- Ethercalc Record Format (ETH)
Ethercalc is an open source web spreadsheet powered by a record format reminiscent of SYLK wrapped in a MIME multi-part message.
Testing
Node
(click to show)
make test will run the node-based tests. By default it runs tests on files in every supported format. To test a specific file type, set FMTS to the format you want to test. Feature-specific tests are available with make test_misc
$ make test_misc # run core tests
$ make test # run full tests
$ make test_xls # only use the XLS test files
$ make test_xlsx # only use the XLSX test files
$ make test_xlsb # only use the XLSB test files
$ make test_xml # only use the XML test files
$ make test_ods # only use the ODS test files
To enable all errors, set the environment variable WTF=1:
$ make test # run full tests
$ WTF=1 make test # enable all error messages
flow and eslint checks are available:
$ make lint # eslint checks
$ make flow # make lint + Flow checking
$ make tslint # check TS definitions
Browser
(click to show)
The core in-browser tests are available at tests/index.html within this repo. Start a local server and navigate to that directory to run the tests. make ctestserv will start a server on port 8000.
make ctest will generate the browser fixtures. To add more files, edit the tests/fixtures.lst file and add the paths.
To run the full in-browser tests, clone the repo for oss.sheetjs.com and replace the xlsx.js file (then open a browser window and go to stress.html):
$ cp xlsx.js ../SheetJS.github.io
$ cd ../SheetJS.github.io
$ simplehttpserver # or "python -mSimpleHTTPServer" or "serve"
$ open -a Chromium.app http://localhost:8000/stress.html
Tested Environments
(click to show)
- NodeJS
0.8,0.10,0.12,4.x,5.x,6.x,7.x,8.x - IE 6/7/8/9/10/11 (IE 6-9 require shims)
- Chrome 24+ (including Android 4.0+)
- Safari 6+ (iOS and Desktop)
- Edge 13+, FF 18+, and Opera 12+
Tests utilize the mocha testing framework.
- https://saucelabs.com/u/sheetjs for XLS* modules using Sauce Labs
The test suite also includes tests for various time zones. To change the timezone locally, set the TZ environment variable:
$ env TZ="Asia/Kolkata" WTF=1 make test_misc
Test Files
Test files are housed in another repo.
Running make init will refresh the test_files submodule and get the files. Note that this requires svn, git, hg and other commands that may not be available. If make init fails, please download the latest version of the test files snapshot from the repo
Latest Snapshot (click to show)
Latest test files snapshot: http://github.com/SheetJS/test_files/releases/download/20170409/test_files.zip
(download and unzip to the test_files subdirectory)
Contributing
Due to the precarious nature of the Open Specifications Promise, it is very important to ensure code is cleanroom. Contribution Notes
File organization (click to show)
At a high level, the final script is a concatenation of the individual files in the bits folder. Running make should reproduce the final output on all platforms. The README is similarly split into bits in the docbits folder.
Folders:
| folder | contents |
|---|---|
bits | raw source files that make up the final script |
docbits | raw markdown files that make up README.md |
bin | server-side bin scripts (xlsx.njs) |
dist | dist files for web browsers and nonstandard JS environments |
demos | demo projects for platforms like ExtendScript and Webpack |
tests | browser tests (run make ctest to rebuild) |
types | typescript definitions and tests |
misc | miscellaneous supporting scripts |
test_files | test files (pulled from the test files repository) |
After cloning the repo, running make help will display a list of commands.
OSX/Linux
(click to show)
The xlsx.js file is constructed from the files in the bits subdirectory. The build script (run make) will concatenate the individual bits to produce the script. Before submitting a contribution, ensure that running make will produce the xlsx.js file exactly. The simplest way to test is to add the script:
$ git add xlsx.js
$ make clean
$ make
$ git diff xlsx.js
To produce the dist files, run make dist. The dist files are updated in each version release and should not be committed between versions.
Windows
(click to show)
The included make.cmd script will build xlsx.js from the bits directory. Building is as simple as:
> make
To prepare development environment:
> make init
The full list of commands available in Windows are displayed in make help:
make init -- install deps and global modules
make lint -- run eslint linter
make test -- run mocha test suite
make misc -- run smaller test suite
make book -- rebuild README and summary
make help -- display this message
As explained in Test Files, on Windows the release ZIP file must be downloaded and extracted. If Bash on Windows is available, it is possible to run the OSX/Linux workflow. The following steps prepares the environment:
# Install support programs for the build and test commands
sudo apt-get install make git subversion mercurial
# Install nodejs and NPM within the WSL
wget -qO- https://deb.nodesource.com/setup_8.x | sudo bash
sudo apt-get install nodejs
# Install dev dependencies
sudo npm install -g mocha voc blanket xlsjs
Tests
(click to show)
The test_misc target (make test_misc on Linux/OSX / make misc on Windows) runs the targeted feature tests. It should take 5-10 seconds to perform feature tests without testing against the entire test battery. New features should be accompanied with tests for the relevant file formats and features.
For tests involving the read side, an appropriate feature test would involve reading an existing file and checking the resulting workbook object. If a parameter is involved, files should be read with different values to verify that the feature is working as expected.
For tests involving a new write feature which can already be parsed, appropriate feature tests would involve writing a workbook with the feature and then opening and verifying that the feature is preserved.
For tests involving a new write feature without an existing read ability, please add a feature test to the kitchen sink tests/write.js.
References
OSP-covered Specifications (click to show)
MS-CFB: Compound File Binary File FormatMS-CTXLS: Excel Custom Toolbar Binary File FormatMS-EXSPXML3: Excel Calculation Version 2 Web Service XML SchemaMS-ODATA: Open Data Protocol (OData)MS-ODRAW: Office Drawing Binary File FormatMS-ODRAWXML: Office Drawing Extensions to Office Open XML StructureMS-OE376: Office Implementation Information for ECMA-376 Standards SupportMS-OFFCRYPTO: Office Document Cryptography StructureMS-OI29500: Office Implementation Information for ISO/IEC 29500 Standards SupportMS-OLEDS: Object Linking and Embedding (OLE) Data StructuresMS-OLEPS: Object Linking and Embedding (OLE) Property Set Data StructuresMS-OODF3: Office Implementation Information for ODF 1.2 Standards SupportMS-OSHARED: Office Common Data Types and Objects StructuresMS-OVBA: Office VBA File Format StructureMS-XLDM: Spreadsheet Data Model File FormatMS-XLS: Excel Binary File Format (.xls) Structure SpecificationMS-XLSB: Excel (.xlsb) Binary File FormatMS-XLSX: Excel (.xlsx) Extensions to the Office Open XML SpreadsheetML File FormatXLS: Microsoft Office Excel 97-2007 Binary File Format SpecificationRTF: Rich Text Format- ISO/IEC 29500:2012(E) "Information technology — Document description and processing languages — Office Open XML File Formats"
- Open Document Format for Office Applications Version 1.2 (29 September 2011)
- Worksheet File Format (From Lotus) December 1984
Author: SheetJS
Source Code: https://github.com/SheetJS/sheetjs
License: Apache-2.0 License
1650512040
SheetJS Community Edition -- Spreadsheet Data Toolkit
The SheetJS Community Edition offers battle-tested open-source solutions for extracting useful data from almost any complex spreadsheet and generating new spreadsheets that will work with legacy and modern software alike.
SheetJS Pro offers solutions beyond data processing: Edit complex templates with ease; let out your inner Picasso with styling; make custom sheets with images/graphs/PivotTables; evaluate formula expressions and port calculations to web apps; automate common spreadsheet tasks, and much more!
Getting Started
Installation
Standalone Browser Scripts
Each standalone release script is available at https://cdn.sheetjs.com/.
The current version is 0.18.6 and can be referenced as follows:
<!-- use version 0.18.6 -->
<script lang="javascript" src="https://cdn.sheetjs.com/xlsx-0.18.6/package/dist/xlsx.full.min.js"></script>
The latest tag references the latest version and updates with each release:
<!-- use the latest version -->
<script lang="javascript" src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>
For production use, scripts should be downloaded and added to a public folder alongside other scripts.
Browser builds (click to show)
The complete single-file version is generated at dist/xlsx.full.min.js
dist/xlsx.core.min.js omits codepage library (no support for XLS encodings)
A slimmer build is generated at dist/xlsx.mini.min.js. Compared to full build:
- codepage library skipped (no support for XLS encodings)
- no support for XLSB / XLS / Lotus 1-2-3 / SpreadsheetML 2003 / Numbers
- node stream utils removed
These scripts are also available on the CDN:
<!-- use xlsx.mini.min.js from version 0.18.6 -->
<script lang="javascript" src="https://cdn.sheetjs.com/xlsx-0.18.6/package/dist/xlsx.mini.min.js"></script>
Bower will pull the entire repo:
$ bower install js-xlsx
Bower will place the standalone scripts in bower_components/js-xlsx/dist/
Internet Explorer and ECMAScript 3 Compatibility (click to show)
For broad compatibility with JavaScript engines, the library is written using ECMAScript 3 language dialect as well as some ES5 features like Array#forEach. Older browsers require shims to provide missing functions.
To use the shim, add the shim before the script tag that loads xlsx.js:
<!-- add the shim first -->
<script type="text/javascript" src="shim.min.js"></script>
<!-- after the shim is referenced, add the library -->
<script type="text/javascript" src="xlsx.full.min.js"></script>
Due to SSL certificate compatibility issues, it is highly recommended to save the Standalone and Shim scripts from https://cdn.sheetjs.com/ and add to a public directory in the site.
The script also includes IE_LoadFile and IE_SaveFile for loading and saving files in Internet Explorer versions 6-9. The xlsx.extendscript.js script bundles the shim in a format suitable for Photoshop and other Adobe products.
ECMAScript Modules
Browser ESM
The ECMAScript Module build is saved to xlsx.mjs and can be directly added to a page with a script tag using type="module":
<script type="module">
import { read, writeFileXLSX } from "https://cdn.sheetjs.com/xlsx-0.18.6/package/xlsx.mjs";
/* load the codepage support library for extended support with older formats */
import { set_cptable } from "https://cdn.sheetjs.com/xlsx-0.18.6/package/xlsx.mjs";
import * as cptable from 'https://cdn.sheetjs.com/xlsx-0.18.6/package/dist/cpexcel.full.mjs';
set_cptable(cptable);
</script>
Frameworks (Angular, VueJS, React) and Bundlers (webpack, etc)
The NodeJS package is readily installed from the tarballs:
$ npm install --save https://cdn.sheetjs.com/xlsx-0.18.6/xlsx-0.18.6.tgz # npm
$ pnpm install --save https://cdn.sheetjs.com/xlsx-0.18.6/xlsx-0.18.6.tgz # pnpm
$ yarn add --save https://cdn.sheetjs.com/xlsx-0.18.6/xlsx-0.18.6.tgz # yarn
Once installed, the library can be imported under the name xlsx:
import { read, writeFileXLSX } from "xlsx";
/* load the codepage support library for extended support with older formats */
import { set_cptable } from "xlsx";
import * as cptable from 'xlsx/dist/cpexcel.full.mjs';
set_cptable(cptable);
Deno
xlsx.mjs can be imported in Deno:
// @deno-types="https://cdn.sheetjs.com/xlsx-0.18.6/package/types/index.d.ts"
import * as XLSX from 'https://cdn.sheetjs.com/xlsx-0.18.6/package/xlsx.mjs';
/* load the codepage support library for extended support with older formats */
import * as cptable from 'https://cdn.sheetjs.com/xlsx-0.18.6/package/dist/cpexcel.full.mjs';
XLSX.set_cptable(cptable);
NodeJS
Tarballs are available on https://cdn.sheetjs.com.
Each individual version can be referenced using a similar URL pattern. https://cdn.sheetjs.com/xlsx-0.18.6/xlsx-0.18.6.tgz is the URL for 0.18.6
https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz is a link to the latest version and will refresh on each release.
Installation
Tarballs can be directly installed using a package manager:
$ npm install https://cdn.sheetjs.com/xlsx-0.18.6/xlsx-0.18.6.tgz # npm
$ pnpm install https://cdn.sheetjs.com/xlsx-0.18.6/xlsx-0.18.6.tgz # pnpm
$ yarn add https://cdn.sheetjs.com/xlsx-0.18.6/xlsx-0.18.6.tgz # yarn
For general stability, "vendoring" modules is the recommended approach:
Download the tarball (xlsx-0.18.6.tgz) for the desired version. The current version is available at https://cdn.sheetjs.com/xlsx-0.18.6/xlsx-0.18.6.tgz
Create a vendor subdirectory at the root of your project and move the tarball to that folder. Add it to your project repository.
Install the tarball using a package manager:
$ npm install --save file:vendor/xlsx-0.18.6.tgz # npm
$ pnpm install --save file:vendor/xlsx-0.18.6.tgz # pnpm
$ yarn add file:vendor/xlsx-0.18.6.tgz # yarn
The package will be installed and accessible as xlsx.
Usage
By default, the module supports require and it will automatically add support for streams and filesystem access:
var XLSX = require("xlsx");
The module also ships with xlsx.mjs for use with import. The mjs version does not automatically load native node modules:
import * as XLSX from 'xlsx/xlsx.mjs';
/* load 'fs' for readFile and writeFile support */
import * as fs from 'fs';
XLSX.set_fs(fs);
/* load 'stream' for stream support */
import { Readable } from 'stream';
XLSX.stream.set_readable(Readable);
/* load the codepage support library for extended support with older formats */
import * as cpexcel from 'xlsx/dist/cpexcel.full.mjs';
XLSX.set_cptable(cpexcel);
Photoshop and InDesign
dist/xlsx.extendscript.js is an ExtendScript build for Photoshop and InDesign. https://cdn.sheetjs.com/xlsx-0.18.6/package/dist/xlsx.extendscript.js is the current version. After downloading the script, it can be directly referenced with a #include directive:
#include "xlsx.extendscript.js"
Usage
Most scenarios involving spreadsheets and data can be broken into 5 parts:
Acquire Data: Data may be stored anywhere: local or remote files, databases, HTML TABLE, or even generated programmatically in the web browser.
Extract Data: For spreadsheet files, this involves parsing raw bytes to read the cell data. For general JS data, this involves reshaping the data.
Process Data: From generating summary statistics to cleaning data records, this step is the heart of the problem.
Package Data: This can involve making a new spreadsheet or serializing with JSON.stringify or writing XML or simply flattening data for UI tools.
Release Data: Spreadsheet files can be uploaded to a server or written locally. Data can be presented to users in an HTML TABLE or data grid.
A common problem involves generating a valid spreadsheet export from data stored in an HTML table. In this example, an HTML TABLE on the page will be scraped, a row will be added to the bottom with the date of the report, and a new file will be generated and downloaded locally. XLSX.writeFile takes care of packaging the data and attempting a local download:
// Acquire Data (reference to the HTML table)
var table_elt = document.getElementById("my-table-id");
// Extract Data (create a workbook object from the table)
var workbook = XLSX.utils.table_to_book(table_elt);
// Process Data (add a new row)
var ws = workbook.Sheets["Sheet1"];
XLSX.utils.sheet_add_aoa(ws, [["Created "+new Date().toISOString()]], {origin:-1});
// Package and Release Data (`writeFile` tries to write and save an XLSB file)
XLSX.writeFile(workbook, "Report.xlsb");
This library tries to simplify steps 2 and 4 with functions to extract useful data from spreadsheet files (read / readFile) and generate new spreadsheet files from data (write / writeFile). Additional utility functions like table_to_book work with other common data sources like HTML tables.
This documentation and various demo projects cover a number of common scenarios and approaches for steps 1 and 5.
Utility functions help with step 3.
"Acquiring and Extracting Data" describes solutions for common data import scenarios.
"Packaging and Releasing Data" describes solutions for common data export scenarios.
"Processing Data" describes solutions for common workbook processing and manipulation scenarios.
"Utility Functions" details utility functions for translating JSON Arrays and other common JS structures into worksheet objects.
The Zen of SheetJS
Data processing should fit in any workflow
The library does not impose a separate lifecycle. It fits nicely in websites and apps built using any framework. The plain JS data objects play nice with Web Workers and future APIs.
JavaScript is a powerful language for data processing
The "Common Spreadsheet Format" is a simple object representation of the core concepts of a workbook. The various functions in the library provide low-level tools for working with the object.
For friendly JS processing, there are utility functions for converting parts of a worksheet to/from an Array of Arrays. The following example combines powerful JS Array methods with a network request library to download data, select the information we want and create a workbook file:
Get Data from a JSON Endpoint and Generate a Workbook (click to show)
The goal is to generate a XLSB workbook of US President names and birthdays.
Acquire Data
Raw Data
https://theunitedstates.io/congress-legislators/executive.json has the desired data. For example, John Adams:
{
"id": { /* (data omitted) */ },
"name": {
"first": "John", // <-- first name
"last": "Adams" // <-- last name
},
"bio": {
"birthday": "1735-10-19", // <-- birthday
"gender": "M"
},
"terms": [
{ "type": "viceprez", /* (other fields omitted) */ },
{ "type": "viceprez", /* (other fields omitted) */ },
{ "type": "prez", /* (other fields omitted) */ } // <-- look for "prez"
]
}
Filtering for Presidents
The dataset includes Aaron Burr, a Vice President who was never President!
Array#filter creates a new array with the desired rows. A President served at least one term with type set to "prez". To test if a particular row has at least one "prez" term, Array#some is another native JS function. The complete filter would be:
const prez = raw_data.filter(row => row.terms.some(term => term.type === "prez"));
Lining up the data
For this example, the name will be the first name combined with the last name (row.name.first + " " + row.name.last) and the birthday will be the subfield row.bio.birthday. Using Array#map, the dataset can be massaged in one call:
const rows = prez.map(row => ({
name: row.name.first + " " + row.name.last,
birthday: row.bio.birthday
}));
The result is an array of "simple" objects with no nesting:
[
{ name: "George Washington", birthday: "1732-02-22" },
{ name: "John Adams", birthday: "1735-10-19" },
// ... one row per President
]
Extract Data
With the cleaned dataset, XLSX.utils.json_to_sheet generates a worksheet:
const worksheet = XLSX.utils.json_to_sheet(rows);
XLSX.utils.book_new creates a new workbook and XLSX.utils.book_append_sheet appends a worksheet to the workbook. The new worksheet will be called "Dates":
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "Dates");
Process Data
Fixing headers
By default, json_to_sheet creates a worksheet with a header row. In this case, the headers come from the JS object keys: "name" and "birthday".
The headers are in cells A1 and B1. XLSX.utils.sheet_add_aoa can write text values to the existing worksheet starting at cell A1:
XLSX.utils.sheet_add_aoa(worksheet, [["Name", "Birthday"]], { origin: "A1" });
Fixing Column Widths
Some of the names are longer than the default column width. Column widths are set by setting the "!cols" worksheet property.
The following line sets the width of column A to approximately 10 characters:
worksheet["!cols"] = [ { wch: 10 } ]; // set column A width to 10 characters
One Array#reduce call over rows can calculate the maximum width:
const max_width = rows.reduce((w, r) => Math.max(w, r.name.length), 10);
worksheet["!cols"] = [ { wch: max_width } ];
Note: If the starting point was a file or HTML table, XLSX.utils.sheet_to_json will generate an array of JS objects.
Package and Release Data
XLSX.writeFile creates a spreadsheet file and tries to write it to the system. In the browser, it will try to prompt the user to download the file. In NodeJS, it will write to the local directory.
XLSX.writeFile(workbook, "Presidents.xlsx");
Complete Example
// Uncomment the next line for use in NodeJS:
// const XLSX = require("xlsx"), axios = require("axios");
(async() => {
/* fetch JSON data and parse */
const url = "https://theunitedstates.io/congress-legislators/executive.json";
const raw_data = (await axios(url, {responseType: "json"})).data;
/* filter for the Presidents */
const prez = raw_data.filter(row => row.terms.some(term => term.type === "prez"));
/* flatten objects */
const rows = prez.map(row => ({
name: row.name.first + " " + row.name.last,
birthday: row.bio.birthday
}));
/* generate worksheet and workbook */
const worksheet = XLSX.utils.json_to_sheet(rows);
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "Dates");
/* fix headers */
XLSX.utils.sheet_add_aoa(worksheet, [["Name", "Birthday"]], { origin: "A1" });
/* calculate column width */
const max_width = rows.reduce((w, r) => Math.max(w, r.name.length), 10);
worksheet["!cols"] = [ { wch: max_width } ];
/* create an XLSX file and try to save to Presidents.xlsx */
XLSX.writeFile(workbook, "Presidents.xlsx");
})();
For use in the web browser, assuming the snippet is saved to snippet.js, script tags should be used to include the axios and xlsx standalone builds:
<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="snippet.js"></script>
File formats are implementation details
The parser covers a wide gamut of common spreadsheet file formats to ensure that "HTML-saved-as-XLS" files work as well as actual XLS or XLSX files.
The writer supports a number of common output formats for broad compatibility with the data ecosystem.
To the greatest extent possible, data processing code should not have to worry about the specific file formats involved.
JS Ecosystem Demos
The demos directory includes sample projects for:
Frameworks and APIs
angularjsangular and ionicknockoutmeteorreact, react-native, nextvue 2.x, weex, nuxtXMLHttpRequest and fetchnodejs serverdatabases and key/value storestyped arrays and math
Bundlers and Tooling
Platforms and Integrations
denoelectron applicationnw.js applicationChrome / Chromium extensionsDownload a Google Sheet locallyAdobe ExtendScriptHeadless Browserscanvas-datagridx-spreadsheetreact-data-gridvue3-table-lightSwift JSC and other engines"serverless" functionsinternet explorer
Other examples are included in the showcase.
https://sheetjs.com/demos/modify.html shows a complete example of reading, modifying, and writing files.
https://github.com/SheetJS/sheetjs/blob/HEAD/bin/xlsx.njs is the command-line tool included with node installations, reading spreadsheet files and exporting the contents in various formats.
Acquiring and Extracting Data
Parsing Workbooks
API
Extract data from spreadsheet bytes
var workbook = XLSX.read(data, opts);
The read method can extract data from spreadsheet bytes stored in a JS string, "binary string", NodeJS buffer or typed array (Uint8Array or ArrayBuffer).
Read spreadsheet bytes from a local file and extract data
var workbook = XLSX.readFile(filename, opts);
The readFile method attempts to read a spreadsheet file at the supplied path. Browsers generally do not allow reading files in this way (it is deemed a security risk), and attempts to read files in this way will throw an error.
The second opts argument is optional. "Parsing Options" covers the supported properties and behaviors.
Examples
Here are a few common scenarios (click on each subtitle to see the code):
Local file in a NodeJS server (click to show)
readFile uses fs.readFileSync under the hood:
var XLSX = require("xlsx");
var workbook = XLSX.readFile("test.xlsx");
For Node ESM, the readFile helper is not enabled. Instead, fs.readFileSync should be used to read the file data as a Buffer for use with XLSX.read:
import { readFileSync } from "fs";
import { read } from "xlsx/xlsx.mjs";
const buf = readFileSync("test.xlsx");
/* buf is a Buffer */
const workbook = read(buf);
Local file in a Deno application (click to show)
readFile uses Deno.readFileSync under the hood:
// @deno-types="https://deno.land/x/sheetjs/types/index.d.ts"
import * as XLSX from 'https://deno.land/x/sheetjs/xlsx.mjs'
const workbook = XLSX.readFile("test.xlsx");
Applications reading files must be invoked with the --allow-read flag. The deno demo has more examples
User-submitted file in a web page ("Drag-and-Drop") (click to show)
For modern websites targeting Chrome 76+, File#arrayBuffer is recommended:
// XLSX is a global from the standalone script
async function handleDropAsync(e) {
e.stopPropagation(); e.preventDefault();
const f = e.dataTransfer.files[0];
/* f is a File */
const data = await f.arrayBuffer();
/* data is an ArrayBuffer */
const workbook = XLSX.read(data);
/* DO SOMETHING WITH workbook HERE */
}
drop_dom_element.addEventListener("drop", handleDropAsync, false);
For maximal compatibility, the FileReader API should be used:
function handleDrop(e) {
e.stopPropagation(); e.preventDefault();
var f = e.dataTransfer.files[0];
/* f is a File */
var reader = new FileReader();
reader.onload = function(e) {
var data = e.target.result;
/* reader.readAsArrayBuffer(file) -> data will be an ArrayBuffer */
var workbook = XLSX.read(data);
/* DO SOMETHING WITH workbook HERE */
};
reader.readAsArrayBuffer(f);
}
drop_dom_element.addEventListener("drop", handleDrop, false);
https://oss.sheetjs.com/sheetjs/ demonstrates the FileReader technique.
User-submitted file with an HTML INPUT element (click to show)
Starting with an HTML INPUT element with type="file":
<input type="file" id="input_dom_element">
For modern websites targeting Chrome 76+, Blob#arrayBuffer is recommended:
// XLSX is a global from the standalone script
async function handleFileAsync(e) {
const file = e.target.files[0];
const data = await file.arrayBuffer();
/* data is an ArrayBuffer */
const workbook = XLSX.read(data);
/* DO SOMETHING WITH workbook HERE */
}
input_dom_element.addEventListener("change", handleFileAsync, false);
For broader support (including IE10+), the FileReader approach is recommended:
function handleFile(e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var data = e.target.result;
/* reader.readAsArrayBuffer(file) -> data will be an ArrayBuffer */
var workbook = XLSX.read(e.target.result);
/* DO SOMETHING WITH workbook HERE */
};
reader.readAsArrayBuffer(file);
}
input_dom_element.addEventListener("change", handleFile, false);
The oldie demo shows an IE-compatible fallback scenario.
Fetching a file in the web browser ("Ajax") (click to show)
For modern websites targeting Chrome 42+, fetch is recommended:
// XLSX is a global from the standalone script
(async() => {
const url = "http://oss.sheetjs.com/test_files/formula_stress_test.xlsx";
const data = await (await fetch(url)).arrayBuffer();
/* data is an ArrayBuffer */
const workbook = XLSX.read(data);
/* DO SOMETHING WITH workbook HERE */
})();
For broader support, the XMLHttpRequest approach is recommended:
var url = "http://oss.sheetjs.com/test_files/formula_stress_test.xlsx";
/* set up async GET request */
var req = new XMLHttpRequest();
req.open("GET", url, true);
req.responseType = "arraybuffer";
req.onload = function(e) {
var workbook = XLSX.read(req.response);
/* DO SOMETHING WITH workbook HERE */
};
req.send();
The xhr demo includes a longer discussion and more examples.
http://oss.sheetjs.com/sheetjs/ajax.html shows fallback approaches for IE6+.
Local file in a PhotoShop or InDesign plugin (click to show)
readFile wraps the File logic in Photoshop and other ExtendScript targets. The specified path should be an absolute path:
#include "xlsx.extendscript.js"
/* Read test.xlsx from the Documents folder */
var workbook = XLSX.readFile(Folder.myDocuments + "/test.xlsx");
The extendscript demo includes a more complex example.
Local file in an Electron app (click to show)
readFile can be used in the renderer process:
/* From the renderer process */
var XLSX = require("xlsx");
var workbook = XLSX.readFile(path);
Electron APIs have changed over time. The electron demo shows a complete example and details the required version-specific settings.
Local file in a mobile app with React Native (click to show)
The react demo includes a sample React Native app.
Since React Native does not provide a way to read files from the filesystem, a third-party library must be used. The following libraries have been tested:
The base64 encoding returns strings compatible with the base64 type:
import XLSX from "xlsx";
import { FileSystem } from "react-native-file-access";
const b64 = await FileSystem.readFile(path, "base64");
/* b64 is a base64 string */
const workbook = XLSX.read(b64, {type: "base64"});
The ascii encoding returns binary strings compatible with the binary type:
import XLSX from "xlsx";
import { readFile } from "react-native-fs";
const bstr = await readFile(path, "ascii");
/* bstr is a binary string */
const workbook = XLSX.read(bstr, {type: "binary"});
NodeJS Server File Uploads (click to show)
read can accept a NodeJS buffer. readFile can read files generated by a HTTP POST request body parser like formidable:
const XLSX = require("xlsx");
const http = require("http");
const formidable = require("formidable");
const server = http.createServer((req, res) => {
const form = new formidable.IncomingForm();
form.parse(req, (err, fields, files) => {
/* grab the first file */
const f = Object.entries(files)[0][1];
const path = f.filepath;
const workbook = XLSX.readFile(path);
/* DO SOMETHING WITH workbook HERE */
});
}).listen(process.env.PORT || 7262);
The server demo has more advanced examples.
Download files in a NodeJS process (click to show)
Node 17.5 and 18.0 have native support for fetch:
const XLSX = require("xlsx");
const data = await (await fetch(url)).arrayBuffer();
/* data is an ArrayBuffer */
const workbook = XLSX.read(data);
For broader compatibility, third-party modules are recommended.
request requires a null encoding to yield Buffers:
var XLSX = require("xlsx");
var request = require("request");
request({url: url, encoding: null}, function(err, resp, body) {
var workbook = XLSX.read(body);
/* DO SOMETHING WITH workbook HERE */
});
axios works the same way in browser and in NodeJS:
const XLSX = require("xlsx");
const axios = require("axios");
(async() => {
const res = await axios.get(url, {responseType: "arraybuffer"});
/* res.data is a Buffer */
const workbook = XLSX.read(res.data);
/* DO SOMETHING WITH workbook HERE */
})();
Download files in an Electron app (click to show)
The net module in the main process can make HTTP/HTTPS requests to external resources. Responses should be manually concatenated using Buffer.concat:
const XLSX = require("xlsx");
const { net } = require("electron");
const req = net.request(url);
req.on("response", (res) => {
const bufs = []; // this array will collect all of the buffers
res.on("data", (chunk) => { bufs.push(chunk); });
res.on("end", () => {
const workbook = XLSX.read(Buffer.concat(bufs));
/* DO SOMETHING WITH workbook HERE */
});
});
req.end();
Readable Streams in NodeJS (click to show)
When dealing with Readable Streams, the easiest approach is to buffer the stream and process the whole thing at the end:
var fs = require("fs");
var XLSX = require("xlsx");
function process_RS(stream, cb) {
var buffers = [];
stream.on("data", function(data) { buffers.push(data); });
stream.on("end", function() {
var buffer = Buffer.concat(buffers);
var workbook = XLSX.read(buffer, {type:"buffer"});
/* DO SOMETHING WITH workbook IN THE CALLBACK */
cb(workbook);
});
}
ReadableStream in the browser (click to show)
When dealing with ReadableStream, the easiest approach is to buffer the stream and process the whole thing at the end:
// XLSX is a global from the standalone script
async function process_RS(stream) {
/* collect data */
const buffers = [];
const reader = stream.getReader();
for(;;) {
const res = await reader.read();
if(res.value) buffers.push(res.value);
if(res.done) break;
}
/* concat */
const out = new Uint8Array(buffers.reduce((acc, v) => acc + v.length, 0));
let off = 0;
for(const u8 of arr) {
out.set(u8, off);
off += u8.length;
}
return out;
}
const data = await process_RS(stream);
/* data is Uint8Array */
const workbook = XLSX.read(data);
More detailed examples are covered in the included demos
Processing JSON and JS Data
JSON and JS data tend to represent single worksheets. This section will use a few utility functions to generate workbooks.
Create a new Workbook
var workbook = XLSX.utils.book_new();
The book_new utility function creates an empty workbook with no worksheets.
Spreadsheet software generally require at least one worksheet and enforce the requirement in the user interface. This library enforces the requirement at write time, throwing errors if an empty workbook is passed to write functions.
API
Create a worksheet from an array of arrays of JS values
var worksheet = XLSX.utils.aoa_to_sheet(aoa, opts);
The aoa_to_sheet utility function walks an "array of arrays" in row-major order, generating a worksheet object. The following snippet generates a sheet with cell A1 set to the string A1, cell B1 set to B1, etc:
var worksheet = XLSX.utils.aoa_to_sheet([
["A1", "B1", "C1"],
["A2", "B2", "C2"],
["A3", "B3", "C3"]
]);
"Array of Arrays Input" describes the function and the optional opts argument in more detail.
Create a worksheet from an array of JS objects
var worksheet = XLSX.utils.json_to_sheet(jsa, opts);
The json_to_sheet utility function walks an array of JS objects in order, generating a worksheet object. By default, it will generate a header row and one row per object in the array. The optional opts argument has settings to control the column order and header output.
"Array of Objects Input" describes the function and the optional opts argument in more detail.
Examples
"Zen of SheetJS" contains a detailed example "Get Data from a JSON Endpoint and Generate a Workbook"
x-spreadsheet is an interactive data grid for previewing and modifying structured data in the web browser. The xspreadsheet demo includes a sample script with the xtos function for converting from x-spreadsheet data object to a workbook. https://oss.sheetjs.com/sheetjs/x-spreadsheet is a live demo.
Records from a database query (SQL or no-SQL) (click to show)
The database demo includes examples of working with databases and query results.
Numerical Computations with TensorFlow.js (click to show)
@tensorflow/tfjs and other libraries expect data in simple arrays, well-suited for worksheets where each column is a data vector. That is the transpose of how most people use spreadsheets, where each row is a vector.
When recovering data from tfjs, the returned data points are stored in a typed array. An array of arrays can be constructed with loops. Array#unshift can prepend a title row before the conversion:
const XLSX = require("xlsx");
const tf = require('@tensorflow/tfjs');
/* suppose xs and ys are vectors (1D tensors) -> tfarr will be a typed array */
const tfdata = tf.stack([xs, ys]).transpose();
const shape = tfdata.shape;
const tfarr = tfdata.dataSync();
/* construct the array of arrays */
const aoa = [];
for(let j = 0; j < shape[0]; ++j) {
aoa[j] = [];
for(let i = 0; i < shape[1]; ++i) aoa[j][i] = tfarr[j * shape[1] + i];
}
/* add headers to the top */
aoa.unshift(["x", "y"]);
/* generate worksheet */
const worksheet = XLSX.utils.aoa_to_sheet(aoa);
The array demo shows a complete example.
Processing HTML Tables
API
Create a worksheet by scraping an HTML TABLE in the page
var worksheet = XLSX.utils.table_to_sheet(dom_element, opts);
The table_to_sheet utility function takes a DOM TABLE element and iterates through the rows to generate a worksheet. The opts argument is optional. "HTML Table Input" describes the function in more detail.
Create a workbook by scraping an HTML TABLE in the page
var workbook = XLSX.utils.table_to_book(dom_element, opts);
The table_to_book utility function follows the same logic as table_to_sheet. After generating a worksheet, it creates a blank workbook and appends the spreadsheet.
The options argument supports the same options as table_to_sheet, with the addition of a sheet property to control the worksheet name. If the property is missing or no options are specified, the default name Sheet1 is used.
Examples
Here are a few common scenarios (click on each subtitle to see the code):
HTML TABLE element in a webpage (click to show)
<!-- include the standalone script and shim. this uses the UNPKG CDN -->
<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/shim.min.js"></script>
<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>
<!-- example table with id attribute -->
<table id="tableau">
<tr><td>Sheet</td><td>JS</td></tr>
<tr><td>12345</td><td>67</td></tr>
</table>
<!-- this block should appear after the table HTML and the standalone script -->
<script type="text/javascript">
var workbook = XLSX.utils.table_to_book(document.getElementById("tableau"));
/* DO SOMETHING WITH workbook HERE */
</script>
Multiple tables on a web page can be converted to individual worksheets:
/* create new workbook */
var workbook = XLSX.utils.book_new();
/* convert table "table1" to worksheet named "Sheet1" */
var sheet1 = XLSX.utils.table_to_sheet(document.getElementById("table1"));
XLSX.utils.book_append_sheet(workbook, sheet1, "Sheet1");
/* convert table "table2" to worksheet named "Sheet2" */
var sheet2 = XLSX.utils.table_to_sheet(document.getElementById("table2"));
XLSX.utils.book_append_sheet(workbook, sheet2, "Sheet2");
/* workbook now has 2 worksheets */
Alternatively, the HTML code can be extracted and parsed:
var htmlstr = document.getElementById("tableau").outerHTML;
var workbook = XLSX.read(htmlstr, {type:"string"});
Chrome/Chromium Extension (click to show)
The chrome demo shows a complete example and details the required permissions and other settings.
In an extension, it is recommended to generate the workbook in a content script and pass the object back to the extension:
/* in the worker script */
chrome.runtime.onMessage.addListener(function(msg, sender, cb) {
/* pass a message like { sheetjs: true } from the extension to scrape */
if(!msg || !msg.sheetjs) return;
/* create a new workbook */
var workbook = XLSX.utils.book_new();
/* loop through each table element */
var tables = document.getElementsByTagName("table")
for(var i = 0; i < tables.length; ++i) {
var worksheet = XLSX.utils.table_to_sheet(tables[i]);
XLSX.utils.book_append_sheet(workbook, worksheet, "Table" + i);
}
/* pass back to the extension */
return cb(workbook);
});
Server-Side HTML Tables with Headless Chrome (click to show)
The headless demo includes a complete demo to convert HTML files to XLSB workbooks. The core idea is to add the script to the page, parse the table in the page context, generate a base64 workbook and send it back for further processing:
const XLSX = require("xlsx");
const { readFileSync } = require("fs"), puppeteer = require("puppeteer");
const url = `https://sheetjs.com/demos/table`;
/* get the standalone build source (node_modules/xlsx/dist/xlsx.full.min.js) */
const lib = readFileSync(require.resolve("xlsx/dist/xlsx.full.min.js"), "utf8");
(async() => {
/* start browser and go to web page */
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(url, {waitUntil: "networkidle2"});
/* inject library */
await page.addScriptTag({content: lib});
/* this function `s5s` will be called by the script below, receiving the Base64-encoded file */
await page.exposeFunction("s5s", async(b64) => {
const workbook = XLSX.read(b64, {type: "base64" });
/* DO SOMETHING WITH workbook HERE */
});
/* generate XLSB file in webpage context and send back result */
await page.addScriptTag({content: `
/* call table_to_book on first table */
var workbook = XLSX.utils.table_to_book(document.querySelector("TABLE"));
/* generate XLSX file */
var b64 = XLSX.write(workbook, {type: "base64", bookType: "xlsb"});
/* call "s5s" hook exposed from the node process */
window.s5s(b64);
`});
/* cleanup */
await browser.close();
})();
Server-Side HTML Tables with Headless WebKit (click to show)
The headless demo includes a complete demo to convert HTML files to XLSB workbooks using PhantomJS. The core idea is to add the script to the page, parse the table in the page context, generate a binary workbook and send it back for further processing:
var XLSX = require('xlsx');
var page = require('webpage').create();
/* this code will be run in the page */
var code = [ "function(){",
/* call table_to_book on first table */
"var wb = XLSX.utils.table_to_book(document.body.getElementsByTagName('table')[0]);",
/* generate XLSB file and return binary string */
"return XLSX.write(wb, {type: 'binary', bookType: 'xlsb'});",
"}" ].join("");
page.open('https://sheetjs.com/demos/table', function() {
/* Load the browser script from the UNPKG CDN */
page.includeJs("https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js", function() {
/* The code will return an XLSB file encoded as binary string */
var bin = page.evaluateJavaScript(code);
var workbook = XLSX.read(bin, {type: "binary"});
/* DO SOMETHING WITH workbook HERE */
phantom.exit();
});
});
NodeJS HTML Tables without a browser (click to show)
NodeJS does not include a DOM implementation and Puppeteer requires a hefty Chromium build. jsdom is a lightweight alternative:
const XLSX = require("xlsx");
const { readFileSync } = require("fs");
const { JSDOM } = require("jsdom");
/* obtain HTML string. This example reads from test.html */
const html_str = fs.readFileSync("test.html", "utf8");
/* get first TABLE element */
const doc = new JSDOM(html_str).window.document.querySelector("table");
/* generate workbook */
const workbook = XLSX.utils.table_to_book(doc);
Processing Data
The "Common Spreadsheet Format" is a simple object representation of the core concepts of a workbook. The utility functions work with the object representation and are intended to handle common use cases.
Modifying Workbook Structure
API
Append a Worksheet to a Workbook
XLSX.utils.book_append_sheet(workbook, worksheet, sheet_name);
The book_append_sheet utility function appends a worksheet to the workbook. The third argument specifies the desired worksheet name. Multiple worksheets can be added to a workbook by calling the function multiple times. If the worksheet name is already used in the workbook, it will throw an error.
Append a Worksheet to a Workbook and find a unique name
var new_name = XLSX.utils.book_append_sheet(workbook, worksheet, name, true);
If the fourth argument is true, the function will start with the specified worksheet name. If the sheet name exists in the workbook, a new worksheet name will be chosen by finding the name stem and incrementing the counter:
XLSX.utils.book_append_sheet(workbook, sheetA, "Sheet2", true); // Sheet2
XLSX.utils.book_append_sheet(workbook, sheetB, "Sheet2", true); // Sheet3
XLSX.utils.book_append_sheet(workbook, sheetC, "Sheet2", true); // Sheet4
XLSX.utils.book_append_sheet(workbook, sheetD, "Sheet2", true); // Sheet5
List the Worksheet names in tab order
var wsnames = workbook.SheetNames;
The SheetNames property of the workbook object is a list of the worksheet names in "tab order". API functions will look at this array.
Replace a Worksheet in place
workbook.Sheets[sheet_name] = new_worksheet;
The Sheets property of the workbook object is an object whose keys are names and whose values are worksheet objects. By reassigning to a property of the Sheets object, the worksheet object can be changed without disrupting the rest of the worksheet structure.
Examples
Add a new worksheet to a workbook (click to show)
This example uses XLSX.utils.aoa_to_sheet.
var ws_name = "SheetJS";
/* Create worksheet */
var ws_data = [
[ "S", "h", "e", "e", "t", "J", "S" ],
[ 1 , 2 , 3 , 4 , 5 ]
];
var ws = XLSX.utils.aoa_to_sheet(ws_data);
/* Add the worksheet to the workbook */
XLSX.utils.book_append_sheet(wb, ws, ws_name);
Modifying Cell Values
API
Modify a single cell value in a worksheet
XLSX.utils.sheet_add_aoa(worksheet, [[new_value]], { origin: address });
Modify multiple cell values in a worksheet
XLSX.utils.sheet_add_aoa(worksheet, aoa, opts);
The sheet_add_aoa utility function modifies cell values in a worksheet. The first argument is the worksheet object. The second argument is an array of arrays of values. The origin key of the third argument controls where cells will be written. The following snippet sets B3=1 and E5="abc":
XLSX.utils.sheet_add_aoa(worksheet, [
[1], // <-- Write 1 to cell B3
, // <-- Do nothing in row 4
[/*B5*/, /*C5*/, /*D5*/, "abc"] // <-- Write "abc" to cell E5
], { origin: "B3" });
"Array of Arrays Input" describes the function and the optional opts argument in more detail.
Examples
Appending rows to a worksheet (click to show)
The special origin value -1 instructs sheet_add_aoa to start in column A of the row after the last row in the range, appending the data:
XLSX.utils.sheet_add_aoa(worksheet, [
["first row after data", 1],
["second row after data", 2]
], { origin: -1 });
Modifying Other Worksheet / Workbook / Cell Properties
The "Common Spreadsheet Format" section describes the object structures in greater detail.
Packaging and Releasing Data
Writing Workbooks
API
Generate spreadsheet bytes (file) from data
var data = XLSX.write(workbook, opts);
The write method attempts to package data from the workbook into a file in memory. By default, XLSX files are generated, but that can be controlled with the bookType property of the opts argument. Based on the type option, the data can be stored as a "binary string", JS string, Uint8Array or Buffer.
The second opts argument is required. "Writing Options" covers the supported properties and behaviors.
Generate and attempt to save file
XLSX.writeFile(workbook, filename, opts);
The writeFile method packages the data and attempts to save the new file. The export file format is determined by the extension of filename (SheetJS.xlsx signals XLSX export, SheetJS.xlsb signals XLSB export, etc).
The writeFile method uses platform-specific APIs to initiate the file save. In NodeJS, fs.readFileSync can create a file. In the web browser, a download is attempted using the HTML5 download attribute, with fallbacks for IE.
Generate and attempt to save an XLSX file
XLSX.writeFileXLSX(workbook, filename, opts);
The writeFile method embeds a number of different export functions. This is great for developer experience but not amenable to tree shaking using the current developer tools. When only XLSX exports are needed, this method avoids referencing the other export functions.
The second opts argument is optional. "Writing Options" covers the supported properties and behaviors.
Examples
Local file in a NodeJS server (click to show)
writeFile uses fs.writeFileSync in server environments:
var XLSX = require("xlsx");
/* output format determined by filename */
XLSX.writeFile(workbook, "out.xlsb");
For Node ESM, the writeFile helper is not enabled. Instead, fs.writeFileSync should be used to write the file data to a Buffer for use with XLSX.write:
import { writeFileSync } from "fs";
import { write } from "xlsx/xlsx.mjs";
const buf = write(workbook, {type: "buffer", bookType: "xlsb"});
/* buf is a Buffer */
const workbook = writeFileSync("out.xlsb", buf);
Local file in a Deno application (click to show)
writeFile uses Deno.writeFileSync under the hood:
// @deno-types="https://deno.land/x/sheetjs/types/index.d.ts"
import * as XLSX from 'https://deno.land/x/sheetjs/xlsx.mjs'
XLSX.writeFile(workbook, "test.xlsx");
Applications writing files must be invoked with the --allow-write flag. The deno demo has more examples
Local file in a PhotoShop or InDesign plugin (click to show)
writeFile wraps the File logic in Photoshop and other ExtendScript targets. The specified path should be an absolute path:
#include "xlsx.extendscript.js"
/* output format determined by filename */
XLSX.writeFile(workbook, "out.xlsx");
/* at this point, out.xlsx is a file that you can distribute */
The extendscript demo includes a more complex example.
Download a file in the browser to the user machine (click to show)
XLSX.writeFile wraps a few techniques for triggering a file save:
URLbrowser API creates an object URL for the file, which the library uses by creating a link and forcing a click. It is supported in modern browsers.msSaveBlobis an IE10+ API for triggering a file save.IE_FileSaveuses VBScript and ActiveX to write a file in IE6+ for Windows XP and Windows 7. The shim must be included in the containing HTML page.
There is no standard way to determine if the actual file has been downloaded.
/* output format determined by filename */
XLSX.writeFile(workbook, "out.xlsb");
/* at this point, out.xlsb will have been downloaded */
Download a file in legacy browsers (click to show)
XLSX.writeFile techniques work for most modern browsers as well as older IE. For much older browsers, there are workarounds implemented by wrapper libraries.
FileSaver.js implements saveAs. Note: XLSX.writeFile will automatically call saveAs if available.
/* bookType can be any supported output type */
var wopts = { bookType:"xlsx", bookSST:false, type:"array" };
var wbout = XLSX.write(workbook,wopts);
/* the saveAs call downloads a file on the local machine */
saveAs(new Blob([wbout],{type:"application/octet-stream"}), "test.xlsx");
Downloadify uses a Flash SWF button to generate local files, suitable for environments where ActiveX is unavailable:
Downloadify.create(id,{
/* other options are required! read the downloadify docs for more info */
filename: "test.xlsx",
data: function() { return XLSX.write(wb, {bookType:"xlsx", type:"base64"}); },
append: false,
dataType: "base64"
});
The oldie demo shows an IE-compatible fallback scenario.
Browser upload file (ajax) (click to show)
A complete example using XHR is included in the XHR demo, along with examples for fetch and wrapper libraries. This example assumes the server can handle Base64-encoded files (see the demo for a basic nodejs server):
/* in this example, send a base64 string to the server */
var wopts = { bookType:"xlsx", bookSST:false, type:"base64" };
var wbout = XLSX.write(workbook,wopts);
var req = new XMLHttpRequest();
req.open("POST", "/upload", true);
var formdata = new FormData();
formdata.append("file", "test.xlsx"); // <-- server expects `file` to hold name
formdata.append("data", wbout); // <-- `data` holds the base64-encoded data
req.send(formdata);
PhantomJS (Headless Webkit) File Generation (click to show)
The headless demo includes a complete demo to convert HTML files to XLSB workbooks using PhantomJS. PhantomJS fs.write supports writing files from the main process but has a different interface from the NodeJS fs module:
var XLSX = require('xlsx');
var fs = require('fs');
/* generate a binary string */
var bin = XLSX.write(workbook, { type:"binary", bookType: "xlsx" });
/* write to file */
fs.write("test.xlsx", bin, "wb");
Note: The section "Processing HTML Tables" shows how to generate a workbook from HTML tables in a page in "Headless WebKit".
The included demos cover mobile apps and other special deployments.
Writing Examples
- http://sheetjs.com/demos/table.html exporting an HTML table
- http://sheetjs.com/demos/writexlsx.html generates a simple file
Streaming Write
The streaming write functions are available in the XLSX.stream object. They take the same arguments as the normal write functions but return a NodeJS Readable Stream.
XLSX.stream.to_csvis the streaming version ofXLSX.utils.sheet_to_csv.XLSX.stream.to_htmlis the streaming version ofXLSX.utils.sheet_to_html.XLSX.stream.to_jsonis the streaming version ofXLSX.utils.sheet_to_json.
nodejs convert to CSV and write file (click to show)
var output_file_name = "out.csv";
var stream = XLSX.stream.to_csv(worksheet);
stream.pipe(fs.createWriteStream(output_file_name));
nodejs write JSON stream to screen (click to show)
/* to_json returns an object-mode stream */
var stream = XLSX.stream.to_json(worksheet, {raw:true});
/* the following stream converts JS objects to text via JSON.stringify */
var conv = new Transform({writableObjectMode:true});
conv._transform = function(obj, e, cb){ cb(null, JSON.stringify(obj) + "\n"); };
stream.pipe(conv); conv.pipe(process.stdout);
Exporting NUMBERS files (click to show)
The NUMBERS writer requires a fairly large base. The supplementary xlsx.zahl scripts provide support. xlsx.zahl.js is designed for standalone and NodeJS use, while xlsx.zahl.mjs is suitable for ESM.
Browser
<meta charset="utf8">
<script src="xlsx.full.min.js"></script>
<script src="xlsx.zahl.js"></script>
<script>
var wb = XLSX.utils.book_new(); var ws = XLSX.utils.aoa_to_sheet([
["SheetJS", "<3","விரிதாள்"],
[72,,"Arbeitsblätter"],
[,62,"数据"],
[true,false,],
]); XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
XLSX.writeFile(wb, "textport.numbers", {numbers: XLSX_ZAHL, compression: true});
</script>
Node
var XLSX = require("./xlsx.flow");
var XLSX_ZAHL = require("./dist/xlsx.zahl");
var wb = XLSX.utils.book_new(); var ws = XLSX.utils.aoa_to_sheet([
["SheetJS", "<3","விரிதாள்"],
[72,,"Arbeitsblätter"],
[,62,"数据"],
[true,false,],
]); XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
XLSX.writeFile(wb, "textport.numbers", {numbers: XLSX_ZAHL, compression: true});
Deno
import * as XLSX from './xlsx.mjs';
import XLSX_ZAHL from './dist/xlsx.zahl.mjs';
var wb = XLSX.utils.book_new(); var ws = XLSX.utils.aoa_to_sheet([
["SheetJS", "<3","விரிதாள்"],
[72,,"Arbeitsblätter"],
[,62,"数据"],
[true,false,],
]); XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
XLSX.writeFile(wb, "textports.numbers", {numbers: XLSX_ZAHL, compression: true});
https://github.com/sheetjs/sheetaki pipes write streams to nodejs response.
Generating JSON and JS Data
JSON and JS data tend to represent single worksheets. The utility functions in this section work with single worksheets.
The "Common Spreadsheet Format" section describes the object structure in more detail. workbook.SheetNames is an ordered list of the worksheet names. workbook.Sheets is an object whose keys are sheet names and whose values are worksheet objects.
The "first worksheet" is stored at workbook.Sheets[workbook.SheetNames[0]].
API
Create an array of JS objects from a worksheet
var jsa = XLSX.utils.sheet_to_json(worksheet, opts);
Create an array of arrays of JS values from a worksheet
var aoa = XLSX.utils.sheet_to_json(worksheet, {...opts, header: 1});
The sheet_to_json utility function walks a workbook in row-major order, generating an array of objects. The second opts argument controls a number of export decisions including the type of values (JS values or formatted text). The "JSON" section describes the argument in more detail.
By default, sheet_to_json scans the first row and uses the values as headers. With the header: 1 option, the function exports an array of arrays of values.
Examples
x-spreadsheet is an interactive data grid for previewing and modifying structured data in the web browser. The xspreadsheet demo includes a sample script with the stox function for converting from a workbook to x-spreadsheet data object. https://oss.sheetjs.com/sheetjs/x-spreadsheet is a live demo.
Previewing data in a React data grid (click to show)
react-data-grid is a data grid tailored for react. It expects two properties: rows of data objects and columns which describe the columns. For the purposes of massaging the data to fit the react data grid API it is easiest to start from an array of arrays.
This demo starts by fetching a remote file and using XLSX.read to extract:
import { useEffect, useState } from "react";
import DataGrid from "react-data-grid";
import { read, utils } from "xlsx";
const url = "https://oss.sheetjs.com/test_files/RkNumber.xls";
export default function App() {
const [columns, setColumns] = useState([]);
const [rows, setRows] = useState([]);
useEffect(() => {(async () => {
const wb = read(await (await fetch(url)).arrayBuffer(), { WTF: 1 });
/* use sheet_to_json with header: 1 to generate an array of arrays */
const data = utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], { header: 1 });
/* see react-data-grid docs to understand the shape of the expected data */
setColumns(data[0].map((r) => ({ key: r, name: r })));
setRows(data.slice(1).map((r) => r.reduce((acc, x, i) => {
acc[data[0][i]] = x;
return acc;
}, {})));
})(); });
return <DataGrid columns={columns} rows={rows} />;
}
Previewing data in a VueJS data grid (click to show)
vue3-table-lite is a simple VueJS 3 data table. It is featured in the VueJS demo.
Populating a database (SQL or no-SQL) (click to show)
The database demo includes examples of working with databases and query results.
Numerical Computations with TensorFlow.js (click to show)
@tensorflow/tfjs and other libraries expect data in simple arrays, well-suited for worksheets where each column is a data vector. That is the transpose of how most people use spreadsheets, where each row is a vector.
A single Array#map can pull individual named rows from sheet_to_json export:
const XLSX = require("xlsx");
const tf = require('@tensorflow/tfjs');
const key = "age"; // this is the field we want to pull
const ages = XLSX.utils.sheet_to_json(worksheet).map(r => r[key]);
const tf_data = tf.tensor1d(ages);
All fields can be processed at once using a transpose of the 2D tensor generated with the sheet_to_json export with header: 1. The first row, if it contains header labels, should be removed with a slice:
const XLSX = require("xlsx");
const tf = require('@tensorflow/tfjs');
/* array of arrays of the data starting on the second row */
const aoa = XLSX.utils.sheet_to_json(worksheet, {header: 1}).slice(1);
/* dataset in the "correct orientation" */
const tf_dataset = tf.tensor2d(aoa).transpose();
/* pull out each dataset with a slice */
const tf_field0 = tf_dataset.slice([0,0], [1,tensor.shape[1]]).flatten();
const tf_field1 = tf_dataset.slice([1,0], [1,tensor.shape[1]]).flatten();
The array demo shows a complete example.
Generating HTML Tables
API
Generate HTML Table from Worksheet
var html = XLSX.utils.sheet_to_html(worksheet);
The sheet_to_html utility function generates HTML code based on the worksheet data. Each cell in the worksheet is mapped to a <TD> element. Merged cells in the worksheet are serialized by setting colspan and rowspan attributes.
Examples
The sheet_to_html utility function generates HTML code that can be added to any DOM element by setting the innerHTML:
var container = document.getElementById("tavolo");
container.innerHTML = XLSX.utils.sheet_to_html(worksheet);
Combining with fetch, constructing a site from a workbook is straightforward:
Vanilla JS + HTML fetch workbook and generate table previews (click to show)
<body>
<style>TABLE { border-collapse: collapse; } TD { border: 1px solid; }</style>
<div id="tavolo"></div>
<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>
<script type="text/javascript">
(async() => {
/* fetch and parse workbook -- see the fetch example for details */
const workbook = XLSX.read(await (await fetch("sheetjs.xlsx")).arrayBuffer());
let output = [];
/* loop through the worksheet names in order */
workbook.SheetNames.forEach(name => {
/* generate HTML from the corresponding worksheets */
const worksheet = workbook.Sheets[name];
const html = XLSX.utils.sheet_to_html(worksheet);
/* add a header with the title name followed by the table */
output.push(`<H3>${name}</H3>${html}`);
});
/* write to the DOM at the end */
tavolo.innerHTML = output.join("\n");
})();
</script>
</body>
React fetch workbook and generate HTML table previews (click to show)
It is generally recommended to use a React-friendly workflow, but it is possible to generate HTML and use it in React with dangerouslySetInnerHTML:
function Tabeller(props) {
/* the workbook object is the state */
const [workbook, setWorkbook] = React.useState(XLSX.utils.book_new());
/* fetch and update the workbook with an effect */
React.useEffect(() => { (async() => {
/* fetch and parse workbook -- see the fetch example for details */
const wb = XLSX.read(await (await fetch("sheetjs.xlsx")).arrayBuffer());
setWorkbook(wb);
})(); });
return workbook.SheetNames.map(name => (<>
<h3>name</h3>
<div dangerouslySetInnerHTML={{
/* this __html mantra is needed to set the inner HTML */
__html: XLSX.utils.sheet_to_html(workbook.Sheets[name])
}} />
</>));
}
The react demo includes more React examples.
VueJS fetch workbook and generate HTML table previews (click to show)
It is generally recommended to use a VueJS-friendly workflow, but it is possible to generate HTML and use it in VueJS with the v-html directive:
import { read, utils } from 'xlsx';
import { reactive } from 'vue';
const S5SComponent = {
mounted() { (async() => {
/* fetch and parse workbook -- see the fetch example for details */
const workbook = read(await (await fetch("sheetjs.xlsx")).arrayBuffer());
/* loop through the worksheet names in order */
workbook.SheetNames.forEach(name => {
/* generate HTML from the corresponding worksheets */
const html = utils.sheet_to_html(workbook.Sheets[name]);
/* add to state */
this.wb.wb.push({ name, html });
});
})(); },
/* this state mantra is required for array updates to work */
setup() { return { wb: reactive({ wb: [] }) }; },
template: `
<div v-for="ws in wb.wb" :key="ws.name">
<h3>{{ ws.name }}</h3>
<div v-html="ws.html"></div>
</div>`
};
The vuejs demo includes more React examples.
Generating Single-Worksheet Snapshots
The sheet_to_* functions accept a worksheet object.
API
Generate a CSV from a single worksheet
var csv = XLSX.utils.sheet_to_csv(worksheet, opts);
This snapshot is designed to replicate the "CSV UTF8 (.csv)" output type. "Delimiter-Separated Output" describes the function and the optional opts argument in more detail.
Generate "Text" from a single worksheet
var txt = XLSX.utils.sheet_to_txt(worksheet, opts);
This snapshot is designed to replicate the "UTF16 Text (.txt)" output type. "Delimiter-Separated Output" describes the function and the optional opts argument in more detail.
Generate a list of formulae from a single worksheet
var fmla = XLSX.utils.sheet_to_formulae(worksheet);
This snapshot generates an array of entries representing the embedded formulae. Array formulae are rendered in the form range=formula while plain cells are rendered in the form cell=formula or value. String literals are prefixed with an apostrophe ', consistent with Excel's formula bar display.
"Formulae Output" describes the function in more detail.
Interface
XLSX is the exposed variable in the browser and the exported node variable
XLSX.version is the version of the library (added by the build script).
XLSX.SSF is an embedded version of the format library.
Parsing functions
XLSX.read(data, read_opts) attempts to parse data.
XLSX.readFile(filename, read_opts) attempts to read filename and parse.
Parse options are described in the Parsing Options section.
Writing functions
XLSX.write(wb, write_opts) attempts to write the workbook wb
XLSX.writeFile(wb, filename, write_opts) attempts to write wb to filename. In browser-based environments, it will attempt to force a client-side download.
XLSX.writeFileAsync(filename, wb, o, cb) attempts to write wb to filename. If o is omitted, the writer will use the third argument as the callback.
XLSX.stream contains a set of streaming write functions.
Write options are described in the Writing Options section.
Utilities
Utilities are available in the XLSX.utils object and are described in the Utility Functions section:
Constructing:
book_newcreates an empty workbookbook_append_sheetadds a worksheet to a workbook
Importing:
aoa_to_sheetconverts an array of arrays of JS data to a worksheet.json_to_sheetconverts an array of JS objects to a worksheet.table_to_sheetconverts a DOM TABLE element to a worksheet.sheet_add_aoaadds an array of arrays of JS data to an existing worksheet.sheet_add_jsonadds an array of JS objects to an existing worksheet.
Exporting:
sheet_to_jsonconverts a worksheet object to an array of JSON objects.sheet_to_csvgenerates delimiter-separated-values output.sheet_to_txtgenerates UTF16 formatted text.sheet_to_htmlgenerates HTML output.sheet_to_formulaegenerates a list of the formulae (with value fallbacks).
Cell and cell address manipulation:
format_cellgenerates the text value for a cell (using number formats).encode_row / decode_rowconverts between 0-indexed rows and 1-indexed rows.encode_col / decode_colconverts between 0-indexed columns and column names.encode_cell / decode_cellconverts cell addresses.encode_range / decode_rangeconverts cell ranges.
Common Spreadsheet Format
SheetJS conforms to the Common Spreadsheet Format (CSF):
General Structures
Cell address objects are stored as {c:C, r:R} where C and R are 0-indexed column and row numbers, respectively. For example, the cell address B5 is represented by the object {c:1, r:4}.
Cell range objects are stored as {s:S, e:E} where S is the first cell and E is the last cell in the range. The ranges are inclusive. For example, the range A3:B7 is represented by the object {s:{c:0, r:2}, e:{c:1, r:6}}. Utility functions perform a row-major order walk traversal of a sheet range:
for(var R = range.s.r; R <= range.e.r; ++R) {
for(var C = range.s.c; C <= range.e.c; ++C) {
var cell_address = {c:C, r:R};
/* if an A1-style address is needed, encode the address */
var cell_ref = XLSX.utils.encode_cell(cell_address);
}
}
Cell Object
Cell objects are plain JS objects with keys and values following the convention:
| Key | Description |
|---|---|
v | raw value (see Data Types section for more info) |
w | formatted text (if applicable) |
t | type: b Boolean, e Error, n Number, d Date, s Text, z Stub |
f | cell formula encoded as an A1-style string (if applicable) |
F | range of enclosing array if formula is array formula (if applicable) |
D | if true, array formula is dynamic (if applicable) |
r | rich text encoding (if applicable) |
h | HTML rendering of the rich text (if applicable) |
c | comments associated with the cell |
z | number format string associated with the cell (if requested) |
l | cell hyperlink object (.Target holds link, .Tooltip is tooltip) |
s | the style/theme of the cell (if applicable) |
Built-in export utilities (such as the CSV exporter) will use the w text if it is available. To change a value, be sure to delete cell.w (or set it to undefined) before attempting to export. The utilities will regenerate the w text from the number format (cell.z) and the raw value if possible.
The actual array formula is stored in the f field of the first cell in the array range. Other cells in the range will omit the f field.
Data Types
The raw value is stored in the v value property, interpreted based on the t type property. This separation allows for representation of numbers as well as numeric text. There are 6 valid cell types:
| Type | Description |
|---|---|
b | Boolean: value interpreted as JS boolean |
e | Error: value is a numeric code and w property stores common name ** |
n | Number: value is a JS number ** |
d | Date: value is a JS Date object or string to be parsed as Date ** |
s | Text: value interpreted as JS string and written as text ** |
z | Stub: blank stub cell that is ignored by data processing utilities ** |
Error values and interpretation (click to show)
| Value | Error Meaning |
|---|---|
0x00 | #NULL! |
0x07 | #DIV/0! |
0x0F | #VALUE! |
0x17 | #REF! |
0x1D | #NAME? |
0x24 | #NUM! |
0x2A | #N/A |
0x2B | #GETTING_DATA |
Type n is the Number type. This includes all forms of data that Excel stores as numbers, such as dates/times and Boolean fields. Excel exclusively uses data that can be fit in an IEEE754 floating point number, just like JS Number, so the v field holds the raw number. The w field holds formatted text. Dates are stored as numbers by default and converted with XLSX.SSF.parse_date_code.
Type d is the Date type, generated only when the option cellDates is passed. Since JSON does not have a natural Date type, parsers are generally expected to store ISO 8601 Date strings like you would get from date.toISOString(). On the other hand, writers and exporters should be able to handle date strings and JS Date objects. Note that Excel disregards timezone modifiers and treats all dates in the local timezone. The library does not correct for this error.
Type s is the String type. Values are explicitly stored as text. Excel will interpret these cells as "number stored as text". Generated Excel files automatically suppress that class of error, but other formats may elicit errors.
Type z represents blank stub cells. They are generated in cases where cells have no assigned value but hold comments or other metadata. They are ignored by the core library data processing utility functions. By default these cells are not generated; the parser sheetStubs option must be set to true.
Dates
Excel Date Code details (click to show)
By default, Excel stores dates as numbers with a format code that specifies date processing. For example, the date 19-Feb-17 is stored as the number 42785 with a number format of d-mmm-yy. The SSF module understands number formats and performs the appropriate conversion.
XLSX also supports a special date type d where the data is an ISO 8601 date string. The formatter converts the date back to a number.
The default behavior for all parsers is to generate number cells. Setting cellDates to true will force the generators to store dates.
Time Zones and Dates (click to show)
Excel has no native concept of universal time. All times are specified in the local time zone. Excel limitations prevent specifying true absolute dates.
Following Excel, this library treats all dates as relative to local time zone.
Epochs: 1900 and 1904 (click to show)
Excel supports two epochs (January 1 1900 and January 1 1904). The workbook's epoch can be determined by examining the workbook's wb.Workbook.WBProps.date1904 property:
!!(((wb.Workbook||{}).WBProps||{}).date1904)
Sheet Objects
Each key that does not start with ! maps to a cell (using A-1 notation)
sheet[address] returns the cell object for the specified address.
Special sheet keys (accessible as sheet[key], each starting with !):
sheet['!ref']: A-1 based range representing the sheet range. Functions that work with sheets should use this parameter to determine the range. Cells that are assigned outside of the range are not processed. In particular, when writing a sheet by hand, cells outside of the range are not included
Functions that handle sheets should test for the presence of !ref field. If the !ref is omitted or is not a valid range, functions are free to treat the sheet as empty or attempt to guess the range. The standard utilities that ship with this library treat sheets as empty (for example, the CSV output is empty string).
When reading a worksheet with the sheetRows property set, the ref parameter will use the restricted range. The original range is set at ws['!fullref']
sheet['!margins']: Object representing the page margins. The default values follow Excel's "normal" preset. Excel also has a "wide" and a "narrow" preset but they are stored as raw measurements. The main properties are listed below:
Page margin details (click to show)
| key | description | "normal" | "wide" | "narrow" |
|---|---|---|---|---|
left | left margin (inches) | 0.7 | 1.0 | 0.25 |
right | right margin (inches) | 0.7 | 1.0 | 0.25 |
top | top margin (inches) | 0.75 | 1.0 | 0.75 |
bottom | bottom margin (inches) | 0.75 | 1.0 | 0.75 |
header | header margin (inches) | 0.3 | 0.5 | 0.3 |
footer | footer margin (inches) | 0.3 | 0.5 | 0.3 |
/* Set worksheet sheet to "normal" */
ws["!margins"]={left:0.7, right:0.7, top:0.75,bottom:0.75,header:0.3,footer:0.3}
/* Set worksheet sheet to "wide" */
ws["!margins"]={left:1.0, right:1.0, top:1.0, bottom:1.0, header:0.5,footer:0.5}
/* Set worksheet sheet to "narrow" */
ws["!margins"]={left:0.25,right:0.25,top:0.75,bottom:0.75,header:0.3,footer:0.3}
Worksheet Object
In addition to the base sheet keys, worksheets also add:
ws['!cols']: array of column properties objects. Column widths are actually stored in files in a normalized manner, measured in terms of the "Maximum Digit Width" (the largest width of the rendered digits 0-9, in pixels). When parsed, the column objects store the pixel width in the wpx field, character width in the wch field, and the maximum digit width in the MDW field.
ws['!rows']: array of row properties objects as explained later in the docs. Each row object encodes properties including row height and visibility.
ws['!merges']: array of range objects corresponding to the merged cells in the worksheet. Plain text formats do not support merge cells. CSV export will write all cells in the merge range if they exist, so be sure that only the first cell (upper-left) in the range is set.
ws['!outline']: configure how outlines should behave. Options default to the default settings in Excel 2019:
| key | Excel feature | default |
|---|---|---|
above | Uncheck "Summary rows below detail" | false |
left | Uncheck "Summary rows to the right of detail" | false |
ws['!protect']: object of write sheet protection properties. Thepasswordkey specifies the password for formats that support password-protected sheets (XLSX/XLSB/XLS). The writer uses the XOR obfuscation method. The following keys control the sheet protection -- set tofalseto enable a feature when sheet is locked or set totrueto disable a feature:
Worksheet Protection Details (click to show)
| key | feature (true=disabled / false=enabled) | default |
|---|---|---|
selectLockedCells | Select locked cells | enabled |
selectUnlockedCells | Select unlocked cells | enabled |
formatCells | Format cells | disabled |
formatColumns | Format columns | disabled |
formatRows | Format rows | disabled |
insertColumns | Insert columns | disabled |
insertRows | Insert rows | disabled |
insertHyperlinks | Insert hyperlinks | disabled |
deleteColumns | Delete columns | disabled |
deleteRows | Delete rows | disabled |
sort | Sort | disabled |
autoFilter | Filter | disabled |
pivotTables | Use PivotTable reports | disabled |
objects | Edit objects | enabled |
scenarios | Edit scenarios | enabled |
ws['!autofilter']: AutoFilter object following the schema:
type AutoFilter = {
ref:string; // A-1 based range representing the AutoFilter table range
}
Chartsheet Object
Chartsheets are represented as standard sheets. They are distinguished with the !type property set to "chart".
The underlying data and !ref refer to the cached data in the chartsheet. The first row of the chartsheet is the underlying header.
Macrosheet Object
Macrosheets are represented as standard sheets. They are distinguished with the !type property set to "macro".
Dialogsheet Object
Dialogsheets are represented as standard sheets. They are distinguished with the !type property set to "dialog".
Workbook Object
workbook.SheetNames is an ordered list of the sheets in the workbook
wb.Sheets[sheetname] returns an object representing the worksheet.
wb.Props is an object storing the standard properties. wb.Custprops stores custom properties. Since the XLS standard properties deviate from the XLSX standard, XLS parsing stores core properties in both places.
wb.Workbook stores workbook-level attributes.
Workbook File Properties
The various file formats use different internal names for file properties. The workbook Props object normalizes the names:
File Properties (click to show)
| JS Name | Excel Description |
|---|---|
Title | Summary tab "Title" |
Subject | Summary tab "Subject" |
Author | Summary tab "Author" |
Manager | Summary tab "Manager" |
Company | Summary tab "Company" |
Category | Summary tab "Category" |
Keywords | Summary tab "Keywords" |
Comments | Summary tab "Comments" |
LastAuthor | Statistics tab "Last saved by" |
CreatedDate | Statistics tab "Created" |
For example, to set the workbook title property:
if(!wb.Props) wb.Props = {};
wb.Props.Title = "Insert Title Here";
Custom properties are added in the workbook Custprops object:
if(!wb.Custprops) wb.Custprops = {};
wb.Custprops["Custom Property"] = "Custom Value";
Writers will process the Props key of the options object:
/* force the Author to be "SheetJS" */
XLSX.write(wb, {Props:{Author:"SheetJS"}});
Workbook-Level Attributes
wb.Workbook stores workbook-level attributes.
Defined Names
wb.Workbook.Names is an array of defined name objects which have the keys:
Defined Name Properties (click to show)
| Key | Description |
|---|---|
Sheet | Name scope. Sheet Index (0 = first sheet) or null (Workbook) |
Name | Case-sensitive name. Standard rules apply ** |
Ref | A1-style Reference ("Sheet1!$A$1:$D$20") |
Comment | Comment (only applicable for XLS/XLSX/XLSB) |
Excel allows two sheet-scoped defined names to share the same name. However, a sheet-scoped name cannot collide with a workbook-scope name. Workbook writers may not enforce this constraint.
Workbook Views
wb.Workbook.Views is an array of workbook view objects which have the keys:
| Key | Description |
|---|---|
RTL | If true, display right-to-left |
Miscellaneous Workbook Properties
wb.Workbook.WBProps holds other workbook properties:
| Key | Description |
|---|---|
CodeName | VBA Project Workbook Code Name |
date1904 | epoch: 0/false for 1900 system, 1/true for 1904 |
filterPrivacy | Warn or strip personally identifying info on save |
Document Features
Even for basic features like date storage, the official Excel formats store the same content in different ways. The parsers are expected to convert from the underlying file format representation to the Common Spreadsheet Format. Writers are expected to convert from CSF back to the underlying file format.
Formulae
The A1-style formula string is stored in the f field. Even though different file formats store the formulae in different ways, the formats are translated. Even though some formats store formulae with a leading equal sign, CSF formulae do not start with =.
Formulae File Format Support (click to show)
| Storage Representation | Formats | Read | Write |
|---|---|---|---|
| A1-style strings | XLSX | ✔ | ✔ |
| RC-style strings | XLML and plain text | ✔ | ✔ |
| BIFF Parsed formulae | XLSB and all XLS formats | ✔ | |
| OpenFormula formulae | ODS/FODS/UOS | ✔ | ✔ |
| Lotus Parsed formulae | All Lotus WK_ formats | ✔ |
Since Excel prohibits named cells from colliding with names of A1 or RC style cell references, a (not-so-simple) regex conversion is possible. BIFF Parsed formulae and Lotus Parsed formulae have to be explicitly unwound. OpenFormula formulae can be converted with regular expressions.
Shared formulae are decompressed and each cell has the formula corresponding to its cell. Writers generally do not attempt to generate shared formulae.
Single-Cell Formulae
For simple formulae, the f key of the desired cell can be set to the actual formula text. This worksheet represents A1=1, A2=2, and A3=A1+A2:
var worksheet = {
"!ref": "A1:A3",
A1: { t:'n', v:1 },
A2: { t:'n', v:2 },
A3: { t:'n', v:3, f:'A1+A2' }
};
Utilities like aoa_to_sheet will accept cell objects in lieu of values:
var worksheet = XLSX.utils.aoa_to_sheet([
[ 1 ], // A1
[ 2 ], // A2
[ {t: "n", v: 3, f: "A1+A2"} ] // A3
]);
Cells with formula entries but no value will be serialized in a way that Excel and other spreadsheet tools will recognize. This library will not automatically compute formula results! For example, the following worksheet will include the BESSELJ function but the result will not be available in JavaScript:
var worksheet = XLSX.utils.aoa_to_sheet([
[ 3.14159, 2 ], // Row "1"
[ { t:'n', f:'BESSELJ(A1,B1)' } ] // Row "2" will be calculated on file open
}
If the actual results are needed in JS, SheetJS Pro offers a formula calculator component for evaluating expressions, updating values and dependent cells, and refreshing entire workbooks.
Array Formulae
Assign an array formula
XLSX.utils.sheet_set_array_formula(worksheet, range, formula);
Array formulae are stored in the top-left cell of the array block. All cells of an array formula have a F field corresponding to the range. A single-cell formula can be distinguished from a plain formula by the presence of F field.
For example, setting the cell C1 to the array formula {=SUM(A1:A3*B1:B3)}:
// API function
XLSX.utils.sheet_set_array_formula(worksheet, "C1", "SUM(A1:A3*B1:B3)");
// ... OR raw operations
worksheet['C1'] = { t:'n', f: "SUM(A1:A3*B1:B3)", F:"C1:C1" };
For a multi-cell array formula, every cell has the same array range but only the first cell specifies the formula. Consider D1:D3=A1:A3*B1:B3:
// API function
XLSX.utils.sheet_set_array_formula(worksheet, "D1:D3", "A1:A3*B1:B3");
// ... OR raw operations
worksheet['D1'] = { t:'n', F:"D1:D3", f:"A1:A3*B1:B3" };
worksheet['D2'] = { t:'n', F:"D1:D3" };
worksheet['D3'] = { t:'n', F:"D1:D3" };
Utilities and writers are expected to check for the presence of a F field and ignore any possible formula element f in cells other than the starting cell. They are not expected to perform validation of the formulae!
Dynamic Array Formulae
Assign a dynamic array formula
XLSX.utils.sheet_set_array_formula(worksheet, range, formula, true);
Released in 2020, Dynamic Array Formulae are supported in the XLSX/XLSM and XLSB file formats. They are represented like normal array formulae but have special cell metadata indicating that the formula should be allowed to adjust the range.
An array formula can be marked as dynamic by setting the cell's D property to true. The F range is expected but can be the set to the current cell:
// API function
XLSX.utils.sheet_set_array_formula(worksheet, "C1", "_xlfn.UNIQUE(A1:A3)", 1);
// ... OR raw operations
worksheet['C1'] = { t: "s", f: "_xlfn.UNIQUE(A1:A3)", F:"C1", D: 1 }; // dynamic
Localization with Function Names
SheetJS operates at the file level. Excel stores formula expressions using the English (United States) function names. For non-English users, Excel uses a localized set of function names.
For example, when the computer language and region is set to French (France), Excel interprets =SOMME(A1:C3) as if SOMME is the SUM function. However, in the actual file, Excel stores SUM(A1:C3).
Prefixed "Future Functions"
Functions introduced in newer versions of Excel are prefixed with _xlfn. when stored in files. When writing formula expressions using these functions, the prefix is required for maximal compatibility:
// Broadest compatibility
XLSX.utils.sheet_set_array_formula(worksheet, "C1", "_xlfn.UNIQUE(A1:A3)", 1);
// Can cause errors in spreadsheet software
XLSX.utils.sheet_set_array_formula(worksheet, "C1", "UNIQUE(A1:A3)", 1);
When reading a file, the xlfn option preserves the prefixes.
Functions requiring `_xlfn.` prefix (click to show)
This list is growing with each Excel release.
ACOT
ACOTH
AGGREGATE
ARABIC
BASE
BETA.DIST
BETA.INV
BINOM.DIST
BINOM.DIST.RANGE
BINOM.INV
BITAND
BITLSHIFT
BITOR
BITRSHIFT
BITXOR
BYCOL
BYROW
CEILING.MATH
CEILING.PRECISE
CHISQ.DIST
CHISQ.DIST.RT
CHISQ.INV
CHISQ.INV.RT
CHISQ.TEST
COMBINA
CONFIDENCE.NORM
CONFIDENCE.T
COT
COTH
COVARIANCE.P
COVARIANCE.S
CSC
CSCH
DAYS
DECIMAL
ERF.PRECISE
ERFC.PRECISE
EXPON.DIST
F.DIST
F.DIST.RT
F.INV
F.INV.RT
F.TEST
FIELDVALUE
FILTERXML
FLOOR.MATH
FLOOR.PRECISE
FORMULATEXT
GAMMA
GAMMA.DIST
GAMMA.INV
GAMMALN.PRECISE
GAUSS
HYPGEOM.DIST
IFNA
IMCOSH
IMCOT
IMCSC
IMCSCH
IMSEC
IMSECH
IMSINH
IMTAN
ISFORMULA
ISOMITTED
ISOWEEKNUM
LAMBDA
LET
LOGNORM.DIST
LOGNORM.INV
MAKEARRAY
MAP
MODE.MULT
MODE.SNGL
MUNIT
NEGBINOM.DIST
NORM.DIST
NORM.INV
NORM.S.DIST
NORM.S.INV
NUMBERVALUE
PDURATION
PERCENTILE.EXC
PERCENTILE.INC
PERCENTRANK.EXC
PERCENTRANK.INC
PERMUTATIONA
PHI
POISSON.DIST
QUARTILE.EXC
QUARTILE.INC
QUERYSTRING
RANDARRAY
RANK.AVG
RANK.EQ
REDUCE
RRI
SCAN
SEC
SECH
SEQUENCE
SHEET
SHEETS
SKEW.P
SORTBY
STDEV.P
STDEV.S
T.DIST
T.DIST.2T
T.DIST.RT
T.INV
T.INV.2T
T.TEST
UNICHAR
UNICODE
UNIQUE
VAR.P
VAR.S
WEBSERVICE
WEIBULL.DIST
XLOOKUP
XOR
Z.TEST
Row and Column Properties
Format Support (click to show)
Row Properties: XLSX/M, XLSB, BIFF8 XLS, XLML, SYLK, DOM, ODS
Column Properties: XLSX/M, XLSB, BIFF8 XLS, XLML, SYLK, DOM
Row and Column properties are not extracted by default when reading from a file and are not persisted by default when writing to a file. The option cellStyles: true must be passed to the relevant read or write function.
Column Properties
The !cols array in each worksheet, if present, is a collection of ColInfo objects which have the following properties:
type ColInfo = {
/* visibility */
hidden?: boolean; // if true, the column is hidden
/* column width is specified in one of the following ways: */
wpx?: number; // width in screen pixels
width?: number; // width in Excel's "Max Digit Width", width*256 is integral
wch?: number; // width in characters
/* other fields for preserving features from files */
level?: number; // 0-indexed outline / group level
MDW?: number; // Excel's "Max Digit Width" unit, always integral
};
Row Properties
The !rows array in each worksheet, if present, is a collection of RowInfo objects which have the following properties:
type RowInfo = {
/* visibility */
hidden?: boolean; // if true, the row is hidden
/* row height is specified in one of the following ways: */
hpx?: number; // height in screen pixels
hpt?: number; // height in points
level?: number; // 0-indexed outline / group level
};
Outline / Group Levels Convention
The Excel UI displays the base outline level as 1 and the max level as 8. Following JS conventions, SheetJS uses 0-indexed outline levels wherein the base outline level is 0 and the max level is 7.
Why are there three width types? (click to show)
There are three different width types corresponding to the three different ways spreadsheets store column widths:
SYLK and other plain text formats use raw character count. Contemporaneous tools like Visicalc and Multiplan were character based. Since the characters had the same width, it sufficed to store a count. This tradition was continued into the BIFF formats.
SpreadsheetML (2003) tried to align with HTML by standardizing on screen pixel count throughout the file. Column widths, row heights, and other measures use pixels. When the pixel and character counts do not align, Excel rounds values.
XLSX internally stores column widths in a nebulous "Max Digit Width" form. The Max Digit Width is the width of the largest digit when rendered (generally the "0" character is the widest). The internal width must be an integer multiple of the the width divided by 256. ECMA-376 describes a formula for converting between pixels and the internal width. This represents a hybrid approach.
Read functions attempt to populate all three properties. Write functions will try to cycle specified values to the desired type. In order to avoid potential conflicts, manipulation should delete the other properties first. For example, when changing the pixel width, delete the wch and width properties.
Implementation details (click to show)
Row Heights
Excel internally stores row heights in points. The default resolution is 72 DPI or 96 PPI, so the pixel and point size should agree. For different resolutions they may not agree, so the library separates the concepts.
Even though all of the information is made available, writers are expected to follow the priority order:
- use
hpxpixel height if available - use
hptpoint height if available
Column Widths
Given the constraints, it is possible to determine the MDW without actually inspecting the font! The parsers guess the pixel width by converting from width to pixels and back, repeating for all possible MDW and selecting the MDW that minimizes the error. XLML actually stores the pixel width, so the guess works in the opposite direction.
Even though all of the information is made available, writers are expected to follow the priority order:
- use
widthfield if available - use
wpxpixel width if available - use
wchcharacter count if available
Number Formats
The cell.w formatted text for each cell is produced from cell.v and cell.z format. If the format is not specified, the Excel General format is used. The format can either be specified as a string or as an index into the format table. Parsers are expected to populate workbook.SSF with the number format table. Writers are expected to serialize the table.
Custom tools should ensure that the local table has each used format string somewhere in the table. Excel convention mandates that the custom formats start at index 164. The following example creates a custom format from scratch:
New worksheet with custom format (click to show)
var wb = {
SheetNames: ["Sheet1"],
Sheets: {
Sheet1: {
"!ref":"A1:C1",
A1: { t:"n", v:10000 }, // <-- General format
B1: { t:"n", v:10000, z: "0%" }, // <-- Builtin format
C1: { t:"n", v:10000, z: "\"T\"\ #0.00" } // <-- Custom format
}
}
}
The rules are slightly different from how Excel displays custom number formats. In particular, literal characters must be wrapped in double quotes or preceded by a backslash. For more info, see the Excel documentation article Create or delete a custom number format or ECMA-376 18.8.31 (Number Formats)
Default Number Formats (click to show)
The default formats are listed in ECMA-376 18.8.30:
| ID | Format |
|---|---|
| 0 | General |
| 1 | 0 |
| 2 | 0.00 |
| 3 | #,##0 |
| 4 | #,##0.00 |
| 9 | 0% |
| 10 | 0.00% |
| 11 | 0.00E+00 |
| 12 | # ?/? |
| 13 | # ??/?? |
| 14 | m/d/yy (see below) |
| 15 | d-mmm-yy |
| 16 | d-mmm |
| 17 | mmm-yy |
| 18 | h:mm AM/PM |
| 19 | h:mm:ss AM/PM |
| 20 | h:mm |
| 21 | h:mm:ss |
| 22 | m/d/yy h:mm |
| 37 | #,##0 ;(#,##0) |
| 38 | #,##0 ;[Red](#,##0) |
| 39 | #,##0.00;(#,##0.00) |
| 40 | #,##0.00;[Red](#,##0.00) |
| 45 | mm:ss |
| 46 | [h]:mm:ss |
| 47 | mmss.0 |
| 48 | ##0.0E+0 |
| 49 | @ |
Format 14 (m/d/yy) is localized by Excel: even though the file specifies that number format, it will be drawn differently based on system settings. It makes sense when the producer and consumer of files are in the same locale, but that is not always the case over the Internet. To get around this ambiguity, parse functions accept the dateNF option to override the interpretation of that specific format string.
Hyperlinks
Format Support (click to show)
Cell Hyperlinks: XLSX/M, XLSB, BIFF8 XLS, XLML, ODS
Tooltips: XLSX/M, XLSB, BIFF8 XLS, XLML
Hyperlinks are stored in the l key of cell objects. The Target field of the hyperlink object is the target of the link, including the URI fragment. Tooltips are stored in the Tooltip field and are displayed when you move your mouse over the text.
For example, the following snippet creates a link from cell A3 to https://sheetjs.com with the tip "Find us @ SheetJS.com!":
ws['A1'].l = { Target:"https://sheetjs.com", Tooltip:"Find us @ SheetJS.com!" };
Note that Excel does not automatically style hyperlinks -- they will generally be displayed as normal text.
Remote Links
HTTP / HTTPS links can be used directly:
ws['A2'].l = { Target:"https://docs.sheetjs.com/#hyperlinks" };
ws['A3'].l = { Target:"http://localhost:7262/yes_localhost_works" };
Excel also supports mailto email links with subject line:
ws['A4'].l = { Target:"mailto:ignored@dev.null" };
ws['A5'].l = { Target:"mailto:ignored@dev.null?subject=Test Subject" };
Local Links
Links to absolute paths should use the file:// URI scheme:
ws['B1'].l = { Target:"file:///SheetJS/t.xlsx" }; /* Link to /SheetJS/t.xlsx */
ws['B2'].l = { Target:"file:///c:/SheetJS.xlsx" }; /* Link to c:\SheetJS.xlsx */
Links to relative paths can be specified without a scheme:
ws['B3'].l = { Target:"SheetJS.xlsb" }; /* Link to SheetJS.xlsb */
ws['B4'].l = { Target:"../SheetJS.xlsm" }; /* Link to ../SheetJS.xlsm */
Relative Paths have undefined behavior in the SpreadsheetML 2003 format. Excel 2019 will treat a ..\ parent mark as two levels up.
Internal Links
Links where the target is a cell or range or defined name in the same workbook ("Internal Links") are marked with a leading hash character:
ws['C1'].l = { Target:"#E2" }; /* Link to cell E2 */
ws['C2'].l = { Target:"#Sheet2!E2" }; /* Link to cell E2 in sheet Sheet2 */
ws['C3'].l = { Target:"#SomeDefinedName" }; /* Link to Defined Name */
Cell Comments
Cell comments are objects stored in the c array of cell objects. The actual contents of the comment are split into blocks based on the comment author. The a field of each comment object is the author of the comment and the t field is the plain text representation.
For example, the following snippet appends a cell comment into cell A1:
if(!ws.A1.c) ws.A1.c = [];
ws.A1.c.push({a:"SheetJS", t:"I'm a little comment, short and stout!"});
Note: XLSB enforces a 54 character limit on the Author name. Names longer than 54 characters may cause issues with other formats.
To mark a comment as normally hidden, set the hidden property:
if(!ws.A1.c) ws.A1.c = [];
ws.A1.c.push({a:"SheetJS", t:"This comment is visible"});
if(!ws.A2.c) ws.A2.c = [];
ws.A2.c.hidden = true;
ws.A2.c.push({a:"SheetJS", t:"This comment will be hidden"});
Threaded Comments
Introduced in Excel 365, threaded comments are plain text comment snippets with author metadata and parent references. They are supported in XLSX and XLSB.
To mark a comment as threaded, each comment part must have a true T property:
if(!ws.A1.c) ws.A1.c = [];
ws.A1.c.push({a:"SheetJS", t:"This is not threaded"});
if(!ws.A2.c) ws.A2.c = [];
ws.A2.c.hidden = true;
ws.A2.c.push({a:"SheetJS", t:"This is threaded", T: true});
ws.A2.c.push({a:"JSSheet", t:"This is also threaded", T: true});
There is no Active Directory or Office 365 metadata associated with authors in a thread.
Sheet Visibility
Excel enables hiding sheets in the lower tab bar. The sheet data is stored in the file but the UI does not readily make it available. Standard hidden sheets are revealed in the "Unhide" menu. Excel also has "very hidden" sheets which cannot be revealed in the menu. It is only accessible in the VB Editor!
The visibility setting is stored in the Hidden property of sheet props array.
More details (click to show)
| Value | Definition |
|---|---|
| 0 | Visible |
| 1 | Hidden |
| 2 | Very Hidden |
With https://rawgit.com/SheetJS/test_files/HEAD/sheet_visibility.xlsx:
> wb.Workbook.Sheets.map(function(x) { return [x.name, x.Hidden] })
[ [ 'Visible', 0 ], [ 'Hidden', 1 ], [ 'VeryHidden', 2 ] ]
Non-Excel formats do not support the Very Hidden state. The best way to test if a sheet is visible is to check if the Hidden property is logical truth:
> wb.Workbook.Sheets.map(function(x) { return [x.name, !x.Hidden] })
[ [ 'Visible', true ], [ 'Hidden', false ], [ 'VeryHidden', false ] ]
VBA and Macros
VBA Macros are stored in a special data blob that is exposed in the vbaraw property of the workbook object when the bookVBA option is true. They are supported in XLSM, XLSB, and BIFF8 XLS formats. The supported format writers automatically insert the data blobs if it is present in the workbook and associate with the worksheet names.
Custom Code Names (click to show)
The workbook code name is stored in wb.Workbook.WBProps.CodeName. By default, Excel will write ThisWorkbook or a translated phrase like DieseArbeitsmappe. Worksheet and Chartsheet code names are in the worksheet properties object at wb.Workbook.Sheets[i].CodeName. Macrosheets and Dialogsheets are ignored.
The readers and writers preserve the code names, but they have to be manually set when adding a VBA blob to a different workbook.
Macrosheets (click to show)
Older versions of Excel also supported a non-VBA "macrosheet" sheet type that stored automation commands. These are exposed in objects with the !type property set to "macro".
Detecting macros in workbooks (click to show)
The vbaraw field will only be set if macros are present, so testing is simple:
function wb_has_macro(wb/*:workbook*/)/*:boolean*/ {
if(!!wb.vbaraw) return true;
const sheets = wb.SheetNames.map((n) => wb.Sheets[n]);
return sheets.some((ws) => !!ws && ws['!type']=='macro');
}
Parsing Options
The exported read and readFile functions accept an options argument:
| Option Name | Default | Description |
|---|---|---|
type | Input data encoding (see Input Type below) | |
raw | false | If true, plain text parsing will not parse values ** |
codepage | If specified, use code page when appropriate ** | |
cellFormula | true | Save formulae to the .f field |
cellHTML | true | Parse rich text and save HTML to the .h field |
cellNF | false | Save number format string to the .z field |
cellStyles | false | Save style/theme info to the .s field |
cellText | true | Generated formatted text to the .w field |
cellDates | false | Store dates as type d (default is n) |
dateNF | If specified, use the string for date code 14 ** | |
sheetStubs | false | Create cell objects of type z for stub cells |
sheetRows | 0 | If >0, read the first sheetRows rows ** |
bookDeps | false | If true, parse calculation chains |
bookFiles | false | If true, add raw files to book object ** |
bookProps | false | If true, only parse enough to get book metadata ** |
bookSheets | false | If true, only parse enough to get the sheet names |
bookVBA | false | If true, copy VBA blob to vbaraw field ** |
password | "" | If defined and file is encrypted, use password ** |
WTF | false | If true, throw errors on unexpected file features ** |
sheets | If specified, only parse specified sheets ** | |
PRN | false | If true, allow parsing of PRN files ** |
xlfn | false | If true, preserve _xlfn. prefixes in formulae ** |
FS | DSV Field Separator override |
- Even if
cellNFis false, formatted text will be generated and saved to.w - In some cases, sheets may be parsed even if
bookSheetsis false. - Excel aggressively tries to interpret values from CSV and other plain text. This leads to surprising behavior! The
rawoption suppresses value parsing. bookSheetsandbookPropscombine to give both sets of informationDepswill be an empty object ifbookDepsis falsebookFilesbehavior depends on file type:keysarray (paths in the ZIP) for ZIP-based formatsfileshash (mapping paths to objects representing the files) for ZIPcfbobject for formats using CFB containers
sheetRows-1rows will be generated when looking at the JSON object output (since the header row is counted as a row when parsing the data)- By default all worksheets are parsed.
sheetsrestricts based on input type:- number: zero-based index of worksheet to parse (
0is first worksheet) - string: name of worksheet to parse (case insensitive)
- array of numbers and strings to select multiple worksheets.
- number: zero-based index of worksheet to parse (
bookVBAmerely exposes the raw VBA CFB object. It does not parse the data. XLSM and XLSB store the VBA CFB object inxl/vbaProject.bin. BIFF8 XLS mixes the VBA entries alongside the core Workbook entry, so the library generates a new XLSB-compatible blob from the XLS CFB container.codepageis applied to BIFF2 - BIFF5 files withoutCodePagerecords and to CSV files without BOM intype:"binary". BIFF8 XLS always defaults to 1200.PRNaffects parsing of text files without a common delimiter character.- Currently only XOR encryption is supported. Unsupported error will be thrown for files employing other encryption methods.
- Newer Excel functions are serialized with the
_xlfn.prefix, hidden from the user. SheetJS will strip_xlfn.normally. Thexlfnoption preserves them. - WTF is mainly for development. By default, the parser will suppress read errors on single worksheets, allowing you to read from the worksheets that do parse properly. Setting
WTF:trueforces those errors to be thrown.
Input Type
Strings can be interpreted in multiple ways. The type parameter for read tells the library how to parse the data argument:
type | expected input |
|---|---|
"base64" | string: Base64 encoding of the file |
"binary" | string: binary string (byte n is data.charCodeAt(n)) |
"string" | string: JS string (characters interpreted as UTF8) |
"buffer" | nodejs Buffer |
"array" | array: array of 8-bit unsigned int (byte n is data[n]) |
"file" | string: path of file that will be read (nodejs only) |
Guessing File Type
Implementation Details (click to show)
Excel and other spreadsheet tools read the first few bytes and apply other heuristics to determine a file type. This enables file type punning: renaming files with the .xls extension will tell your computer to use Excel to open the file but Excel will know how to handle it. This library applies similar logic:
| Byte 0 | Raw File Type | Spreadsheet Types |
|---|---|---|
0xD0 | CFB Container | BIFF 5/8 or protected XLSX/XLSB or WQ3/QPW or XLR |
0x09 | BIFF Stream | BIFF 2/3/4/5 |
0x3C | XML/HTML | SpreadsheetML / Flat ODS / UOS1 / HTML / plain text |
0x50 | ZIP Archive | XLSB or XLSX/M or ODS or UOS2 or NUMBERS or text |
0x49 | Plain Text | SYLK or plain text |
0x54 | Plain Text | DIF or plain text |
0xEF | UTF8 Encoded | SpreadsheetML / Flat ODS / UOS1 / HTML / plain text |
0xFF | UTF16 Encoded | SpreadsheetML / Flat ODS / UOS1 / HTML / plain text |
0x00 | Record Stream | Lotus WK* or Quattro Pro or plain text |
0x7B | Plain text | RTF or plain text |
0x0A | Plain text | SpreadsheetML / Flat ODS / UOS1 / HTML / plain text |
0x0D | Plain text | SpreadsheetML / Flat ODS / UOS1 / HTML / plain text |
0x20 | Plain text | SpreadsheetML / Flat ODS / UOS1 / HTML / plain text |
DBF files are detected based on the first byte as well as the third and fourth bytes (corresponding to month and day of the file date)
Works for Windows files are detected based on the BOF record with type 0xFF
Plain text format guessing follows the priority order:
| Format | Test |
|---|---|
| XML | <?xml appears in the first 1024 characters |
| HTML | starts with < and HTML tags appear in the first 1024 characters * |
| XML | starts with < and the first tag is valid |
| RTF | starts with {\rt |
| DSV | starts with /sep=.$/, separator is the specified character |
| DSV | more unquoted ` |
| DSV | more unquoted ; chars than \t or , in the first 1024 |
| TSV | more unquoted \t chars than , chars in the first 1024 |
| CSV | one of the first 1024 characters is a comma "," |
| ETH | starts with socialcalc:version: |
| PRN | PRN option is set to true |
| CSV | (fallback) |
- HTML tags include:
html,table,head,meta,script,style,div
Why are random text files valid? (click to show)
Excel is extremely aggressive in reading files. Adding an XLS extension to any display text file (where the only characters are ANSI display chars) tricks Excel into thinking that the file is potentially a CSV or TSV file, even if it is only one column! This library attempts to replicate that behavior.
The best approach is to validate the desired worksheet and ensure it has the expected number of rows or columns. Extracting the range is extremely simple:
var range = XLSX.utils.decode_range(worksheet['!ref']);
var ncols = range.e.c - range.s.c + 1, nrows = range.e.r - range.s.r + 1;
Writing Options
The exported write and writeFile functions accept an options argument:
| Option Name | Default | Description |
|---|---|---|
type | Output data encoding (see Output Type below) | |
cellDates | false | Store dates as type d (default is n) |
bookSST | false | Generate Shared String Table ** |
bookType | "xlsx" | Type of Workbook (see below for supported formats) |
sheet | "" | Name of Worksheet for single-sheet formats ** |
compression | false | Use ZIP compression for ZIP-based formats ** |
Props | Override workbook properties when writing ** | |
themeXLSX | Override theme XML when writing XLSX/XLSB/XLSM ** | |
ignoreEC | true | Suppress "number as text" errors ** |
numbers | Payload for NUMBERS export ** |
bookSSTis slower and more memory intensive, but has better compatibility with older versions of iOS Numbers- The raw data is the only thing guaranteed to be saved. Features not described in this README may not be serialized.
cellDatesonly applies to XLSX output and is not guaranteed to work with third-party readers. Excel itself does not usually write cells with typedso non-Excel tools may ignore the data or error in the presence of dates.Propsis an object mirroring the workbookPropsfield. See the table from the Workbook File Properties section.- if specified, the string from
themeXLSXwill be saved as the primary theme for XLSX/XLSB/XLSM files (toxl/theme/theme1.xmlin the ZIP) - Due to a bug in the program, some features like "Text to Columns" will crash Excel on worksheets where error conditions are ignored. The writer will mark files to ignore the error by default. Set
ignoreECtofalseto suppress. - Due to the size of the data, the NUMBERS data is not included by default. The included
xlsx.zahl.jsandxlsx.zahl.mjsscripts include the data.
Supported Output Formats
For broad compatibility with third-party tools, this library supports many output formats. The specific file type is controlled with bookType option:
bookType | file ext | container | sheets | Description |
|---|---|---|---|---|
xlsx | .xlsx | ZIP | multi | Excel 2007+ XML Format |
xlsm | .xlsm | ZIP | multi | Excel 2007+ Macro XML Format |
xlsb | .xlsb | ZIP | multi | Excel 2007+ Binary Format |
biff8 | .xls | CFB | multi | Excel 97-2004 Workbook Format |
biff5 | .xls | CFB | multi | Excel 5.0/95 Workbook Format |
biff4 | .xls | none | single | Excel 4.0 Worksheet Format |
biff3 | .xls | none | single | Excel 3.0 Worksheet Format |
biff2 | .xls | none | single | Excel 2.0 Worksheet Format |
xlml | .xls | none | multi | Excel 2003-2004 (SpreadsheetML) |
numbers | .numbers | ZIP | single | Numbers 3.0+ Spreadsheet |
ods | .ods | ZIP | multi | OpenDocument Spreadsheet |
fods | .fods | none | multi | Flat OpenDocument Spreadsheet |
wk3 | .wk3 | none | multi | Lotus Workbook (WK3) |
csv | .csv | none | single | Comma Separated Values |
txt | .txt | none | single | UTF-16 Unicode Text (TXT) |
sylk | .sylk | none | single | Symbolic Link (SYLK) |
html | .html | none | single | HTML Document |
dif | .dif | none | single | Data Interchange Format (DIF) |
dbf | .dbf | none | single | dBASE II + VFP Extensions (DBF) |
wk1 | .wk1 | none | single | Lotus Worksheet (WK1) |
rtf | .rtf | none | single | Rich Text Format (RTF) |
prn | .prn | none | single | Lotus Formatted Text |
eth | .eth | none | single | Ethercalc Record Format (ETH) |
compressiononly applies to formats with ZIP containers.- Formats that only support a single sheet require a
sheetoption specifying the worksheet. If the string is empty, the first worksheet is used. writeFilewill automatically guess the output file format based on the file extension ifbookTypeis not specified. It will choose the first format in the aforementioned table that matches the extension.
Output Type
The type argument for write mirrors the type argument for read:
type | output |
|---|---|
"base64" | string: Base64 encoding of the file |
"binary" | string: binary string (byte n is data.charCodeAt(n)) |
"string" | string: JS string (characters interpreted as UTF8) |
"buffer" | nodejs Buffer |
"array" | ArrayBuffer, fallback array of 8-bit unsigned int |
"file" | string: path of file that will be created (nodejs only) |
- For compatibility with Excel,
csvoutput will always include the UTF-8 byte order mark.
Utility Functions
The sheet_to_* functions accept a worksheet and an optional options object.
The *_to_sheet functions accept a data object and an optional options object.
The examples are based on the following worksheet:
XXX| A | B | C | D | E | F | G |
---+---+---+---+---+---+---+---+
1 | S | h | e | e | t | J | S |
2 | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
3 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Array of Arrays Input
XLSX.utils.aoa_to_sheet takes an array of arrays of JS values and returns a worksheet resembling the input data. Numbers, Booleans and Strings are stored as the corresponding styles. Dates are stored as date or numbers. Array holes and explicit undefined values are skipped. null values may be stubbed. All other values are stored as strings. The function takes an options argument:
| Option Name | Default | Description |
|---|---|---|
dateNF | FMT 14 | Use specified date format in string output |
cellDates | false | Store dates as type d (default is n) |
sheetStubs | false | Create cell objects of type z for null values |
nullError | false | If true, emit #NULL! error cells for null values |
Examples (click to show)
To generate the example sheet:
var ws = XLSX.utils.aoa_to_sheet([
"SheetJS".split(""),
[1,2,3,4,5,6,7],
[2,3,4,5,6,7,8]
]);
XLSX.utils.sheet_add_aoa takes an array of arrays of JS values and updates an existing worksheet object. It follows the same process as aoa_to_sheet and accepts an options argument:
| Option Name | Default | Description |
|---|---|---|
dateNF | FMT 14 | Use specified date format in string output |
cellDates | false | Store dates as type d (default is n) |
sheetStubs | false | Create cell objects of type z for null values |
nullError | false | If true, emit #NULL! error cells for null values |
origin | Use specified cell as starting point (see below) |
origin is expected to be one of:
origin | Description |
|---|---|
| (cell object) | Use specified cell (cell object) |
| (string) | Use specified cell (A1-style cell) |
| (number >= 0) | Start from the first column at specified row (0-indexed) |
| -1 | Append to bottom of worksheet starting on first column |
| (default) | Start from cell A1 |
Examples (click to show)
Consider the worksheet:
XXX| A | B | C | D | E | F | G |
---+---+---+---+---+---+---+---+
1 | S | h | e | e | t | J | S |
2 | 1 | 2 | | | 5 | 6 | 7 |
3 | 2 | 3 | | | 6 | 7 | 8 |
4 | 3 | 4 | | | 7 | 8 | 9 |
5 | 4 | 5 | 6 | 7 | 8 | 9 | 0 |
This worksheet can be built up in the order A1:G1, A2:B4, E2:G4, A5:G5:
/* Initial row */
var ws = XLSX.utils.aoa_to_sheet([ "SheetJS".split("") ]);
/* Write data starting at A2 */
XLSX.utils.sheet_add_aoa(ws, [[1,2], [2,3], [3,4]], {origin: "A2"});
/* Write data starting at E2 */
XLSX.utils.sheet_add_aoa(ws, [[5,6,7], [6,7,8], [7,8,9]], {origin:{r:1, c:4}});
/* Append row */
XLSX.utils.sheet_add_aoa(ws, [[4,5,6,7,8,9,0]], {origin: -1});
Array of Objects Input
XLSX.utils.json_to_sheet takes an array of objects and returns a worksheet with automatically-generated "headers" based on the keys of the objects. The default column order is determined by the first appearance of the field using Object.keys. The function accepts an options argument:
| Option Name | Default | Description |
|---|---|---|
header | Use specified field order (default Object.keys) ** | |
dateNF | FMT 14 | Use specified date format in string output |
cellDates | false | Store dates as type d (default is n) |
skipHeader | false | If true, do not include header row in output |
nullError | false | If true, emit #NULL! error cells for null values |
- All fields from each row will be written. If
headeris an array and it does not contain a particular field, the key will be appended to the array. - Cell types are deduced from the type of each value. For example, a
Dateobject will generate a Date cell, while a string will generate a Text cell. - Null values will be skipped by default. If
nullErroris true, an error cell corresponding to#NULL!will be written to the worksheet.
Examples (click to show)
The original sheet cannot be reproduced using plain objects since JS object keys must be unique. After replacing the second e and S with e_1 and S_1:
var ws = XLSX.utils.json_to_sheet([
{ S:1, h:2, e:3, e_1:4, t:5, J:6, S_1:7 },
{ S:2, h:3, e:4, e_1:5, t:6, J:7, S_1:8 }
], {header:["S","h","e","e_1","t","J","S_1"]});
Alternatively, the header row can be skipped:
var ws = XLSX.utils.json_to_sheet([
{ A:"S", B:"h", C:"e", D:"e", E:"t", F:"J", G:"S" },
{ A: 1, B: 2, C: 3, D: 4, E: 5, F: 6, G: 7 },
{ A: 2, B: 3, C: 4, D: 5, E: 6, F: 7, G: 8 }
], {header:["A","B","C","D","E","F","G"], skipHeader:true});
XLSX.utils.sheet_add_json takes an array of objects and updates an existing worksheet object. It follows the same process as json_to_sheet and accepts an options argument:
| Option Name | Default | Description |
|---|---|---|
header | Use specified column order (default Object.keys) | |
dateNF | FMT 14 | Use specified date format in string output |
cellDates | false | Store dates as type d (default is n) |
skipHeader | false | If true, do not include header row in output |
nullError | false | If true, emit #NULL! error cells for null values |
origin | Use specified cell as starting point (see below) |
origin is expected to be one of:
origin | Description |
|---|---|
| (cell object) | Use specified cell (cell object) |
| (string) | Use specified cell (A1-style cell) |
| (number >= 0) | Start from the first column at specified row (0-indexed) |
| -1 | Append to bottom of worksheet starting on first column |
| (default) | Start from cell A1 |
Examples (click to show)
Consider the worksheet:
XXX| A | B | C | D | E | F | G |
---+---+---+---+---+---+---+---+
1 | S | h | e | e | t | J | S |
2 | 1 | 2 | | | 5 | 6 | 7 |
3 | 2 | 3 | | | 6 | 7 | 8 |
4 | 3 | 4 | | | 7 | 8 | 9 |
5 | 4 | 5 | 6 | 7 | 8 | 9 | 0 |
This worksheet can be built up in the order A1:G1, A2:B4, E2:G4, A5:G5:
/* Initial row */
var ws = XLSX.utils.json_to_sheet([
{ A: "S", B: "h", C: "e", D: "e", E: "t", F: "J", G: "S" }
], {header: ["A", "B", "C", "D", "E", "F", "G"], skipHeader: true});
/* Write data starting at A2 */
XLSX.utils.sheet_add_json(ws, [
{ A: 1, B: 2 }, { A: 2, B: 3 }, { A: 3, B: 4 }
], {skipHeader: true, origin: "A2"});
/* Write data starting at E2 */
XLSX.utils.sheet_add_json(ws, [
{ A: 5, B: 6, C: 7 }, { A: 6, B: 7, C: 8 }, { A: 7, B: 8, C: 9 }
], {skipHeader: true, origin: { r: 1, c: 4 }, header: [ "A", "B", "C" ]});
/* Append row */
XLSX.utils.sheet_add_json(ws, [
{ A: 4, B: 5, C: 6, D: 7, E: 8, F: 9, G: 0 }
], {header: ["A", "B", "C", "D", "E", "F", "G"], skipHeader: true, origin: -1});
HTML Table Input
XLSX.utils.table_to_sheet takes a table DOM element and returns a worksheet resembling the input table. Numbers are parsed. All other data will be stored as strings.
XLSX.utils.table_to_book produces a minimal workbook based on the worksheet.
Both functions accept options arguments:
| Option Name | Default | Description |
|---|---|---|
raw | If true, every cell will hold raw strings | |
dateNF | FMT 14 | Use specified date format in string output |
cellDates | false | Store dates as type d (default is n) |
sheetRows | 0 | If >0, read the first sheetRows rows of the table |
display | false | If true, hidden rows and cells will not be parsed |
Examples (click to show)
To generate the example sheet, start with the HTML table:
<table id="sheetjs">
<tr><td>S</td><td>h</td><td>e</td><td>e</td><td>t</td><td>J</td><td>S</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td></tr>
</table>
To process the table:
var tbl = document.getElementById('sheetjs');
var wb = XLSX.utils.table_to_book(tbl);
Note: XLSX.read can handle HTML represented as strings.
XLSX.utils.sheet_add_dom takes a table DOM element and updates an existing worksheet object. It follows the same process as table_to_sheet and accepts an options argument:
| Option Name | Default | Description |
|---|---|---|
raw | If true, every cell will hold raw strings | |
dateNF | FMT 14 | Use specified date format in string output |
cellDates | false | Store dates as type d (default is n) |
sheetRows | 0 | If >0, read the first sheetRows rows of the table |
display | false | If true, hidden rows and cells will not be parsed |
origin is expected to be one of:
origin | Description |
|---|---|
| (cell object) | Use specified cell (cell object) |
| (string) | Use specified cell (A1-style cell) |
| (number >= 0) | Start from the first column at specified row (0-indexed) |
| -1 | Append to bottom of worksheet starting on first column |
| (default) | Start from cell A1 |
Examples (click to show)
A small helper function can create gap rows between tables:
function create_gap_rows(ws, nrows) {
var ref = XLSX.utils.decode_range(ws["!ref"]); // get original range
ref.e.r += nrows; // add to ending row
ws["!ref"] = XLSX.utils.encode_range(ref); // reassign row
}
/* first table */
var ws = XLSX.utils.table_to_sheet(document.getElementById('table1'));
create_gap_rows(ws, 1); // one row gap after first table
/* second table */
XLSX.utils.sheet_add_dom(ws, document.getElementById('table2'), {origin: -1});
create_gap_rows(ws, 3); // three rows gap after second table
/* third table */
XLSX.utils.sheet_add_dom(ws, document.getElementById('table3'), {origin: -1});
Formulae Output
XLSX.utils.sheet_to_formulae generates an array of commands that represent how a person would enter data into an application. Each entry is of the form A1-cell-address=formula-or-value. String literals are prefixed with a ' in accordance with Excel.
Examples (click to show)
For the example sheet:
> var o = XLSX.utils.sheet_to_formulae(ws);
> [o[0], o[5], o[10], o[15], o[20]];
[ 'A1=\'S', 'F1=\'J', 'D2=4', 'B3=3', 'G3=8' ]
Delimiter-Separated Output
As an alternative to the writeFile CSV type, XLSX.utils.sheet_to_csv also produces CSV output. The function takes an options argument:
| Option Name | Default | Description |
|---|---|---|
FS | "," | "Field Separator" delimiter between fields |
RS | "\n" | "Record Separator" delimiter between rows |
dateNF | FMT 14 | Use specified date format in string output |
strip | false | Remove trailing field separators in each record ** |
blankrows | true | Include blank lines in the CSV output |
skipHidden | false | Skips hidden rows/columns in the CSV output |
forceQuotes | false | Force quotes around fields |
stripwill remove trailing commas from each line under defaultFS/RSblankrowsmust be set tofalseto skip blank lines.- Fields containing the record or field separator will automatically be wrapped in double quotes;
forceQuotesforces all cells to be wrapped in quotes. XLSX.writewithcsvtype will always prepend the UTF-8 byte-order mark for Excel compatibility.sheet_to_csvreturns a JS string and omits the mark. UsingXLSX.writewith typestringwill also skip the mark.
Examples (click to show)
For the example sheet:
> console.log(XLSX.utils.sheet_to_csv(ws));
S,h,e,e,t,J,S
1,2,3,4,5,6,7
2,3,4,5,6,7,8
> console.log(XLSX.utils.sheet_to_csv(ws, {FS:"\t"}));
S h e e t J S
1 2 3 4 5 6 7
2 3 4 5 6 7 8
> console.log(XLSX.utils.sheet_to_csv(ws,{FS:":",RS:"|"}));
S:h:e:e:t:J:S|1:2:3:4:5:6:7|2:3:4:5:6:7:8|
UTF-16 Unicode Text
The txt output type uses the tab character as the field separator. If the codepage library is available (included in full distribution but not core), the output will be encoded in CP1200 and the BOM will be prepended.
XLSX.utils.sheet_to_txt takes the same arguments as sheet_to_csv.
HTML Output
As an alternative to the writeFile HTML type, XLSX.utils.sheet_to_html also produces HTML output. The function takes an options argument:
| Option Name | Default | Description |
|---|---|---|
id | Specify the id attribute for the TABLE element | |
editable | false | If true, set contenteditable="true" for every TD |
header | Override header (default html body) | |
footer | Override footer (default /body /html) |
Examples (click to show)
For the example sheet:
> console.log(XLSX.utils.sheet_to_html(ws));
// ...
JSON
XLSX.utils.sheet_to_json generates different types of JS objects. The function takes an options argument:
| Option Name | Default | Description |
|---|---|---|
raw | true | Use raw values (true) or formatted strings (false) |
range | from WS | Override Range (see table below) |
header | Control output format (see table below) | |
dateNF | FMT 14 | Use specified date format in string output |
defval | Use specified value in place of null or undefined | |
blankrows | ** | Include blank lines in the output ** |
rawonly affects cells which have a format code (.z) field or a formatted text (.w) field.- If
headeris specified, the first row is considered a data row; ifheaderis not specified, the first row is the header row and not considered data. - When
headeris not specified, the conversion will automatically disambiguate header entries by affixing_and a count starting at1. For example, if three columns have headerfoothe output fields arefoo,foo_1,foo_2 nullvalues are returned whenrawis true but are skipped when false.- If
defvalis not specified, null and undefined values are skipped normally. If specified, all null and undefined points will be filled withdefval - When
headeris1, the default is to generate blank rows.blankrowsmust be set tofalseto skip blank rows. - When
headeris not1, the default is to skip blank rows.blankrowsmust be true to generate blank rows
range is expected to be one of:
range | Description |
|---|---|
| (number) | Use worksheet range but set starting row to the value |
| (string) | Use specified range (A1-style bounded range string) |
| (default) | Use worksheet range (ws['!ref']) |
header is expected to be one of:
header | Description |
|---|---|
1 | Generate an array of arrays ("2D Array") |
"A" | Row object keys are literal column labels |
| array of strings | Use specified strings as keys in row objects |
| (default) | Read and disambiguate first row as keys |
- If header is not
1, the row object will contain the non-enumerable property__rowNum__that represents the row of the sheet corresponding to the entry. - If header is an array, the keys will not be disambiguated. This can lead to unexpected results if the array values are not unique!
Examples (click to show)
For the example sheet:
> XLSX.utils.sheet_to_json(ws);
[ { S: 1, h: 2, e: 3, e_1: 4, t: 5, J: 6, S_1: 7 },
{ S: 2, h: 3, e: 4, e_1: 5, t: 6, J: 7, S_1: 8 } ]
> XLSX.utils.sheet_to_json(ws, {header:"A"});
[ { A: 'S', B: 'h', C: 'e', D: 'e', E: 't', F: 'J', G: 'S' },
{ A: '1', B: '2', C: '3', D: '4', E: '5', F: '6', G: '7' },
{ A: '2', B: '3', C: '4', D: '5', E: '6', F: '7', G: '8' } ]
> XLSX.utils.sheet_to_json(ws, {header:["A","E","I","O","U","6","9"]});
[ { '6': 'J', '9': 'S', A: 'S', E: 'h', I: 'e', O: 'e', U: 't' },
{ '6': '6', '9': '7', A: '1', E: '2', I: '3', O: '4', U: '5' },
{ '6': '7', '9': '8', A: '2', E: '3', I: '4', O: '5', U: '6' } ]
> XLSX.utils.sheet_to_json(ws, {header:1});
[ [ 'S', 'h', 'e', 'e', 't', 'J', 'S' ],
[ '1', '2', '3', '4', '5', '6', '7' ],
[ '2', '3', '4', '5', '6', '7', '8' ] ]
Example showing the effect of raw:
> ws['A2'].w = "3"; // set A2 formatted string value
> XLSX.utils.sheet_to_json(ws, {header:1, raw:false});
[ [ 'S', 'h', 'e', 'e', 't', 'J', 'S' ],
[ '3', '2', '3', '4', '5', '6', '7' ], // <-- A2 uses the formatted string
[ '2', '3', '4', '5', '6', '7', '8' ] ]
> XLSX.utils.sheet_to_json(ws, {header:1});
[ [ 'S', 'h', 'e', 'e', 't', 'J', 'S' ],
[ 1, 2, 3, 4, 5, 6, 7 ], // <-- A2 uses the raw value
[ 2, 3, 4, 5, 6, 7, 8 ] ]
File Formats
Despite the library name xlsx, it supports numerous spreadsheet file formats:
| Format | Read | Write |
|---|---|---|
| Excel Worksheet/Workbook Formats | :-----: | :-----: |
| Excel 2007+ XML Formats (XLSX/XLSM) | ✔ | ✔ |
| Excel 2007+ Binary Format (XLSB BIFF12) | ✔ | ✔ |
| Excel 2003-2004 XML Format (XML "SpreadsheetML") | ✔ | ✔ |
| Excel 97-2004 (XLS BIFF8) | ✔ | ✔ |
| Excel 5.0/95 (XLS BIFF5) | ✔ | ✔ |
| Excel 4.0 (XLS/XLW BIFF4) | ✔ | ✔ |
| Excel 3.0 (XLS BIFF3) | ✔ | ✔ |
| Excel 2.0/2.1 (XLS BIFF2) | ✔ | ✔ |
| Excel Supported Text Formats | :-----: | :-----: |
| Delimiter-Separated Values (CSV/TXT) | ✔ | ✔ |
| Data Interchange Format (DIF) | ✔ | ✔ |
| Symbolic Link (SYLK/SLK) | ✔ | ✔ |
| Lotus Formatted Text (PRN) | ✔ | ✔ |
| UTF-16 Unicode Text (TXT) | ✔ | ✔ |
| Other Workbook/Worksheet Formats | :-----: | :-----: |
| Numbers 3.0+ / iWork 2013+ Spreadsheet (NUMBERS) | ✔ | ✔ |
| OpenDocument Spreadsheet (ODS) | ✔ | ✔ |
| Flat XML ODF Spreadsheet (FODS) | ✔ | ✔ |
| Uniform Office Format Spreadsheet (标文通 UOS1/UOS2) | ✔ | |
| dBASE II/III/IV / Visual FoxPro (DBF) | ✔ | ✔ |
| Lotus 1-2-3 (WK1/WK3) | ✔ | ✔ |
| Lotus 1-2-3 (WKS/WK2/WK4/123) | ✔ | |
| Quattro Pro Spreadsheet (WQ1/WQ2/WB1/WB2/WB3/QPW) | ✔ | |
| Works 1.x-3.x DOS / 2.x-5.x Windows Spreadsheet (WKS) | ✔ | |
| Works 6.x-9.x Spreadsheet (XLR) | ✔ | |
| Other Common Spreadsheet Output Formats | :-----: | :-----: |
| HTML Tables | ✔ | ✔ |
| Rich Text Format tables (RTF) | ✔ | |
| Ethercalc Record Format (ETH) | ✔ | ✔ |
Features not supported by a given file format will not be written. Formats with range limits will be silently truncated:
| Format | Last Cell | Max Cols | Max Rows |
|---|---|---|---|
| Excel 2007+ XML Formats (XLSX/XLSM) | XFD1048576 | 16384 | 1048576 |
| Excel 2007+ Binary Format (XLSB BIFF12) | XFD1048576 | 16384 | 1048576 |
| Numbers 12.0 (NUMBERS) | ALL1000000 | 1000 | 1000000 |
| Excel 97-2004 (XLS BIFF8) | IV65536 | 256 | 65536 |
| Excel 5.0/95 (XLS BIFF5) | IV16384 | 256 | 16384 |
| Excel 4.0 (XLS BIFF4) | IV16384 | 256 | 16384 |
| Excel 3.0 (XLS BIFF3) | IV16384 | 256 | 16384 |
| Excel 2.0/2.1 (XLS BIFF2) | IV16384 | 256 | 16384 |
| Lotus 1-2-3 R2 - R5 (WK1/WK3/WK4) | IV8192 | 256 | 8192 |
| Lotus 1-2-3 R1 (WKS) | IV2048 | 256 | 2048 |
Excel 2003 SpreadsheetML range limits are governed by the version of Excel and are not enforced by the writer.
File Format Details (click to show)
Core Spreadsheet Formats
- Excel 2007+ XML (XLSX/XLSM)
XLSX and XLSM files are ZIP containers containing a series of XML files in accordance with the Open Packaging Conventions (OPC). The XLSM format, almost identical to XLSX, is used for files containing macros.
The format is standardized in ECMA-376 and later in ISO/IEC 29500. Excel does not follow the specification, and there are additional documents discussing how Excel deviates from the specification.
- Excel 2.0-95 (BIFF2/BIFF3/BIFF4/BIFF5)
BIFF 2/3 XLS are single-sheet streams of binary records. Excel 4 introduced the concept of a workbook (XLW files) but also had single-sheet XLS format. The structure is largely similar to the Lotus 1-2-3 file formats. BIFF5/8/12 extended the format in various ways but largely stuck to the same record format.
There is no official specification for any of these formats. Excel 95 can write files in these formats, so record lengths and fields were determined by writing in all of the supported formats and comparing files. Excel 2016 can generate BIFF5 files, enabling a full suite of file tests starting from XLSX or BIFF2.
- Excel 97-2004 Binary (BIFF8)
BIFF8 exclusively uses the Compound File Binary container format, splitting some content into streams within the file. At its core, it still uses an extended version of the binary record format from older versions of BIFF.
The MS-XLS specification covers the basics of the file format, and other specifications expand on serialization of features like properties.
- Excel 2003-2004 (SpreadsheetML)
Predating XLSX, SpreadsheetML files are simple XML files. There is no official and comprehensive specification, although MS has released documentation on the format. Since Excel 2016 can generate SpreadsheetML files, mapping features is pretty straightforward.
- Excel 2007+ Binary (XLSB, BIFF12)
Introduced in parallel with XLSX, the XLSB format combines the BIFF architecture with the content separation and ZIP container of XLSX. For the most part nodes in an XLSX sub-file can be mapped to XLSB records in a corresponding sub-file.
The MS-XLSB specification covers the basics of the file format, and other specifications expand on serialization of features like properties.
- Delimiter-Separated Values (CSV/TXT)
Excel CSV deviates from RFC4180 in a number of important ways. The generated CSV files should generally work in Excel although they may not work in RFC4180 compatible readers. The parser should generally understand Excel CSV. The writer proactively generates cells for formulae if values are unavailable.
Excel TXT uses tab as the delimiter and code page 1200.
Like in Excel, files starting with 0x49 0x44 ("ID") are treated as Symbolic Link files. Unlike Excel, if the file does not have a valid SYLK header, it will be proactively reinterpreted as CSV. There are some files with semicolon delimiter that align with a valid SYLK file. For the broadest compatibility, all cells with the value of ID are automatically wrapped in double-quotes.
Miscellaneous Workbook Formats
Support for other formats is generally far behind XLS/XLSB/XLSX support, due in part to a lack of publicly available documentation. Test files were produced in the respective apps and compared to their XLS exports to determine structure. The main focus is data extraction.
- Lotus 1-2-3 (WKS/WK1/WK2/WK3/WK4/123)
The Lotus formats consist of binary records similar to the BIFF structure. Lotus did release a specification decades ago covering the original WK1 format. Other features were deduced by producing files and comparing to Excel support.
Generated WK1 worksheets are compatible with Lotus 1-2-3 R2 and Excel 5.0.
Generated WK3 workbooks are compatible with Lotus 1-2-3 R9 and Excel 5.0.
- Quattro Pro (WQ1/WQ2/WB1/WB2/WB3/QPW)
The Quattro Pro formats use binary records in the same way as BIFF and Lotus. Some of the newer formats (namely WB3 and QPW) use a CFB enclosure just like BIFF8 XLS.
- Works for DOS / Windows Spreadsheet (WKS/XLR)
All versions of Works were limited to a single worksheet.
Works for DOS 1.x - 3.x and Works for Windows 2.x extends the Lotus WKS format with additional record types.
Works for Windows 3.x - 5.x uses the same format and WKS extension. The BOF record has type FF
Works for Windows 6.x - 9.x use the XLR format. XLR is nearly identical to BIFF8 XLS: it uses the CFB container with a Workbook stream. Works 9 saves the exact Workbook stream for the XLR and the 97-2003 XLS export. Works 6 XLS includes two empty worksheets but the main worksheet has an identical encoding. XLR also includes a WksSSWorkBook stream similar to Lotus FM3/FMT files.
- Numbers 3.0+ / iWork 2013+ Spreadsheet (NUMBERS)
iWork 2013 (Numbers 3.0 / Pages 5.0 / Keynote 6.0) switched from a proprietary XML-based format to the current file format based on the iWork Archive (IWA). This format has been used up through the current release (Numbers 11.2).
The parser focuses on extracting raw data from tables. Numbers technically supports multiple tables in a logical worksheet, including custom titles. This parser will generate one worksheet per Numbers table.
The writer currently exports a small range from the first worksheet.
- OpenDocument Spreadsheet (ODS/FODS)
ODS is an XML-in-ZIP format akin to XLSX while FODS is an XML format akin to SpreadsheetML. Both are detailed in the OASIS standard, but tools like LO/OO add undocumented extensions. The parsers and writers do not implement the full standard, instead focusing on parts necessary to extract and store raw data.
- Uniform Office Spreadsheet (UOS1/2)
UOS is a very similar format, and it comes in 2 varieties corresponding to ODS and FODS respectively. For the most part, the difference between the formats is in the names of tags and attributes.
Miscellaneous Worksheet Formats
Many older formats supported only one worksheet:
- dBASE and Visual FoxPro (DBF)
DBF is really a typed table format: each column can only hold one data type and each record omits type information. The parser generates a header row and inserts records starting at the second row of the worksheet. The writer makes files compatible with Visual FoxPro extensions.
Multi-file extensions like external memos and tables are currently unsupported, limited by the general ability to read arbitrary files in the web browser. The reader understands DBF Level 7 extensions like DATETIME.
- Symbolic Link (SYLK)
There is no real documentation. All knowledge was gathered by saving files in various versions of Excel to deduce the meaning of fields. Notes:
Plain formulae are stored in the RC form.
Column widths are rounded to integral characters.
Lotus Formatted Text (PRN)
There is no real documentation, and in fact Excel treats PRN as an output-only file format. Nevertheless we can guess the column widths and reverse-engineer the original layout. Excel's 240 character width limitation is not enforced.
- Data Interchange Format (DIF)
There is no unified definition. Visicalc DIF differs from Lotus DIF, and both differ from Excel DIF. Where ambiguous, the parser/writer follows the expected behavior from Excel. In particular, Excel extends DIF in incompatible ways:
Since Excel automatically converts numbers-as-strings to numbers, numeric string constants are converted to formulae: "0.3" -> "=""0.3""
DIF technically expects numeric cells to hold the raw numeric data, but Excel permits formatted numbers (including dates)
DIF technically has no support for formulae, but Excel will automatically convert plain formulae. Array formulae are not preserved.
HTML
Excel HTML worksheets include special metadata encoded in styles. For example, mso-number-format is a localized string containing the number format. Despite the metadata the output is valid HTML, although it does accept bare & symbols.
The writer adds type metadata to the TD elements via the t tag. The parser looks for those tags and overrides the default interpretation. For example, text like <td>12345</td> will be parsed as numbers but <td t="s">12345</td> will be parsed as text.
- Rich Text Format (RTF)
Excel RTF worksheets are stored in clipboard when copying cells or ranges from a worksheet. The supported codes are a subset of the Word RTF support.
- Ethercalc Record Format (ETH)
Ethercalc is an open source web spreadsheet powered by a record format reminiscent of SYLK wrapped in a MIME multi-part message.
Testing
Node
(click to show)
make test will run the node-based tests. By default it runs tests on files in every supported format. To test a specific file type, set FMTS to the format you want to test. Feature-specific tests are available with make test_misc
$ make test_misc # run core tests
$ make test # run full tests
$ make test_xls # only use the XLS test files
$ make test_xlsx # only use the XLSX test files
$ make test_xlsb # only use the XLSB test files
$ make test_xml # only use the XML test files
$ make test_ods # only use the ODS test files
To enable all errors, set the environment variable WTF=1:
$ make test # run full tests
$ WTF=1 make test # enable all error messages
flow and eslint checks are available:
$ make lint # eslint checks
$ make flow # make lint + Flow checking
$ make tslint # check TS definitions
Browser
(click to show)
The core in-browser tests are available at tests/index.html within this repo. Start a local server and navigate to that directory to run the tests. make ctestserv will start a server on port 8000.
make ctest will generate the browser fixtures. To add more files, edit the tests/fixtures.lst file and add the paths.
To run the full in-browser tests, clone the repo for oss.sheetjs.com and replace the xlsx.js file (then open a browser window and go to stress.html):
$ cp xlsx.js ../SheetJS.github.io
$ cd ../SheetJS.github.io
$ simplehttpserver # or "python -mSimpleHTTPServer" or "serve"
$ open -a Chromium.app http://localhost:8000/stress.html
Tested Environments
(click to show)
- NodeJS
0.8,0.10,0.12,4.x,5.x,6.x,7.x,8.x - IE 6/7/8/9/10/11 (IE 6-9 require shims)
- Chrome 24+ (including Android 4.0+)
- Safari 6+ (iOS and Desktop)
- Edge 13+, FF 18+, and Opera 12+
Tests utilize the mocha testing framework.
- https://saucelabs.com/u/sheetjs for XLS* modules using Sauce Labs
The test suite also includes tests for various time zones. To change the timezone locally, set the TZ environment variable:
$ env TZ="Asia/Kolkata" WTF=1 make test_misc
Test Files
Test files are housed in another repo.
Running make init will refresh the test_files submodule and get the files. Note that this requires svn, git, hg and other commands that may not be available. If make init fails, please download the latest version of the test files snapshot from the repo
Latest Snapshot (click to show)
Latest test files snapshot: http://github.com/SheetJS/test_files/releases/download/20170409/test_files.zip
(download and unzip to the test_files subdirectory)
Contributing
Due to the precarious nature of the Open Specifications Promise, it is very important to ensure code is cleanroom. Contribution Notes
File organization (click to show)
At a high level, the final script is a concatenation of the individual files in the bits folder. Running make should reproduce the final output on all platforms. The README is similarly split into bits in the docbits folder.
Folders:
| folder | contents |
|---|---|
bits | raw source files that make up the final script |
docbits | raw markdown files that make up README.md |
bin | server-side bin scripts (xlsx.njs) |
dist | dist files for web browsers and nonstandard JS environments |
demos | demo projects for platforms like ExtendScript and Webpack |
tests | browser tests (run make ctest to rebuild) |
types | typescript definitions and tests |
misc | miscellaneous supporting scripts |
test_files | test files (pulled from the test files repository) |
After cloning the repo, running make help will display a list of commands.
OSX/Linux
(click to show)
The xlsx.js file is constructed from the files in the bits subdirectory. The build script (run make) will concatenate the individual bits to produce the script. Before submitting a contribution, ensure that running make will produce the xlsx.js file exactly. The simplest way to test is to add the script:
$ git add xlsx.js
$ make clean
$ make
$ git diff xlsx.js
To produce the dist files, run make dist. The dist files are updated in each version release and should not be committed between versions.
Windows
(click to show)
The included make.cmd script will build xlsx.js from the bits directory. Building is as simple as:
> make
To prepare development environment:
> make init
The full list of commands available in Windows are displayed in make help:
make init -- install deps and global modules
make lint -- run eslint linter
make test -- run mocha test suite
make misc -- run smaller test suite
make book -- rebuild README and summary
make help -- display this message
As explained in Test Files, on Windows the release ZIP file must be downloaded and extracted. If Bash on Windows is available, it is possible to run the OSX/Linux workflow. The following steps prepares the environment:
# Install support programs for the build and test commands
sudo apt-get install make git subversion mercurial
# Install nodejs and NPM within the WSL
wget -qO- https://deb.nodesource.com/setup_8.x | sudo bash
sudo apt-get install nodejs
# Install dev dependencies
sudo npm install -g mocha voc blanket xlsjs
Tests
(click to show)
The test_misc target (make test_misc on Linux/OSX / make misc on Windows) runs the targeted feature tests. It should take 5-10 seconds to perform feature tests without testing against the entire test battery. New features should be accompanied with tests for the relevant file formats and features.
For tests involving the read side, an appropriate feature test would involve reading an existing file and checking the resulting workbook object. If a parameter is involved, files should be read with different values to verify that the feature is working as expected.
For tests involving a new write feature which can already be parsed, appropriate feature tests would involve writing a workbook with the feature and then opening and verifying that the feature is preserved.
For tests involving a new write feature without an existing read ability, please add a feature test to the kitchen sink tests/write.js.
References
OSP-covered Specifications (click to show)
MS-CFB: Compound File Binary File FormatMS-CTXLS: Excel Custom Toolbar Binary File FormatMS-EXSPXML3: Excel Calculation Version 2 Web Service XML SchemaMS-ODATA: Open Data Protocol (OData)MS-ODRAW: Office Drawing Binary File FormatMS-ODRAWXML: Office Drawing Extensions to Office Open XML StructureMS-OE376: Office Implementation Information for ECMA-376 Standards SupportMS-OFFCRYPTO: Office Document Cryptography StructureMS-OI29500: Office Implementation Information for ISO/IEC 29500 Standards SupportMS-OLEDS: Object Linking and Embedding (OLE) Data StructuresMS-OLEPS: Object Linking and Embedding (OLE) Property Set Data StructuresMS-OODF3: Office Implementation Information for ODF 1.2 Standards SupportMS-OSHARED: Office Common Data Types and Objects StructuresMS-OVBA: Office VBA File Format StructureMS-XLDM: Spreadsheet Data Model File FormatMS-XLS: Excel Binary File Format (.xls) Structure SpecificationMS-XLSB: Excel (.xlsb) Binary File FormatMS-XLSX: Excel (.xlsx) Extensions to the Office Open XML SpreadsheetML File FormatXLS: Microsoft Office Excel 97-2007 Binary File Format SpecificationRTF: Rich Text Format- ISO/IEC 29500:2012(E) "Information technology — Document description and processing languages — Office Open XML File Formats"
- Open Document Format for Office Applications Version 1.2 (29 September 2011)
- Worksheet File Format (From Lotus) December 1984
Browser Test and Support Matrix
Supported File Formats
Author: SheetJS
Source Code: https://github.com/SheetJS/sheetjs
License: Apache-2.0 License
1625777580
Dart Null-safety and How It Affects Flutter
Randal talks about Dart “Non-Null-By-Default”-safety: what it is, how it affects using Dart, and how to migrate to it (properly!), and the Flutter releases that revealed and enhanced NNBD Dart (Flutter 2.0 and 2.2), at Flutter Engage and Google I/O 2021.
#flutter #dart null #dart