# Angular PDFViewer Data-Binding

The PDFViewer component is a powerful tool that enables you to display PDF files within a web browser from various data types.

The component support the following types of data:

<Row>
  <Column count={[24,24,12]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="#using-url-string">
      <ComponentTitle>URL String</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Display PDF files directly from a URL string using the url property.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,12]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="#using-base64-string">
      <ComponentTitle>Base64 String</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Load PDF files from Base64 encoded strings using the data property.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,12]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="#using-arraybuffer-object">
      <ComponentTitle>ArrayBuffer Object</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Display PDF files from raw binary data buffer using the arrayBuffer property.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,12]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="#using-typedarray-object">
      <ComponentTitle>TypedArray Object</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Load PDF files from TypedArray objects using the typedArray property.</ComponentDescription>
    </Component>
  </Column>
</Row>

> Setting more than one source of data simultaneously is not supported. In case the PDFViewer must support several data types, consider setting the one that is not being used to `undefined`.

## Using URL String

The PDFViewer component allows you to display PDF files directly within a web browser using a `URL` string. All you need to do is to set the [`url`](https://www.telerik.com/kendo-angular-ui/components/pdfviewer/api/pdfviewercomponent#url) property to the corresponding `URL` string.

The following example demonstrates how to load a PDF file from an `URL` string.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/pdfviewer/url-data/source.txt)

## Using Base64 String

To display a PDF file in the browser from a [`Base64` format](https://developer.mozilla.org/en-US/docs/Glossary/Base64) string, set the [`data`](https://www.telerik.com/kendo-angular-ui/components/pdfviewer/api/pdfviewercomponent#data) property of the component to the necessary string.

The following example demonstrates how to load a PDF file from a `Base64` string.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/pdfviewer/base64-data/source.txt)

## Using ArrayBuffer Object

To display a PDF file in the browser from a raw [binary data buffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) object, set the [`arrayBuffer`](https://www.telerik.com/kendo-angular-ui/components/pdfviewer/api/pdfviewercomponent#arraybuffer) property.

```html
<kendo-pdfviewer [arrayBuffer]="arrayBufferData"> </kendo-pdfviewer>
```

## Using TypedArray Object

To display a PDF file in the browser from a [`TypedArray`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray) object, set the [`typedArray`](https://www.telerik.com/kendo-angular-ui/components/pdfviewer/api/pdfviewercomponent#typedarray) property.

```html
<kendo-pdfviewer [typedArray]="typedArrayrData"> </kendo-pdfviewer>
```

## Known Limitations

* The 1.5 PDF specification limits the maximum PDF document size to 5,080 x 5,080 millimeters (which equals to 200x200 inches). Larger files might not open.

## Suggested Links

* [API Reference of the PDFViewer component](https://www.telerik.com/kendo-angular-ui/components/pdfviewer/api/pdfviewercomponent)
* [API Index of the PDFViewer](https://www.telerik.com/kendo-angular-ui/components/pdfviewer/api)