Preview

کامپوننت پیش‌نمایش برخط برای فایل‌های docx، pptx، pdf و xlsx.

کجا به کارش ببرید: وقتی می‌خواهید فایل‌های docx، pptx، pdf یا xlsx را در مرورگر پیش‌نمایش بگیرید. <r-preview> از روی نشانی یک فایل، پنجرهٔ پیش‌نمایش سند را باز می‌کند (اکنون به‌صورت بستهٔ مستقل @ranui/preview منتشر می‌شود).

⚠️ توجه: بستهٔ ranui از نسخهٔ 0.1.10-alpha-27 به بعد دیگر این کامپوننت را ارائه نمی‌کند. به بستهٔ مستقل @ranui/preview کوچ کنید.

شروع سریع

نصب

# استفاده از بستهٔ مستقل پیش‌نمایش (توصیه‌شده)
npm install @ranui/preview

# یا بستهٔ کامل ranui (پیش از نسخهٔ 0.1.10-alpha-27)
npm install ranui

استفادهٔ پایه

انتخاب فایل برای پیش‌نمایش

<r-preview id="preview-demo"></r-preview>
<r-button type="primary" onclick="uploadFile()">انتخاب فایل برای پیش‌نمایش</r-button>

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

    input.onchange = (e) => {
      const { files = [] } = input;
      if (files.length > 0) {
        const file = files[0];
        if (selectedUrl) URL.revokeObjectURL(selectedUrl);
        selectedUrl = URL.createObjectURL(file);
        preview.setAttribute('src', selectedUrl);
      }
    };
  };
  window.addEventListener('pagehide', (event) => {
    if (!event.persisted && selectedUrl) URL.revokeObjectURL(selectedUrl);
  });
</script>

مرجع API

خصیصه‌ها

ویژگی	نوع	پیش‌فرض	توضیح
`src`	`string`	—	نشانی فایل؛ تنظیم آن پنجره را باز می‌کند
`closeable`	`string`	—	رشتهٔ false دکمهٔ بستن و Escape را غیرفعال می‌کند
`baseUrl` / `baseurl`	`string`	`https://edit.chaxus.com`	نشانی صفحهٔ ویرایشگر Office
`readonly`	`boolean`	`false`	حالت اختیاری فقط‌خواندنی Office
`pdf-mode` / `pdfMode`	`string`	`eager`	حالت PDF: eager یا virtual
`label`	`string`	`Preview file`	نام دسترس‌پذیر کنترل بازکردن

منبع فایل `src`

نشانی فایل را تعیین کنید تا پنجرهٔ پیش‌نمایش باز شود؛ مقدار خالی چیزی نشان نمی‌دهد.

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

قابلیت بستن `closeable`

تعیین می‌کند پنجرهٔ پیش‌نمایش بسته‌شدنی باشد یا نه.

<!-- پیش‌فرض: بسته‌شدنی -->
<r-preview closeable="true"></r-preview>

<!-- بسته نمی‌شود -->
<r-preview closeable="false"></r-preview>

سرویس دلخواه `baseUrl`

اگر می‌خواهید سرویس پیش‌نمایش سند از آنِ خودتان باشد، نشانی آن را با خصیصهٔ baseUrl بدهید.

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

💡 نکته: به‌طور پیش‌فرض از سرویس میزبانی‌شده روی https://edit.chaxus.com استفاده می‌شود. برای میزبانی خودتان OnlyOffice Web Local را ببینید.

نسخهٔ 0.3.0 ثبت خودکار و ویرایش پیش‌فرض Office را حفظ می‌کند. در حالت پیش‌فرض PDF یعنی eager، رویداد load پس از رسم همهٔ صفحه‌ها رخ می‌دهد. با pdf-mode="virtual" (در JavaScript: pdfMode = 'virtual') ناحیهٔ قابل‌مشاهده رسم می‌شود و load آماده‌بودن نخستین نما و حاشیهٔ آن را نشان می‌دهد. worker تا بستن، تغییر منبع یا حذف عنصر فعال می‌ماند. تغییر readonly یا closeable ویرایشگر Office و تغییرات ذخیره‌نشده را حفظ می‌کند.

<r-preview pdf-mode="virtual" src="/reports/long.pdf"></r-preview>
<r-preview readonly src="/reports/annual.docx"></r-preview>

PDF به‌صورت محلی رسم می‌شود. فایل Office به iframe ویرایشگر تنظیم‌شده داده می‌شود و آن صفحه می‌تواند به محتوای فایل دسترسی داشته باشد. برای اسناد خصوصی یا درون‌شبکه‌ای از استقرار baseUrl خود استفاده کنید.

راهنمای کوچ

اگر هم‌اکنون از کامپوننت r-preview در بستهٔ ranui استفاده می‌کنید، این مسیر را پیشنهاد می‌کنیم:

نصب بستهٔ تازه:
```
npm install @ranui/preview
```

به‌روزرسانی import‌ها:

// پیش از این
import 'ranui';

// اکنون
import '@ranui/preview';

شیوهٔ استفاده در HTML تغییری نمی‌کند:
```
<r-preview src="your-file-url"></r-preview>
```