preview

Online preview component for docx, pptx, pdf, and xlsx files

Use when you need to preview docx, pptx, pdf, or xlsx files in the browser — <r-preview> opens a document preview modal from a file URL (now shipped as the standalone @ranui/preview package).

⚠️ Important Notice: The ranui package will no longer provide this component after version 0.1.10-alpha-27. Please migrate to the standalone @ranui/preview package.

Quick Start

Installation

# Use the standalone preview package (recommended)
npm install @ranui/preview

# Or use the full ranui package (before version 0.1.10-alpha-27)
npm install ranui

Basic Usage

Choose File to Preview

<r-preview id="preview-demo"></r-preview>
<r-button type="primary" onclick="uploadFile()">Choose File to Preview</r-button>

<script>
  const uploadFile = () => {
    const preview = document.getElementById('preview-demo');
    const input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('accept', '.docx,.pptx,.pdf,.xlsx');
    input.click();

    input.onchange = (e) => {
      const { files = [] } = input;
      if (files.length > 0) {
        const file = files[0];
        const url = URL.createObjectURL(file);
        preview.setAttribute('src', url);
      }
    };
  };
</script>

API Reference

Properties

Property	Type	Default	Description
src	string	''	File preview URL, automatically opens preview modal when set
closeable	boolean	true	Whether to show the close button
baseUrl	string	'https://edit.chaxus.com'	Custom document preview service URL

File Source src

Set the file URL to open the preview modal, empty value will not display

<r-preview src="https://example.com/document.docx"></r-preview>

Closeable closeable

Control the close behavior of the preview modal

<!-- Closeable by default -->
<r-preview closeable="true"></r-preview>

<!-- Not closeable -->
<r-preview closeable="false"></r-preview>

Custom Preview Service baseUrl

When you need to customize the document preview service, you can specify the service address through the baseUrl property

<r-preview baseUrl="https://edit.chaxus.com"></r-preview>

💡 Tip: Defaults to the hosted preview service at https://edit.chaxus.com. To self-host it, see OnlyOffice Web Local

Migration Guide

If you're currently using the r-preview component from the ranui package, we recommend following these steps to migrate:

1. Install the new package:

   npm install @ranui/preview

2. Update imports:

   // Before
   import 'ranui';
   
   // Now
   import '@ranui/preview';

3. HTML usage remains the same:

   <r-preview src="your-file-url"></r-preview>