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

خصیصه‌ها

منبع فایل 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 را ببینید.

راهنمای کوچ

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

1. نصب بستهٔ تازه:

   npm install @ranui/preview

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

   // پیش از این
   import 'ranui';
   
   // اکنون
   import '@ranui/preview';

3. شیوهٔ استفاده در HTML تغییری نمی‌کند:

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