React

Giảm dung lượng PDF và ảnh trước khi tải lên trong ứng dụng React, kể cả với react-dropzone, mà không cần sửa hàm xử lý tải lên.

Không cần cài gói React nào: chỉ cần tải script một lần và thêm một thuộc tính. Trợ lý bắt file trước React và chuyển file đã giảm dung lượng cho onChange hoặc onDrop của bạn.

1. Tải script

Trong index.html, hoặc với Next.js thì trong 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. Ô chọn file

JSX

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

3. react-dropzone

Đặt thuộc tính lên phần tử gốc. Thuộc tính này áp dụng cho cả thao tác thả file lẫn ô input ẩn mà nút “chọn file” sử dụng.

JSX

const { getRootProps, getInputProps } = useDropzone({
  onDrop: (files) => upload(files[0]),   // nhận file đã giảm dung lượng
});

<div {...getRootProps({ 'data-pdfkind-max': '5MB' })}>
  <input {...getInputProps()} />
  Thả tài liệu của bạn vào đây
</div>

Tự gọi hàm

Dành cho file đến từ thao tác dán, camera hoặc trình chọn file tùy chỉnh:

JSX

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

Mẹo. Hãy đọc file từ sự kiện (e.target.files hoặc các file được truyền vào onDrop), như phần lớn code vẫn làm. Xem Khắc phục sự cố nếu code của bạn vẫn nhận file gốc.

TrướcCách hoạt động Tiếp Vue

Cập nhật lần cuối 3 tháng 11, 2026 · Câu hỏi: contact@pdfkind.com