web将pdf转成图片以及图片转回pdf的方法

索然无味的sass系统开发中突然加入了一个稍微有那么点意思的需求。
产品对一个2年前的项目一顿花里胡哨的操作之后终于定下了这个看似高端实则有点多余的功能。
我的测试项目脚手架是vite-react。
1.pdf转图片
主要是使用了pdf.js这个js库，可以支持base64(input选择文件)和url的形式
文档：https://github.com/mozilla/pdf.js/blob/master/src/display/api.js
下载：Getting Started
注意：这个库我没有在npm上找到只能老老实实的去下载然后script引入
jq和pdf.js和pdf.worker.js通过cdn引入但是这里还需要一个cmaps的文件夹这个文件夹是在上面下载的文件夹的web文件夹下，那这个文件夹复制出来放到你的项目中。
这里说下遇到的几个bug
1.pdf中的汉字在图片中不能显示出来，需要引入cmaps这个文件夹兵设置cMapUrl为cmaps路径和cMapPacked为true
2.转化后的图片内容呈现180旋转，getViewport需要去设置rotation参数为0
3.旧版本的pdf.js是render直接就可以.then进行promise，新版本需要promise.then
目录

  <script type="text/javascript" src="http://static.runoob.com/assets/jquery/2.0.3/jquery.min.js"></script><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.9.359/pdf.min.js"></script><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.9.359/pdf.worker.min.js"></script>

const pdftoimg = () => {// base64和url皆可let base64Str = "https://zh-pre.oss-cn-hangzhou.aliyuncs.com/******.pdf"// let base64Str = "data:application/pdf;base64,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TDxkJcA1n+p9BeEdV7K2hj9kNXczO+frgJdcBiwesqL7wQOzNp/4c876nskdsqo76p7xfy+cPyZclrT9HLwhK3smCR0fK5Q3fBheK1xkGbBoyCqf6taZJ88c6nZaEU/ZiwcLlBKABIE9A5evN3wvZ+hEvLnnd9nA1Vc/MkG5exv0Aw9mmUM/LugGXiww5x6GtQIHmWu3dQK3/HQHssPWHa0xe61qgc89+Nj7FssOs2i7VjSVAj1+teaodc+I7dKI2hEPeQM+te6JWv9MNxVVC3zpDfjFtsnygMUbsFTgW2/AYsS2K127kDYUA/NeeEt12HbVhswdsFTgN4/ATvu26pBNgyiwMuS0QRZYHrJgwCSA5SGbolMpAJeGnBaeSgIYHYsKTyUBNFqEhxIBOgQgIeC77N8WBbBc5XqHF5cKYLWvAuBGXzAAAQQQQAABBBBAAJcPcFe/tVkB8HS/1zbLBrr+s7PPUgACuNKAO/rktkk2UGUAAggggAACCCCAANICTtwJtgW/QF0BCCCAAGoGhmOaa3MBUglAAHUHIIC6AxBA3S0j4B9WNV99CmVuZHN0cmVhbQplbmRvYmoKMTYgMCBvYmoKODEzCmVuZG9iagoxNyAwIG9iago8PAovVGl0bGUgPEZFRkYwMDYxMDA2OTAwN0EwMDY4MDA3OTAwMkQwMDY4MDA3NDAwNjkwMDM3MDA2NzAwMDA+Ci9DcmVhdGlvbkRhdGUgKEQ6MjAyMTA5MjQxMTA3MzgpCi9Nb2REYXRlIChEOjIwMjEwOTI0MTEwNzM4KQovUHJvZHVjZXIgKGh0dHA6Ly93d3cuaW1hZ2VtYWdpY2sub3JnKQo+PgplbmRvYmoKeHJlZgowIDE4CjAwMDAwMDAwMDAgNjU1MzUgZiAKMDAwMDAwMDAxMCAwMDAwMCBuIAowMDAwMDAwMDU5IDAwMDAwIG4gCjAwMDAwMDAxMTggMDAwMDAgbiAKMDAwMDAwMDMwMCAwMDAwMCBuIAowMDAwMDAwMzg0IDAwMDAwIG4gCjAwMDAwMDA0MDIgMDAwMDAgbiAKMDAwMDAwMDQ0MCAwMDAwMCBuIAowMDAwMDAwNDYxIDAwMDAwIG4gCjAwMDAwMDE4NjQgMDAwMDAgbiAKMDAwMDAwMTg4NCAwMDAwMCBuIAowMDAwMDAxOTExIDAwMDAwIG4gCjAwMDAwMDI5ODAgMDAwMDAgbiAKMDAwMDAwMzAwMCAwMDAwMCBuIAowMDAwMDAzMDIyIDAwMDAwIG4gCjAwMDAwMDMwNDIgMDAwMDAgbiAKMDAwMDAwNDA0NCAwMDAwMCBuIAowMDAwMDA0MDY0IDAwMDAwIG4gCnRyYWlsZXIKPDwKL1NpemUgMTgKL0luZm8gMTcgMCBSCi9Sb290IDEgMCBSCi9JRCBbPGEzNDU0ZmUxYTJlNjc5N2YxNDEyYTAyYTJiODY2MWE2NjZiMWQ5YThhOWU2MzM3ZmM1YWIyYzBhZjJiMDI0N2Q+IDxhMzQ1NGZlMWEyZTY3OTdmMTQxMmEwMmEyYjg2NjFhNjY2YjFkOWE4YTllNjMzN2ZjNWFiMmMwYWYyYjAyNDdkPl0KPj4Kc3RhcnR4cmVmCjQyNDgKJSVFT0YK"pdfjsLib.workerSrc = "pdf.worker.js";let loadingTask = pdfjsLib.getDocument({url: base64Str,cMapUrl: './cmaps/', // 解决图片没有汉字的问题cMapPacked: true // 解决图片没有汉字的问题});loadingTask.promise.then(function (pdf) {pdf.getPage(1).then((res) => {let viewport = res.getViewport({scale: 1,rotation: 0,offsetX: 0,offsetY: 0,dontFlip: false,}); // 默认会旋转180度需要设置回来rotation：0let canvas = document.createElement("canvas");let context = canvas.getContext("2d");canvas.height = viewport.height;canvas.width = viewport.width;let renderTask = res.render({canvasContext: context,viewport: viewport,});renderTask.promise.then(() => {downland(canvas.toDataURL("image/jpeg", 1), "文件名.jpeg");});});});};const downland = (base64Str: string, name: string) => {// 下载let dom = document.createElement("a");dom.download = name;dom.href = base64Str;document.body.appendChild(dom);dom.click();document.body.removeChild(dom);};

2.图片转pdf
主要是使用jsPDF这个插件这个在npm上是发布了的所以直接npm i -S jspdf可以支持base64(input选择文件)和url的形式
思路：将base64或url放到img对象的src上得到图片宽高，然后获取到pdf页面的宽度，通过这几个参数计算图片在pdf中的宽高。
注意：
1.jspdf添加图片不能是网络图片，只能是base64因此需要用到canvas
2.这里需要处理canvas图片跨域相关的问题img.setAttribute("crossOrigin", "anonymous")

import { jsPDF } from "jspdf";const imgtopdf = () => {// 插件：jsPDF// 直接base64let pdfobj = new jsPDF();let str =  "data:image/png;base64,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";// url直接转base64生成pdflet imgUrl =     "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fww4.sinaimg.cn%2Fmw690%2F002rQI5Bgy1gtd1i7zr87j60pk0f0tbc02.jpg&refer=http%3A%2F%2Fwww.sina.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1635210757&t=ef92d4dd44ccc23cbc443961f8c5bdf4";let img = new Image();img.setAttribute("crossOrigin", "anonymous"); // 解决canvas的toDataURL图片跨域问题img.src = imgUrl;img.onload = () => {let PDFWidth = pdfobj.internal.pageSize.getWidth();let widthRate = PDFWidth / img.width;let w = PDFWidth;let h = img.height * widthRate;let ctx = document.createElement("canvas");ctx.width = w;ctx.height = h;let context = ctx.getContext("2d");context?.drawImage(img, 0, 0, w, h);let base64Canvas = ctx.toDataURL("image/jpeg", 1);pdfobj.addImage(base64Canvas, "jpeg", 0, 0, w, h);pdfobj.save("demo.pdf"); // 直接下载};};

总结
通pdf转图片需要注意的地方会比较多，通过上述的操作让我们可以直接在web端不需要经过后台就可以进行pdf和图片之间的相互转化。

web将pdf转成图片以及图片转回pdf的方法相关推荐

怎么把pdf转换成高清图片
怎么把pdf转换成高清图片?可以使用以下两种方法: 方法一:使用Adobe Acrobat Pro DC 1.打开需要转换的PDF文件,点击"文件"菜单中的"导出为&qu ...
使用pypdf2把原始pdf转换成kindle看着舒适的pdf
文章目录裁剪pdf 使用脚本拆分页面并转成kindle可见的大小压缩pdf (可选) 拆分pdf 由于买了个kindle,所以想要最大效率地利用它.而在kindle上看pdf是很难受的,因为kin ...
asp.net pdf如何转换成tif_如何将pdf转换成高清图片？你需要这个软件！|电脑|pdf|转换器...
如今在办公中很多人都喜欢将图片保存为PDF格式,因为PDF格式更便捷.但如果想在PDF文件中选取其中一些图片出来,那么应该如何操作呢?小编在这里给大家分享两个PDF转图片的方法,轻松帮助你解决格式转换 ...
PDF转成高清图片怎么转？借助这几款软件轻松搞定
大家应该都知道PDF是一种易储存且兼容性强的文件格式,很多工作中的小伙伴应该都喜欢使用它来保存文件.但是当你想将一个较大的PDF文件发送给别人查阅时,会不会需要花费较多的时间?告诉你一个更简单的方法, ...
怎么把word转换pdf，pdf转换word ,pdf转换成高清图片
方法一:一个成套的软件,包含了,word -->pdf ,Pdf->word,pdf-->图片迅捷PDF在线转换器地址在这 (http://app.xunjiepdf.com/ ...
python批量将pdf转成word_如何用Python把pdf转换成word
很多时候,我们需要把文件的形式来回转换.那么学了编程的小伙伴,我们该如何用Python把pdf转换成word呢? 一.下载所需要的库 1.pdfminer 安装库命令pip install pdfmi ...
如何把pdf转换成excel呢？教你简单的方法
PDF是我们日常生活中最常用的.毕竟PDF文件易读,兼容性高,布局非常清晰,不会出现错版.但是PDF文件只能阅读,不能编辑,所以我们需要对转换成各种格式的文档进行检查和编辑.那么,当我们收到一个PDF ...
如何将pdf拆分成单页？这两个的方法高效简单
PDF是一种常见的文件格式,可以存储各种类型的内容,如图片.文字和数据表格等.在使用PDF文件时,我们经常遇到需要将其拆分成单页并提取所需文件的情况.现在让我来介绍几种方法,专门解决如何将PDF拆分成 ...
电脑上怎么把pdf转成word？一分钟学会pdf转word技巧
对于很多刚入职场的小伙伴们来说,很多办公软件使用并不是很熟练,在办公过程当中遇到pdf文件时使用起来就非常不方便,因为pdf文件不能直接进行编辑,需要将pdf转换成word之后才能进行编辑,那么电脑p ...
pdf转换成html python,在Python中将pdf转换为html
Python 2.6 我试图解析我的pdf文件,其中一种方法是将其转换为html并提取标题和段落. 所以,我尝试了pdf2htmlEX,它将我的pdf转换成html格式,而不干扰我的pdf格式...到 ...

web将pdf转成图片以及图片转回pdf的方法

web将pdf转成图片以及图片转回pdf的方法相关推荐

最新文章

热门文章