前端使用 pdf.js 提取 PDF 文件中的图片

功能概述

本工具允许用户上传 PDF 文件，并在前端通过 pdf.js 库自动提取其中包含的所有图片。提取后的图片以网格形式展示，支持预览和下载。

核心代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PDF 图片提取工具</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; : ; }
 { : ; :  auto; }
 { : center; : white; : ; }
  { : ; : ; :    (, , , ); }
  { : ; : ; }
 { : white; : ; : ; :    (, , , ); : ; }
 { :  dashed ; : ; :  ; : center; : pointer; : all  ease; : ; }
 { : ; : ; : (-); }
 { : ; : ; : (); }
 { : ; : ; }
 { : ; : ; : ; : ; }
 { : ; : ; }
 { : none; }
 { : (,  ,  ); : white; : none; :  ; : ; : ; : ; : pointer; : all  ease; :    (, , , ); }
 { : (-); :    (, , , ); }
 { : (); }
 { : ; : not-allowed; : none; }
 { : none; : ; }
 { : ; : ; : ; : ; : hidden; }
 { : ; : (,  ,  ); : ; : width  ease; : ; }
 { : center; : ; : ; : ; }
 { : none; : white; : ; : ; :    (, , , ); }
 { : flex; : space-between; : center; : ; : ; :  solid ; }
 { : ; : ; : ; }
 { : (,  ,  ); : white; :  ; : ; : ; : ; }
 { : grid; : (auto-fill, (, fr)); : ; }
 { :  solid ; : ; : hidden; : all  ease; : white; }
 { : (-); :    (, , , ); : ; }
 { : ; : ; : flex; : center; : center; : ; : hidden; }
  { : ; : ; : contain; }
 { : ; : white; }
 { : ; : ; : ; : ; : hidden; : ellipsis; : nowrap; }
 { : flex; : space-between; : center; : ; : ; : ; }
 { : flex; : ; }
 { : ; :  ; : ; : ; : none; : pointer; : all  ease; : ; }
 { : ; : white; }
 { : ; : (-); }
 { : ; : ; }
 { : ; }
 { : center; :  ; : ; }
 { : ; : ; : ; }
 { : none; : fixed; : ; : ; : ; : ; : (, , , ); : ; : center; : center; }
 { : flex; }
 { : ; : ; : relative; }
 { : ; : ; : contain; }
 { : absolute; : -; : ; : white; : ; : none; : ; : ; : ; : pointer; : ; : bold; : all  ease; }
 { : ; : (); }
 fadeIn {  { : ; : (); }  { : ; : (); } }
 { : fadeIn  ease; }





📄 PDF 图片提取工具
上传 PDF 文件，自动提取其中的所有图片



📁
点击或拖拽 PDF 文件到此处
支持单个 PDF 文件上传




处理中...




提取的图片
0 张图片






×