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; an empty value won't display it.

<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:

Install the new package:
```
npm install @ranui/preview
```

Update imports:

// Before
import 'ranui';

// Now
import '@ranui/preview';

HTML usage remains the same:

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