linjc.github.io/pdf2image.html at master · linjc/linjc.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PDF转图片 - 前端实现 (ES模块版)</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        .container {
            margin-bottom: 30px;
        }
        #fileInput {
            padding: 10px;
            margin: 10px 0;
        }
        #convertBtn {
            background: #409eff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        #convertBtn:disabled {
            background: #a0cfff;
            cursor: not-allowed;
        }
        .preview-container {
            margin-top: 30px;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
        }
        .pdf-page {
            border: 1px solid #eee;
            padding: 10px;
            border-radius: 4px;
        }
        .pdf-page img {
            width: 100%;
            height: auto;
            border-radius: 4px;
        }
        .download-btn {
            margin-top: 10px;
            padding: 6px 12px;
            background: #67c23a;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .loading {
            color: #409eff;
            margin: 20px 0;
            display: none;
        }
        .error {
            color: #f56c6c;
            margin: 20px 0;
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>PDF转图片工具 (ES模块版)</h1>
        <input type="file" id="fileInput" accept=".pdf">
        <button id="convertBtn" disabled>开始转换</button>

        <div class="loading" id="loading">正在解析PDF，请稍候...</div>
        <div class="error" id="error"></div>

        <div class="preview-container" id="previewContainer"></div>
    </div>

    <!-- 使用ES模块方式引入pdf.js 5.4.149版本 -->
    <script type="module">
        // 导入ES模块版本的pdf.js
        import * as pdfjsLib from 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/5.4.149/pdf.min.mjs';

        // 配置worker (ES模块版本的worker路径)
        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/5.4.149/pdf.worker.min.mjs';

        // 获取DOM元素
        const fileInput = document.getElementById('fileInput');
        const convertBtn = document.getElementById('convertBtn');
        const loading = document.getElementById('loading');
        const error = document.getElementById('error');
        const previewContainer = document.getElementById('previewContainer');

        // 显示错误信息的函数
        function showError(message) {
            error.textContent = message;
            error.style.display = 'block';
            loading.style.display = 'none';
            convertBtn.disabled = false;
        }

        // 监听文件选择
        fileInput.addEventListener('change', (e) => {
            const file = e.target.files[0];
            if (file) {
                convertBtn.disabled = false;
                previewContainer.innerHTML = '';
                error.style.display = 'none';
            } else {
                convertBtn.disabled = true;
            }
        });

        // 转换按钮点击事件
        convertBtn.addEventListener('click', async () => {
            const file = fileInput.files[0];
            if (!file) return;

            // 验证文件类型
            if (file.type !== 'application/pdf' && !file.name.endsWith('.pdf')) {
                showError('请选择有效的PDF文件！');
                return;
            }

            try {
                loading.style.display = 'block';
                convertBtn.disabled = true;

                // 读取PDF文件
                const arrayBuffer = await new Promise((resolve, reject) => {
                    const reader = new FileReader();
                    reader.onload = (e) => resolve(e.target.result);
                    reader.onerror = (err) => reject(new Error('文件读取失败，请检查文件是否损坏'));
                    reader.readAsArrayBuffer(file);
                });

                // 解析PDF（适配5.x版本的配置）
                const pdf = await pdfjsLib.getDocument({
                    data: arrayBuffer,
                    cMapUrl: 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/5.4.149/cmaps/',
                    cMapPacked: true,
                    useSystemFonts: true
                }).promise;

                // 遍历每一页转换
                const pageCount = pdf.numPages;
                for (let pageNum = 1; pageNum <= pageCount; pageNum++) {
                    try {
                        // 获取PDF页面
                        const page = await pdf.getPage(pageNum);
                        // 设置渲染尺寸（保持比例）
                        const viewport = page.getViewport({ scale: 2.0 });

                        // 创建Canvas元素
                        const canvas = document.createElement('canvas');
                        const context = canvas.getContext('2d');
                        canvas.height = viewport.height;
                        canvas.width = viewport.width;

                        // 渲染PDF页面到Canvas
                        await page.render({
                            canvasContext: context,
                            viewport: viewport
                        }).promise;

                        // 创建图片预览容器
                        const pageContainer = document.createElement('div');
                        pageContainer.className = 'pdf-page';

                        // 创建图片元素
                        const img = document.createElement('img');
                        img.src = canvas.toDataURL('image/png');
                        img.alt = `PDF第${pageNum}页`;

                        // 创建下载按钮
                        const downloadBtn = document.createElement('button');
                        downloadBtn.className = 'download-btn';
                        downloadBtn.textContent = `下载第${pageNum}页`;
                        downloadBtn.addEventListener('click', () => {
                            try {
                                const link = document.createElement('a');
                                link.href = canvas.toDataURL('image/png');
                                link.download = `${file.name.replace('.pdf', '')}_第${pageNum}页.png`;
                                document.body.appendChild(link);
                                link.click();
                                document.body.removeChild(link);
                            } catch (err) {
                                showError('图片下载失败：' + err.message);
                            }
                        });

                        // 组装DOM
                        pageContainer.appendChild(img);
                        pageContainer.appendChild(downloadBtn);
                        previewContainer.appendChild(pageContainer);
                    } catch (err) {
                        showError(`第${pageNum}页转换失败：${err.message}`);
                    }
                }

            } catch (err) {
                showError(`转换失败：${err.message}`);
                console.error('PDF转换错误:', err);
            } finally {
                loading.style.display = 'none';
                convertBtn.disabled = false;
            }
        });
    </script>
</body>
</html>