Як перетворити PDF файли в зображення за допомогою Next.js, Tailwind CSS та pdfjs-dist - javascript.org.ua

Перетворення PDF

Чи коли-небудь ви задумувались, як перетворити PDF у зображення і зробити це стильно? Якщо ви тільки починаєте з Next.js або шукаєте цікаву ідею для побічного проекту, ця стаття допоможе вам створити Додаток для Перетворення PDF в Зображення. 🖼️✨

Давайте зануримось і перетворимо ваші PDF в галерею чудових зображень! (Не переживайте, ми зробимо все просто і весело!) 😄

🎨 Налаштовуємо атмосферу

Почнемо з того, щоб задати стиль для нашого додатка. Ми хочемо, щоб він мав чистий, сучасний вигляд з градієнтним фоном і заголовком, який кричить “Ласкаво просимо на магічне шоу PDF!”. 🎩✨

Ось основний файл для нашого додатка:

import React from 'react'  
import MainComponent from './_component/main-page'  

const page = () => {  
 return (  
    PDF to Image Converter
    )   
}      
export default page

Що відбувається тут?
Ми використовуємо Tailwind CSS для стилізації (як модельєр для нашого додатка 💅).
MainComponent — це зірка шоу (спойлер: він відповідає за всю магію конвертації).
Нашу сторінку обгорнуто в гарний градієнт, що надає їй сучасного вигляду. 💜💙

📂 Завантаження файлу: Розпочнемо свято!

Перший крок процесу перетворення — завантажити PDF. 📤
Ось компонент FileUpload, який робить це дуже просто:

"use client"   
interface Props{    
  onFileSelect:any,    
  uploadProgress:any   
}   

const FileUpload = ({ onFileSelect, uploadProgress }:Props) => {    
  const handleFileChange = (event: React.ChangeEvent) => {    
    const file = event.target.files?.[0]    
    if (file) {    
      onFileSelect(file)    
    }    
  }       

  return (    
    <div>    
      Click to upload or drag and drop PDF file (MAX.
    </div>
  )   
}

800x400px)  
{uploadProgress > 0 && uploadProgress < 100 && (    
)}  
)   }   
export default FileUpload; ```  

## Кнопка Завантаження  

Ось компонент DownloadButton:

"use client"
interface Props{
onClick:any,
children:React.ReactNode
}

const DownloadButton = ({ onClick, children }:Props) => {
return (
{children}
)
}
export default DownloadButton;
```

Прогрес Конвертації для Процесу Завантаження

Ось реалізація компонента ConversionProgress:

"use client"   
interface Props{    
  progress:number   
}   

const ConversionProgress = ({ progress }:Props) => {    
  return (    
    Converting PDF to Images  
    {progress}% complete  
  )    
}    
export default ConversionProgress

🖼️ Галерея Зображень: Покажіть Результати

Після конвертації ми хочемо продемонструвати зображення в стильній галереї. 🎉
Ось компонент ImageGrid:

"use cleint"      
import DownloadButton from "./donwload-button"   
interface Props{    
  images:string[],    
  onDownloadSingle:any   
}   

const ImageGrid = ({ images, onDownloadSingle }:Props) => {    
  return (    
    {images.map((image, index) => (    
      <img key={index} src={image} alt={`image ${index}`} onClick={() => onDownloadSingle(image, index)}/>                    
    ))}    
  )    
}   
export default ImageGrid

Класні функції:
- Адаптивний дизайн: Незалежно від того, на якому пристрої, галерея адаптується як професіонал. 📱💻
- Кнопка Завантаження: Кожне зображення має блискучу кнопку для завантаження одним кліком. 🖱️

🔄 Перетворення PDF в Зображення: Справжня Магія

Тепер найцікавіша частина: перетворення PDF в зображення.
🧙‍♂️

Ось де відбувається магія:

const convertToImages = async (pdfFile: File) => {  
 if(typeof window !=="undefined"){  
   GlobalWorkerOptions.workerSrc = "/pdf.worker.min.mjs"  
 }  
 const pdfBuffer = await pdfFile.arrayBuffer()  
 const loadingTask = getDocument({ data: pdfBuffer })  
 const pdf = await loadingTask.promise  
 const imagesArray = []  

 for (let i = 1; i <= pdf.numPages; i++) {  
   const page = await pdf.getPage(i)  
   const viewport = page.getViewport({ scale: 3.0 })  
   const canvas = document.createElement("canvas")  
   const context = canvas.getContext("2d")  

   if (context) {  
     canvas.width = viewport.width  
     canvas.height = viewport.height  
     const renderContext = {  
       canvasContext: context,  
       viewport: viewport,  
     }  
     await page.render(renderContext).promise  
     imagesArray.push(canvas.toDataURL("image/png", 1.0))  
   } else {  
     console.error("Не вдалося отримати контекст для canvas")  
   }  

   setConversionProgress(Math.round((i / pdf.numPages) * 100))  
 }  

 setImages(imagesArray)  
 }

Що відбувається?

Ми використовуємо бібліотеку pdfjs-dist (PDF супергерой 🦸‍♂️), щоб завантажити та відобразити сторінки PDF.
Кожна сторінка перетворюється в зображення та зберігається в список.
Ми збільшуємо розмір зображень для кришталево чистої якості (адже розмиття — це так минулий сезон 🤓).

✨ Об'єднуємо все разом

MainComponent з'єднує все в єдиний безшовний процес.
Ось де відбувається все:

"use client"  
import React, { useCallback, useState } from 'react'  
import {getDocument, GlobalWorkerOptions} from 'pdfjs-dist/legacy/build/pdf.mjs'  
import FileUpload from './upload-file'  
import ConversionProgress from './conversion-progress'  
import DownloadButton from './donwload-button'  
import ImageGrid from './inage-grid'  
import 'pdfjs-dist/web/pdf_viewer.css';  

const MainComponent = () => {  
 const [file, setFile] = useState(null)  
 const [uploadProgress, setUploadProgress] = useState(0)  
 const [conversionProgress, setConversionProgress] = useState(0)  
 const [images, setImages] = useState([])  
 const convertToImages = async (pdfFile: File) => {  
 if(typeof window !=="undefined"){  
   GlobalWorkerOptions.workerSrc = "/pdf.worker.min.mjs"  
 }  
 const pdfBuffer = await pdfFile.arrayBuffer()  
 const loadingTask = getDocument({ data: pdfBuffer })  
 const pdf = await loadingTask.promise  
 const imagesArray = []  

 for (let i = 1; i <= pdf.numPages; i++) {  
   const page = await pdf.getPage(i)  
   const viewport = page.getViewport({ scale: 3.0 })  
   const canvas = document.createElement("canvas")  
   const context = canvas.getContext("2d")  

   if (context) {  
     canvas.width = viewport.width  
     canvas.height = viewport.height  
     const renderContext = {  
       canvasContext: context,  
       viewport: viewport,  
     }  
     await page.render(renderContext).promise  
     imagesArray.push(canvas.toDataURL("image/png", 1.0))  
   } else {  
     console.error("Не вдалося отримати контекст для canvas")  
   }  

   setConversionProgress(Math.round((i / pdf.numPages) * 100))  
 }  

 setImages(imagesArray)  
 }  
 const handleFileSelect = useCallback((selectedFile: File) => {  
   setFile(selectedFile)  
   // Імітація прогресу завантаження  
   let progress = 0  
   const interval = setInterval(() => {  
     progress += 10  
     setUploadProgress(progress)  
     if (progress >= 100) {  
       clearInterval(interval)  
       convertToImages(selectedFile)  
     }  
   }, 200)  
 }, [])  
 const handleDownloadAll = () => {  
   images.forEach((image, index) => {  
     const link = document.createElement("a")  
     link.href = image  
     link.download = `converted_page_${index + 1}.png`  
     link.click()  
   })  
 }  

 const handleDownloadSingle = (image: string, index: number) => {  
   const link = document.createElement("a")  
   link.href = image  
   link.download = `converted_page_${index + 1}.png`  
   link.click()  
 }  
 return (  
   <div>  
     {conversionProgress > 0 && conversionProgress < 100 && <ConversionProgress progress={conversionProgress} />}  
     {images.length > 0 && (  
       <div>  
         <h2>Converted Images</h2>  
         <DownloadButton onClick={handleDownloadAll}>Download All</DownloadButton>  
       </div>  
     )}  
   </div>  
 )  
}  

export default MainComponent

Чому вам сподобається цей проєкт

Для початківців: Ідеально підходить для вивчення Next.js та обробки взаємодії з користувачем.
Забавно створювати: Ви дізнаєтеся, як використовувати сторонні бібліотеки та стилізувати свій додаток за допомогою Tailwind CSS.
Практичний результат: Робочий додаток, яким можна похвалитися перед друзями (або потенційними роботодавцями)! 💼

Візьміть попкорн і почніть перетворювати PDF в зображення, як професіонал! 🍿🖼️

Перекладено з: How to Convert PDF Files into Images Using Next.js, Tailwind CSS, and pdfjs-dist