ViewPdf

The ViewPdf component displays PDF documents using an iframe. It supports PDF files from URLs, base64 encoded strings, or data URIs.

The component automatically detects the format of the input and handles it appropriately.

Demo

React

Open PDF Preview

Vue

Open PDF Preview

Usage

React

import { ViewPdf } from '@fintech-sandpit/ui/react';

// With URL
const pdfUrl = 'https://example.com/document.pdf';

return (
  <ViewPdf src={pdfUrl} />
);

Vue

<template>
  <ViewPdf :src="pdfUrl" />
</template>

<script setup lang="ts">
import { ViewPdf } from '@fintech-sandpit/ui/react';

// With URL
const pdfUrl = 'https://example.com/document.pdf';
</script>

Base64 Support

You can also use base64 encoded PDF strings:

React

import { ViewPdf } from '@fintech-sandpit/ui/react';

// With base64 (without data URI prefix)
const pdfBase64 = 'JVBERi0xLjQKJeLjz9MK...';

return (
  <ViewPdf src={pdfBase64} />
);

// With data URI
const pdfDataUri = 'data:application/pdf;base64,JVBERi0xLjQKJeLjz9MK...';

return (
  <ViewPdf src={pdfDataUri} />
);

Vue

<template>
  <ViewPdf :src="pdfBase64" />
</template>

<script setup lang="ts">
import { ViewPdf } from '@fintech-sandpit/ui/react';

// With base64 (without data URI prefix)
const pdfBase64 = 'JVBERi0xLjQKJeLjz9MK...';
</script>

Props

React

Name	Type	Required	Default	Description
src	string	Yes	—	The PDF source. Can be a URL, base64 string, or data URI. The component automatically detects the format.
title	string	No	PDF document	The title of the PDF document.

Vue

Name	Type	Required	Default	Description
src	string	Yes	—	The PDF source. Can be a URL, base64 string, or data URI. The component automatically detects the format.
title	string	No	PDF document	The title of the PDF document.