# Base64 Encoding

Use the [`encodeBase64`](https://www.telerik.com/kendo-angular-ui-develop/components/file-saver/api/encodebase64) function when you need to turn string content that may contain non-ASCII characters (accented letters, Cyrillic, and CJK characters) into a [data URI](https://developer.mozilla.org/en-US/docs/Web/URI/Reference/Schemes/data) that [`saveAs`](https://www.telerik.com/kendo-angular-ui-develop/components/file-saver/save-as) can consume.

`saveAs` expects file content as a data URI or a [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob). A data URI embeds the file content directly in the URL. When you use `encodeBase64`, include the `;base64` marker and Base64-encoded content.

Encode a string with [`encodeBase64`](https://www.telerik.com/kendo-angular-ui-develop/components/file-saver/api/encodebase64) and prefix it with a MIME type to build a data URI, then pass it to [`saveAs`](https://www.telerik.com/kendo-angular-ui-develop/components/file-saver/save-as).

```js
import { saveAs, encodeBase64 } from '@progress/kendo-file-saver';

const dataURI = "data:text/plain;base64," + encodeBase64("Hello World!");
saveAs(dataURI, "hello.txt");
```

> The [`encodeBase64`](https://www.telerik.com/kendo-angular-ui-develop/components/file-saver/api/encodebase64) function encodes strings only. For binary data, such as PDF or XLSX bytes in a `Uint8Array`, convert the bytes to a binary string before using the built-in `btoa` function. Alternatively, pass a `Blob` directly to `saveAs` when no server proxy is active.

## Data URI Construction

A data URI has the following structure:

```txt
data:<mediatype>;base64,<data>
```

Choose the [media type](https://developer.mozilla.org/en-US/docs/Web/URI/Reference/Schemes/data#syntax) that matches the file you are saving:

| File type  | Media type         |
| ---------- | ------------------ |
| Plain text | `text/plain`       |
| CSV        | `text/csv`         |
| HTML       | `text/html`        |
| JSON       | `application/json` |
| XML        | `application/xml`  |

For JSON, stringify the object before encoding:

```js
import { saveAs, encodeBase64 } from '@progress/kendo-file-saver';

const json = JSON.stringify({ name: "Alice", score: 42 }, null, 2);
const dataURI = "data:application/json;base64," + encodeBase64(json);
saveAs(dataURI, "result.json");
```

The following demo shows how to save JSON content using a base64-encoded data URI.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/file-saver/json/source.txt)

## UTF-8 Content

The browser's built-in [`btoa`](https://developer.mozilla.org/en-US/docs/Web/API/btoa) function accepts only strings with code units in the `U+0000`-`U+00FF` range. It throws an `InvalidCharacterError` for characters outside that range, including Cyrillic and CJK characters.

The [`encodeBase64`](https://www.telerik.com/kendo-angular-ui-develop/components/file-saver/api/encodebase64) function converts the input to UTF-8 bytes first, so strings with accented letters, Cyrillic, or CJK characters encode without errors:

```js
import { saveAs, encodeBase64 } from '@progress/kendo-file-saver';

const csv = "Name,City\nJohanna Müller,Düsseldorf\n";
const dataURI = "data:text/csv;base64," + encodeBase64(csv);
saveAs(dataURI, "cities.csv");
```

Prepend the `\uFEFF` BOM character to the content before encoding it to ensure Excel opens the file with the correct encoding:

```js
const dataURI = "data:text/csv;base64," + encodeBase64("\uFEFF" + csv);
```

The following demo shows how to save CSV content with UTF-8 encoding using a base64-encoded data URI.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/file-saver/csv/source.txt)

## Next Steps

* [Saving Files](https://www.telerik.com/kendo-angular-ui-develop/components/file-saver/save-as)
* [Server Proxy](https://www.telerik.com/kendo-angular-ui-develop/components/file-saver/server-proxy)
* [File Saver API](https://www.telerik.com/kendo-angular-ui-develop/components/file-saver/api)