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

Vue

Examples

PDF file as URL

React

// Import component
import { ViewPdf } from '@fintech-sandpit/ui/react';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/view_pdf.css';

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

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

Vue

<script setup lang="ts">
// Import component
import { ViewPdf } from '@fintech-sandpit/ui/react';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/view_pdf.css';

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

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

PDF file as a base64 string

React

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

const base64 = 'JVBERi0xLjQKJeLjz9MK...';

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

Vue

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

const base64 = 'JVBERi0xLjQKJeLjz9MK...';
</script>

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

PDF file as a data URI

React

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

const dataUri = 'data:application/pdf;base64,JVBERi0xLjQKJeLjz9MK...';

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

Vue

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

const dataUri = 'data:application/pdf;base64,JVBERi0xLjQKJeLjz9MK...';
</script>

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

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.