Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >PDF转图片,在线PDF转JPG/PNG

PDF转图片,在线PDF转JPG/PNG

原创
作者头像
vivec
修改于 2019-09-05 03:24:09
修改于 2019-09-05 03:24:09
16.2K1
举报
文章被收录于专栏:oktoolsoktools

在线DEMO

原理

使用pdf.js预览图片,pdf.js将pdf通过canvas将每一页渲染出来,然后我们通过canvas的toDataURL方法保存为jpg或png格式。

pdf.js是Mozilla开源的一个js库,无需任何本地支持就可以在浏览器上显示pdf文档。唯一的要求就是浏览器必须支持HTML5

依赖

需要pdf.min.jspdf.worker.min.js两个js文件

全部代码实现

代码语言:txt
AI代码解释
复制
 pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdn.bootcss.com/pdf.js/2.2.228/pdf.worker.min.js';

    const preview = document.getElementById('preview');
    const page_num = document.getElementById('page_num');
    const out_type = document.getElementById('out_type');

    let pdfFile, pdf, pageNum, context = preview.getContext('2d');

    out_type.querySelectorAll('.button').forEach(function (btn) {
        btn.onclick = function () {
            out_type.querySelector('.primary').classList.remove('primary');
            btn.classList.add('primary');
        }
    });

	// 加载PDF文件
    function loadPDF(file) {
        pdfFile = file;
        file_name.innerHTML = file.name;

        let reader = new FileReader();
        reader.onload = (e) => showPDF(e.target.result);
        reader.readAsDataURL(file);
    }

	// 预览PDF
    function showPDF(url) {
        let loadingTask = pdfjsLib.getDocument(url);
        loadingTask.promise.then(function (doc) {
            pdf = doc;
            pageNum = 1;
            preview.hidden = false;
            readerPage()
        }, function (reason) {
            alert(reason)
        });
    }

	// 预览上一页
    function prevPage() {
        if (pageNum <= 1) {
            return;
        }
        pageNum--;
        readerPage()
    }

	//预览下一页
    function nextPage() {
        if (pageNum >= pdf.numPages) {
            return;
        }
        pageNum++;
        readerPage()
    }
	
	//渲染页面
    function readerPage(callback) {
        pdf.getPage(pageNum).then(function (page) {
            let scale = 1.5;
            let viewport = page.getViewport({scale: scale});

            preview.height = viewport.height;
            preview.width = viewport.width;

            let renderContext = {
                canvasContext: context,
                viewport: viewport
            };
            page.render(renderContext).promise.then(callback);
        });
        page_num.innerText = `页码 : ${pageNum} / ${pdf.numPages}`;
    }

	// 保存当前页
    function save() {
        let a = document.createElement('a');
        let event = new MouseEvent('click');
        let type = out_type.querySelector('.primary').innerText.toLowerCase();
        a.download = pdfFile.name + '-' + pageNum + '.' + type;
        a.href = preview.toDataURL(type === 'png' ? 'image/png' : 'image/jpeg');
        a.dispatchEvent(event)
    }

	//保存全部页面
    function saveAll() {
        pageNum = 1;
        savePage()
    }

    function savePage() {
        if (pageNum > pdf.numPages) {
            alert('全部保存成功');
            return
        }

        readerPage(function () {
            save();
            pageNum++;
            savePage();
        });
    }

预览:

image
image

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
1 条评论
热度
最新
、ONLYOFFICE ONLYOFFICE是一家来自欧洲拉脱维亚的Ascensio System SIA公司研发的一款高端办公软件,它除了在线文本文档编辑,在线多人协作,和高端美化的电子表格外,同时还具有免费在线文件转换功能,下面给大家详细介绍一下。亮点介绍永久免费 ; 这款软件在线便捷转换文件的功能是完全免费的,没有任何套路捆绑的附加费用。无广告模式; ONLYOFFICE使用起来非常干净清爽,没有任何商业广告,内置广告,捆绑广告。使用方式便捷;在线使用PDF文件转换无需登录,无需注册,打开官网点击PDF转换器就可以在线做到文件转换,同时可以做
、ONLYOFFICE ONLYOFFICE是一家来自欧洲拉脱维亚的Ascensio System SIA公司研发的一款高端办公软件,它除了在线文本文档编辑,在线多人协作,和高端美化的电子表格外,同时还具有免费在线文件转换功能,下面给大家详细介绍一下。亮点介绍永久免费 ; 这款软件在线便捷转换文件的功能是完全免费的,没有任何套路捆绑的附加费用。无广告模式; ONLYOFFICE使用起来非常干净清爽,没有任何商业广告,内置广告,捆绑广告。使用方式便捷;在线使用PDF文件转换无需登录,无需注册,打开官网点击PDF转换器就可以在线做到文件转换,同时可以做
回复回复1举报
推荐阅读
编辑精选文章
换一批
如何实现高性能的在线 PDF 预览
最近接到产品需求,用户需要在我们的站点上在线查看 PDF 文件,并且查看时,用户可以对 PDF 文件的进行旋转、缩放、跳转到指定页码等操作。
政采云前端团队
2020/06/04
6.9K0
如何实现高性能的在线 PDF 预览
PDF.js 分片下载的介绍2:分片下载demo
服务器环境: php7.2 nginx 1.14 ubuntu 18.04 测试浏览器:谷歌浏览器 70.0.3538.110(
庞小明
2019/05/25
13K0
组件分享之前端组件——基于pdf.js在线预览PDF文件
近期正在探索前端、后端、系统端各类常用组件与工具,对其一些常见的组件进行再次整理一下,形成标准化组件专题,后续该专题将包含各类语言中的一些常用组件。欢迎大家进行持续关注。
cn華少
2022/03/06
5.6K0
解决Android的WebView无法打开PDF的方案
最近自家产品开发使用中收到反馈,安卓内嵌网页无法打开PDF,而IOS可以打开。其实安卓无法打开分以下几种情况:
一冷
2023/07/12
4.7K0
解决Android的WebView无法打开PDF的方案
前端实现word、excel、pdf、ppt、mp4、图片、文本等文件的预览
找了网上的实现方案,效果看起来不错,放在下面的表格里,里面有一些是可以直接通过npm在vue中引入使用。
PHP开发工程师
2022/03/07
2.5K0
前端实现word、excel、pdf、ppt、mp4、图片、文本等文件的预览
超详细的vue3使用pdfjs教程
在项目开发中碰到一个需求是在页面中展示pdf预览功能,本人的项目使用的是vue3,实现pdf预览使用的是pdf预览神器 pdfjs
CherishTheYouth
2021/08/11
19.7K1
PDF.js实现个性化PDF渲染(文本复制)
这种实现方式优缺点都很明显: 优点:自带“打印”,“搜索”,“翻页”等功能,强大且实现方便。 缺点:不同浏览器的pdf工具样式不一,且无法满足个性化需求,比如:禁止打印,下载等。
庞小明
2019/05/25
10.8K0
Webview加载pdf遇到的一些坑及解决方法
有一天产品小王拿着电脑兴致勃勃的来到我的工位旁:“诶,小付,这里有个在线pdf预览的功能,你看下能不能做。”
coder_koala
2021/11/10
8.9K0
Webview加载pdf遇到的一些坑及解决方法
react-pdf预览在线PDF的使用
建议安装8.0.2版本的react-pdf,如果安装更高版本的可能出现一些浏览器的兼容性问题;
用户1174387
2024/09/15
5840
react-pdf预览在线PDF的使用
vue-pdf实现pdf预览、分页、下载、打印
https://www.npmjs.com/package/vue-pdf-app
圆圆的冬瓜
2021/08/18
26.5K2
vue-pdf实现pdf预览、分页、下载、打印
React 实现 PDF 文件在线预览 - 手把手教你写 React PDF 预览功能
本文完整版:《React 实现 PDF 文件在线预览 - 手把手教你写 React PDF 预览功能》
蒋川@卡拉云
2022/05/30
5.5K0
React 实现 PDF 文件在线预览 - 手把手教你写 React PDF 预览功能
office文件 vue 预览_vue实现pdf文档在线预览功能
针对android系统不支持pdf文档在线预览,可通过引入pdf.js插件实现,其具体实现步骤如下
全栈程序员站长
2022/08/30
3.7K0
vue整合pdfjs,实现pdf文件预览
pdf格式的文件浏览器是可以直接打开的。所以只需要返回pdf文件的文件流,就可以直接预览文件,通过这种方式打开,整个页面全是pdf的文件内容。需求是要求预览时,页面上要加上特定的标题格式,所以直接把文件流在浏览器打开的方式行不通。通过收集相关资料,找到pdfjs插件以支持文件的预览。
用户5166330
2019/04/16
12K2
vue整合pdfjs,实现pdf文件预览
PDF在线预览实现:如何使用vue-pdf-embed实现前端PDF在线阅读
在本篇博客中介绍的vue-pdf-embed核心逻辑是获取pdf内容并将其每一页渲染到canvas画布上,以类似图片的方式展示出来。pdf作为本地资源放在项目中。
watermelo37
2025/01/22
1.7K0
PDF在线预览实现:如何使用vue-pdf-embed实现前端PDF在线阅读
Vue 通过调用文件流实现 PDF 文件在线预览的方法
如果后端返回的是PDF文件在服务器上的路径,直接访问该路径即可在浏览器中预览PDF文件。例如,后端返回路径http://example.com/path/to/file.pdf,在前端可以通过如下方式实现预览:
小焱
2025/05/19
2.4K0
Vue 通过调用文件流实现 PDF 文件在线预览的方法
bootstrap 查询 展示 分页 常用**
<!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="http://sandbox.runjs.cn/uploads/rs/238/n8vhm36h/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="http://sandbox.runjs.cn/uploads/rs/238/n8vhm36h/bootstrap-responsiv.css"> <link rel="stylesheet" type="text/css" href="http://sandbox.runjs.cn/uploads/rs/238/n8vhm36h/dataTables.bootstra.css"> </head> <body> <div class="container"> <div class="row" style="padding-bottom: 20px;margin-top:20px;"> <div class="col-md-9"> <div class="input-group"> <input id="searchString" type="text" style="height:28px;" class="form-control" placeholder="请输入实体名"> <span class="input-group-btn">    <button type="button" class="btn btn-info" onclick="search()" onkeypress="Enter()"> <span class="glyphicon glyphicon-search" aria-hidden="true"/> 搜索 </button> </span> </div> </div> </div>
用户5760343
2019/07/05
2.4K0
PDF.js Electron Viewer
PDF.js 是基于 HTML5 解析与渲染 PDF 的 JavaScript 库,由 Mozilla 主导开源。
GoCoding
2021/12/17
12.4K0
PDF.js Electron Viewer
Python使用PyPDF2库进行PDF文件操作的详细教程
在Python中,PyPDF2是一个强大的库,用于处理PDF文件。无论是合并多个PDF文件、拆分PDF文件、提取文本或者旋转页面,PyPDF2都提供了简单而灵活的解决方案。本教程将介绍PyPDF2库的基本概念和用法,帮助你更好地理解如何在Python中进行PDF文件的各种操作。
Michel_Rolle
2024/01/25
4.7K0
在纯JaveScript中实现报表导出:从“PDF”到“JPG”
但总有一些实际应用场景,需要的不仅仅是将现有内容导出,还需要我们对一些内容的格式进行转化。
葡萄城控件
2021/11/08
2.4K0
【CodeBuddy】三分钟开发一个实用小功能之:九宫格图片切割&生成器
我正在参加CodeBuddy「首席试玩官」内容创作大赛,本文所使用的 CodeBuddy 免费下载链接: 腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴
Jimaks
2025/05/22
1370
【CodeBuddy】三分钟开发一个实用小功能之:九宫格图片切割&生成器
推荐阅读
相关推荐
如何实现高性能的在线 PDF 预览
更多 >
LV.1
这个人很懒,什么都没有留下~
交个朋友
加入云开发企业交流群
企业云开发实战交流 探讨技术架构优化
加入前端工作实战群
前端工程化实践 组件库开发经验分享
加入前端学习入门群
前端基础系统教学 经验分享避坑指南
换一批
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档