節點幫助

dropzone npm（對開發人員的運作原理）

Name: IronPDF
Brand: Iron Software
Availability: InStock
Rating: 4.87 (307 reviews)

Darrius Serrant

2024年9月29日

檔案上傳是網頁應用程式中常見的功能，讓它使用方便對於良好的用戶體驗至關重要。一個受歡迎的庫可以簡化這個過程，即Dropzone.js。當與React結合使用時，Dropzone 可以成為實現拖放文件上傳的強大工具。 react-dropzone 完美無縫整合，只需最少的開發努力。本文將指導您通過使用 react-dropzone 軟體包將Dropzone與 React 應用程式整合，這是 Dropzone.js 程式庫的一個出色封裝。

在本文中，我們還將查看IronPDF NPM 套件來生成、編輯和管理 PDF 文件。

為什麼在 React 中使用 Dropzone？

Dropzone 提供多種功能，使文件上傳毫無縫隙：

1. 拖放介面

允許用戶拖放文件以啟用文件選擇。以程式方式新增檔案對話框。

2. 預覽

顯示從拖放文件中預設的圖片縮圖預覽。顯示檔案預覽有助於提升使用者介面的可讀性。

3. 多文件上傳

支持同時上傳多個檔案。

4. 可自訂

高度可自訂，提供多種選項和回調。可以自定義文件對話框打開或文件選擇對話框

5. 大型文件分塊上傳

使用分段上傳上傳大檔案。

6. 處理事件

可以處理檔案對話框取消回調以及瀏覽器圖像調整大小事件。

設置 React 應用程式

在整合 Dropzone 之前，請確保您已設置 React 應用程式。如果您還沒有，可以使用 Create React App 建立新的 React 專案：

npx create-react-app dropzone-demo
cd dropzone-demo

npx create-react-app dropzone-demo
cd dropzone-demo

SHELL

安裝 react-dropzone

要在您的 React 專案中使用 Dropzone，您需要安裝 react-dropzone 套件。

npm install react-dropzone
or
yarn add react-dropzone

npm install react-dropzone
or
yarn add react-dropzone

SHELL

react-dropzone 的基本用法

這是一個在 React 組件中使用 react-dropzone 的簡單範例：

import React, { useCallback } from 'react';
import { useDropzone } from 'react-dropzone'; // import dropzone
const DropzoneComponent = () => {
  const onDrop = useCallback((acceptedFiles) => {
    console.log(acceptedFiles);
  }, []);
  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
  return (
    <div {...getRootProps()} style={dropzoneStyle}>
      {
        isDragActive ?
          <p>Drop the files here ...</p> :
          <p>Drag 'n' drop some files here, or click to select files</p>
      }
    </div>
  );
};
const dropzoneStyle = {
  border: '2px dashed #0087F7',
  borderRadius: '5px',
  padding: '20px',
  textAlign: 'center',
  cursor: 'pointer'
};
export default DropzoneComponent;

js

JAVASCRIPT

處理文件上傳

當檔案被拖放或選擇時，onDrop 回呼會接收一個已接受檔案的陣列。然後，您就可以處理這些文件，例如將它們上傳到伺服器。以下是如何擴展 onDrop 回調來使用 fetch 上傳文件的方法：

const onDrop = useCallback((acceptedFiles) => {
  const formData = new FormData();
  acceptedFiles.forEach((file) => {
    formData.append('files', file);
  });
  fetch('https://your-upload-endpoint', {
    method: 'POST',
    body: formData,
  })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));
}, []);

js

JAVASCRIPT

顯示預覽

您還可以顯示上傳文件的預覽。這是一個如何做到這一點的範例：

import React, { useCallback, useState } from 'react';
import { useDropzone } from 'react-dropzone';
const DropzoneComponent = () => {
  const [files, setFiles] = useState([]);
  const onDrop = useCallback((acceptedFiles) => {
    setFiles(acceptedFiles.map(file => Object.assign(file, {
      preview: URL.createObjectURL(file)
    })));
  }, []);
  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
  const thumbs = files.map(file => (
    <div key={file.name}>
      <img
        src={file.preview}
        style={{ width: '100px', height: '100px' }}
        alt={file.name}
      />
    </div>
  ));
  return (
    <div>
      <div {...getRootProps()} style={dropzoneStyle}>
        {
          isDragActive ?
            <p>Drop the files here ...</p> :
            <p>Drag 'n' drop some files here, or click to select files</p>
        }
      </div>
      <div>
        {thumbs}
      </div>
    </div>
  );
};
const dropzoneStyle = {
  border: '2px dashed #0087F7',
  borderRadius: '5px',
  padding: '20px',
  textAlign: 'center',
  cursor: 'pointer'
};
export default DropzoneComponent;

js

JAVASCRIPT

輸出

dropzone npm（對開發者的運作方式）：圖1 - 這是您的 react-dropzone 應用程式的外觀。您可以拖放/選擇一個或多個檔案。

清理完畢

撤銷對象 URL 以避免記憶體洩漏是至關重要的。您可以使用 useEffect 掛鉤來實現此目的：

import { useEffect } from 'react';
useEffect(() => {
  // Make sure to revoke the data uris to avoid memory leaks
  return () => files.forEach(file => URL.revokeObjectURL(file.preview));
}, [files]);

js

JAVASCRIPT

介紹 IronPDF

IronPDF 是一個強大的 npm 套件，旨在促進 Node.js 應用程式中的 PDF 生成。它允許您從HTML內容、網址，甚至是現有的PDF文件創建PDF文檔。無論您是在生成發票、報告或任何其他類型的文件，IronPDF 都通過其直觀的API和強大的功能集簡化了這一過程。

dropzone npm（對開發者來說是如何工作的）：圖2 - IronPDF for Node.js：Node.js 的 PDF 庫

IronPDF的主要功能包括

HTML 轉換為 PDF

輕鬆將 HTML 內容轉換成 PDF 文件。此功能特別適合從網頁內容生成動態 PDF。

2. 將 URL 轉換為 PDF

直接從網址生成 PDF。這使您能夠以程式化方式捕獲網頁內容並將其保存為 PDF 檔案。

3. PDF 操作

輕鬆合併、拆分和操作現有的 PDF 文件。 IronPDF 提供操作 PDF 文件的功能，例如添加頁面、拆分文檔等。

4. PDF 安全性

透過加密密碼或應用數位簽章來保護您的 PDF 文件。 IronPDF 提供選項來保護您的敏感文件免受未經授權的訪問。

5. 高品質輸出

生成高品質的 PDF 文件，精確還原文字、圖像和格式。 IronPDF 確保您生成的 PDF 保持對原始內容的忠實性。

跨平台相容性

IronPDF 與多種平台兼容，包括 Windows、Linux 和 macOS，這使得它適合廣泛的開發環境。

7. 簡單整合

輕鬆使用其 npm 套件將 IronPDF 集成到您的 Node.js 應用程式中。 API 有完善的文檔，使將 PDF 生成功能融入您的項目變得簡單明瞭。

無論您是在建立網路應用程式、伺服器端腳本還是命令列工具，IronPDF 都能幫助您高效且可靠地創建專業級的 PDF 文件。

使用 IronPDF 生成 PDF 文件並使用 Dropzone NPM 套件

安裝依賴項：首先，使用以下指令創建一個新的 Next.js 項目（如果你還沒有創建的話）：請參閱設定頁面。

npx create-next-app@latest demo-dropzone-ironpdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

npx create-next-app@latest demo-dropzone-ironpdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

SHELL

接著，導航至您的專案目錄：

cd demo-dropzone-ironpdf

cd demo-dropzone-ironpdf

SHELL

安裝所需的軟體包：

npm install @ironsoftware/ironpdf
npm install react-dropzone

npm install @ironsoftware/ironpdf
npm install react-dropzone

SHELL

創建 PDF：現在，讓我們創建一個使用 IronPDF 生成 PDF 的簡單示例。在您的 Next.js 組件 (例如，pages/index.tsx) 中，新增以下代碼：

import Head from 'next/head';
import styles from '../styles/Home.module.css';
import {ToastContainer, toast} from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import {useState} from "react";
import DropzoneComponent from "../components/mydropzone";
export default function Home() {
    const [textInput, setTextInput] = useState('');
    const notify = () => {
        toast.success("Success! This is a success message.", {
            position: "top-right"
        });
        toast.info("Information message", {
            position: "bottom-left"
        });
        toast.warn("Warning message", {
            autoClose: 5000
        });
        toast.error("Error message", {
            className: 'custom-toast',
            style: {background: 'red', color: 'white'}
        });
    };
    const generatePdf = async () => {
        try {
            const response = await fetch('/api/pdf?url='+textInput);
            const blob = await response.blob();
            const url = window.URL.createObjectURL(new Blob([blob]));
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download', 'awesomeIron.pdf');
            document.body.appendChild(link);
            link.click();
            link.parentNode.removeChild(link);
        } catch (error) {
            console.error('Error generating PDF:', error);
        }
    };
    const handleChange = (event) => {
        setTextInput(event.target.value);
    }
    return (
        <div className={styles.container}>
            <Head>
                <title>Generate PDF Using IronPDF</title>
                <link rel="icon" href="/favicon.ico"/>
            </Head>
            <main>
                <h1>Demo Drop Zone and Generate PDF Using IronPDF</h1>
                <DropzoneComponent/>
                <p>
                    <span>Enter Url To Convert to PDF:</span>{" "}
                </p>
                <button style={{margin:20, padding:5}} onClick={generatePdf}>Generate PDF</button>
            </main>          
            <style jsx>{`
                main {
                    padding: 5rem 0;
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                }
                footer {
                    width: 100%;
                    height: 100px;
                    border-top: 1px solid #eaeaea;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                footer img {
                    margin-left: 0.5rem;
                }
                footer a {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    text-decoration: none;
                    color: inherit;
                }
                code {
                    background: #fafafa;
                    border-radius: 5px;
                    padding: 0.75rem;
                    font-size: 1.1rem;
                    font-family: Menlo,
                    Monaco,
                    Lucida Console,
                    Liberation Mono,
                    DejaVu Sans Mono,
                    Bitstream Vera Sans Mono,
                    Courier New,
                    monospace;
                }
            `}</style>
            <style jsx global>{`
                html,
                body {
                    padding: 0;
                    margin: 0;
                    font-family: -apple-system,
                    BlinkMacSystemFont,
                    Segoe UI,
                    Roboto,
                    Oxygen,
                    Ubuntu,
                    Cantarell,
                    Fira Sans,
                    Droid Sans,
                    Helvetica Neue,
                    sans-serif;
                }
                * {
                    box-sizing: border-box;
                }
            `}</style>
        </div>
    );
}

js

JAVASCRIPT

由於 IronPDF 僅在 Node.js 上運行，接下來為應用程式新增一個在 Node.js 上生成 PDF 的 API。

在 pages/api 資料夾中創建一個 pdf.js 檔案，並添加以下源程式碼。

// pages/api/pdf.js
import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";
export default async function handler(req, res) {
    try {
        const url = req.query.url
        const pdf = await PdfDocument.fromUrl(url);
        const data = await pdf.saveAsBuffer();
        console.error('data PDF:', data);
        res.setHeader('Content-Type', 'application/pdf');
        res.setHeader('Content-Disposition', 'attachment; filename=awesomeIron.pdf');
        res.send(data);
    } catch (error) {
        console.error('Error generating PDF:', error);
        res.status(500).end();
    }
}

js

JAVASCRIPT

注意：在上述代碼中添加您自己的授權密鑰

運行您的應用程式：啟動您的 Next.js 應用程式：

npm run dev
or
yarn dev

npm run dev
or
yarn dev

SHELL

輸出

dropzone npm（開發人員如何使用）：圖3 - 這是您的 Next.js 應用程式整合 Dropzone 和 IronPDF 的樣子。您可以輸入 URL 並點擊生成按鈕，使用 IronPDF 將 URL 的 HTML 內容轉換為 PDF。

現在輸入網站 URL 生成 PDF，然後點擊生成 PDF。如下所示的名為 awesomeIron.pdf 的檔案將被下載。

dropzone npm（對開發人員的運作方式）：圖4 - 使用 IronPDF 生成的輸出 PDF

現在點擊下傳區，然後選擇下載的文件。這將顯示文件的預覽，名稱顯示在底部：awesomeIron.pdf

dropzone npm（它如何為開發者工作）：圖5-您可以從Dropzone提供的連結中選擇下載生成的awesomeIron.pdf文件。

IronPDF 授權

IronPDF 頁面。

將授權密鑰放置在應用程式中，如下所示：

import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";