纯前端实现将 PDF 转换为图片

技术小丁

于 2025-05-16 21:32:48 发布

阅读量1.4k

点赞数 29

CC 4.0 BY-SA版权

文章标签：前端 pdf

本文链接：https://blog.youkuaiyun.com/cfxiaoding/article/details/148017750

本文介绍了一种纯前端实现的 PDF 转图片工具，无需后端支持即可在浏览器中完成 PDF 文件的解析、渲染、转换及打包下载。

效果演示

转换的核心逻辑

首先，上传 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

最低0.47元/天解锁文章