本文介绍了一种纯前端实现的 PDF 转图片工具，无需后端支持即可在浏览器中完成 PDF 文件的解析、渲染、转换及打包下载。
效果演示
相关类库
pdf.js 一个由 Mozilla 开发并维护的开源 JavaScript 库，用于在网页浏览器中直接解析和渲染 PDF 文件。
jszip.js 一个用于在 JavaScript 中创建、读取和编辑 ZIP 文件的第三方库。
FileSaver.js 一个用于在浏览器中保存文件的 JavaScript 库，它简化了前端生成文件并触发用户下载的过程。
转换的核心逻辑
首先，上传 PDF 文件，通过 input 元素获取File对象。
然后，用 FileReader 读取文件内容，转换成 ArrayBuffer。
接下来，用 pdf.js 的 getDocument 方法加载PDF文档。
加载完成后，获取总页数，然后循环每一页渲染到 canvas。
渲染完成后，把 canvas 转成 DataURL 收集到一个图片数组中。
遍历图片数组，把图片渲染到页面中。
优化升级
引入 jszip.js 和 FileSaver.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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
padding: 20px;
max-width: 950px;
margin: auto;
}
h1 {
text-align: center;
color: #333;
}
input[type="file"] {
display: block;
margin: 20px auto;
}
.preview-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
}
.preview-container img {
width: 100%;
max-width: 300px;
height: auto;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.loading, .error {
text-align: center;
margin-top: 10px;
font-weight: bold;
color: red;
}
.custom-file-upload input[type="file"] {
display: none;
}
.custom-file-upload {
padding: 10px 20px;
cursor: pointer;
background-color: #007BFF;
color: white;
border-radius: 5px;
font-size: 16px;
text-align: center;
transition: background-color 0.3s ease;
margin: 20px auto;
display: block;
}
.custom-file-upload:hover {
background-color: #0056b3;
}
#downloadBtn {
background-color: #28a745;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
display: block;
margin: 20px auto;
}
#downloadBtn:hover {
background-color: #218838;
}
</style>
</head>
<body>
<h1>PDF 转图片工具</h1>
<label class="custom-file-upload">
<input type="file" id="pdfInput" accept="application/pdf" />
选择 PDF 文件
</label>
<label class="custom-file-upload" id="downloadBtn" style="display: none; cursor: pointer;">
下载全部图片
</label>
<div class="loading" id="loading" style="display:none;">正在转换，请稍候...</div>
<div class="error" id="error"></div>
<div class="preview-container" id="previewContainer"></div>
<script>
const PDFJS = pdfjsLib;
async function pdfToImages(pdfFile) {
const arrayBuffer = await pdfFile.arrayBuffer();
const pdf = await PDFJS.getDocument({ data: arrayBuffer }).promise;
const images = [];
for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
const page = await pdf.getPage(pageNum);
const viewport = page.getViewport({ scale: 2 });
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
await page.render({
canvasContext: context,
viewport: viewport
}).promise;
const imageUrl = canvas.toDataURL('image/png');
images.push(imageUrl);
}
return images;
}
const downloadBtn = document.getElementById('downloadBtn');
// 下载按钮点击事件
downloadBtn.addEventListener('click', async () => {
if (!imageArray || imageArray.length === 0) {
alert('没有可下载的图片');
return;
}
const zip = new JSZip();
const folder = zip.folder("pdf_images");
// 提取 base64 数据并加入 zip
imageArray.forEach((imgUrl, i) => {
const base64Data = imgUrl.replace(/^data:image/(png|jpeg);base64,/, '');
folder.file(`page_${i + 1}.png`, base64Data, { base64: true });
});
// 生成压缩包并下载
const content = await zip.generateAsync({ type: "blob" });
saveAs(content, "pdf_pages.zip");
});
let imageArray = [];
// 监听文件上传
document.getElementById('pdfInput').addEventListener('change', async (e) => {
const file = e.target.files[0];
if (!file) return;
const loading = document.getElementById('loading');
const error = document.getElementById('error');
const previewContainer = document.getElementById('previewContainer');
loading.style.display = 'block';
error.textContent = '';
previewContainer.innerHTML = '';
downloadBtn.style.display = 'none';
imageArray = [];
try {
imageArray = await pdfToImages(file);
imageArray.forEach(imgUrl => {
const img = document.createElement('img');
img.src = imgUrl;
previewContainer.appendChild(img);
});
downloadBtn.style.display = 'block';
} catch (err) {
error.textContent = '转换失败: ' + err.message;
} finally {
loading.style.display = 'none';
}
});
</script>
</body>
</html>
