React

הקטנת קובצי PDF ותמונות לפני העלאה באפליקציית React, כולל react-dropzone, בלי לשנות את הפונקציה שמטפלת בהעלאה.

אין חבילת React להתקנה: טוענים את הסקריפט פעם אחת ומוסיפים מאפיין. העוזר תופס את הקובץ לפני React ומעביר ל-onChange או ל-onDrop שלכם את הקובץ המוקטן.

1. טעינת הסקריפט

ב-index.html, או ב-Next.js בפריסת הבסיס (root layout):

HTML

<script src="https://pdfkind.com/embed.js" defer></script>

Next.js (app/layout.tsx)

import Script from 'next/script';

<Script src="https://pdfkind.com/embed.js" strategy="afterInteractive" />

2. שדה קובץ

JSX

<input
  type="file"
  accept="application/pdf,image/*"
  data-pdfkind-max="5MB"
  onChange={(e) => setFile(e.target.files[0])}
/>

3. react-dropzone

שימו את המאפיין על רכיב הבסיס. הוא מכסה גם את השחרור וגם את שדה הקלט המוסתר שמשמש ל„עיון”.

JSX

const { getRootProps, getInputProps } = useDropzone({
  onDrop: (files) => upload(files[0]),   // מקבל את הקובץ המוקטן
});

<div {...getRootProps({ 'data-pdfkind-max': '5MB' })}>
  <input {...getInputProps()} />
  שחררו כאן את המסמך
</div>

קריאה ישירה

לקבצים שמגיעים מהדבקה, ממצלמה או מבורר קבצים מותאם אישית:

JSX

async function handleFile(file) {
  const small = await window.PDFkind.fit(file, { max: '5MB' });
  upload(small);
}

טיפ. קראו את הקבצים מהאירוע (e.target.files או הקבצים שמועברים ל-onDrop), כמו שרוב הקוד כבר עושה. אם הקוד שלכם עדיין מקבל את הקובץ המקורי, ראו פתרון בעיות.

הקודםאיך זה עובד הבא Vue

עודכן לאחרונה: 3 בנובמבר 2026 · שאלות: contact@pdfkind.com