PDF转图片,在线PDF转JPG/PNG
[在线DEMO](https://oktools.net/pdf2img)
原理
使用pdf.js预览图片,pdf.js将pdf通过canvas将每一页渲染出来,然后我们通过canvas的toDataURL方法保存为jpg或png格式。
pdf.js是Mozilla开源的一个js库,无需任何本地支持就可以在浏览器上显示pdf文档。唯一的要求就是浏览器必须支持HTML5。
依赖
需要pdf.min.js和pdf.worker.min.js两个js文件
全部代码实现
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();
});
}
预览:
PDF转图片,在线PDF转JPG/PNG的更多相关文章
- Aspose.Pdf合并图片到PDF文件
将图片和PDF文件合成为新的PDF文件,可以先将图片转换为PDF文件, 然后合成PDF即可, 将图片转换成PDF文件有如下方法: Aspose.Pdf.Document Aspose.Pdf.Gene ...
- Linux入门(13)——Ubuntu16.04下将图片和pdf互转
Ubuntu16.04下将图片和pdf互转 将图片转为PDF: convert 图片 PDF convert pic.jpg pic.pdf 将PDF转为图片: convert PDF 图片 conv ...
- 在线提取PDF中图片和文字
无需下载软件,你就可以在线提取PDF中图片和文字,http://www.extractpdf.com/不仅可以获取本地PDF文档的图片和文字,还能获取远程PDF文档的图片和文字.如下图所示:结果本人测 ...
- 在线扫描PDF JPG 图片上面文字
在线扫描PDF JPG 图片上面文字
- 非在线PDF转图片!!!
关于非在线 由于这次要转的是身份证,不是阴谋论,防人之心还是要有的.万一呢. 关于工具 试了好多工具,有一家软件竟然是反过来的,即图片转pdf.也给搜了出来,主要的是下载页面还显示的pdf转图片,啊呸 ...
- pdf.js实现图片在线预览
项目需求 前段时间项目中遇到了一个模块,是关于在线预览word文档(PDF文件)的,所以,找了很多插件,例如,pdf.js,pdfobject.js框架,但是pdfobject.js框架对于IE浏览器 ...
- C# 添加文本、图片到PDF文档(基于Spire.Cloud.PDF.SDK)
Spire.Cloud.PDF.SDK提供了接口PdfTextApi及PdfImagesApi用于添加文本和图片到PDF文档,添加文本时,可格式化文本样式,包括文本字体类型.字号.字体样式.文本颜色. ...
- 「 神器 」在线PDF文件管理工具和图片编辑神器
每天进步一丢丢,连接梦与想 在线PDF文件管理工具 完全免费的PDF文件在线管理工具,其功能包括:合并PDF文件.拆分PDF文件.压缩PDF文件.Office文件转换为PDF文件.PDF文件转换为JP ...
- html页面转PDF、图片操作记录
前言 日常开发中,我们有可能会碰到从系统中导出数据并打印的需要,打印的格式是常规的表格形式,例如: 本文记录使用js库html2canvas + jspdf实现html转PDF.图片,并下载 画出页面 ...
随机推荐
- 怎么理解一个规模大且结构复杂的c工程源码
很久以前,当要着手一个规模很大,结构复杂的c工程源码时,总是感觉无从下手.这个时候,一般google一下”XX源码分析“.当这个源码是很广泛使用的时,这样到也能得到不少启发:很不幸,经常要接触一些很少 ...
- orcal解决锁表
1.查看历史运行纪录 select * from dba_jobs_running: 2查看锁住的sid和pid select s.sid,s.serial# fromv$session s wher ...
- linux挂载问题
说明 Linux系统在使用光盘.软盘或U盘时,必须先执行挂载(mount)命令. 挂载命令会将这些存储介质指定成系统中的某个目录,以后直接访问相应目录即可读写存储介质上的数据. 挂载光盘 mount ...
- 开源之TinyPinyin
适用于Java和Android的快速.低内存占用的汉字转拼音库. https://github.com/promeG/TinyPinyin
- CSS样式属性单词之Left
通常left单独在CSS中设置无效,需要在使用position属性下使用才能生效起作用.left左靠多少距离(距离左边多少)的作用. left 一.left认识与语法 left翻译:左边,左 在CSS ...
- 阶段3 2.Spring_02.程序间耦合_7 分析工厂模式中的问题并改造
循环打印 工厂了的打印先注释掉 打印出来了5次对象. 打印数字i同时,让i++操作.为了看他被常见了几次实例 调用保存的方法 没个都想都有一个唯一的实例.在创建对象的时候,重新初始化了i的值.所以i每 ...
- Windows 10 无法访问共享的解决办法大全
本文前面介绍 Windows 10 操作系统无法访问其他电脑的共享文件夹,而其他电脑访问该共享可以访问的解决办法. 简单点说就是,你的操作系统是 Win10 ,你访问不了某台电脑的共享,但是别人可以. ...
- IOS CocoaPods的用法
自从有了CocoaPods以后,这些繁杂的工作就不再需要我们亲力亲为了,只需要我们做好少量的配置工作,CocoaPods会为我们做好一切 一.什么是CocoaPods 1.为什么需要CocoaPo ...
- 数据测试002:利用Jmeter推送测试数据(上)
数据测试002:利用Jmeter推送测试数据(上) 刚才用Jmeter配置一下MySQL数据库花了点时间,好在最后都解决了,注意下面几个问题: 1)没有配置 “Cannot load JDBC dr ...
- Akka系列(七):Actor持久化之Akka persistence
前言.......... 我们在使用Akka时,会经常遇到一些存储Actor内部状态的场景,在系统正常运行的情况下,我们不需要担心什么,但是当系统出错,比如Actor错误需要重启,或者内存溢出,亦或者 ...