【vue】pdf转图片

2023-12-11 23:19| 来源: 网络整理| 查看: 265

把pdf转成图片进行显示 pdf-dist使用步骤踩坑

最近做了一个需求–在html页面展示PDF文档遇到的问题：在浏览器上可以用iframe正常打开pdf文件。但是当html嵌套在手机app里面的时候，-iframe嵌套的PDF文件就不能正常展示了。

解决办法： 1.尝试过使用安卓方法进行文件下载之后，打开PDF文件（这个方法只能在新页面打开PDF文件），但我需要在原有的页面进行PDF文档显示。 2.优化–pdf转图片显示，满足当前页面参考文档，且转为图片后暂时没有模糊等其他问题（采用）

pdf-dist使用步骤

1、下载pdf-dist包，放在public文件下面，在页面中引用方法使用(https://gitee.com/mirrors/pdfjs-dist/) 2、安装pdf-dist(npm i pdf-dist) 3、在对应的页面中引用pdf-dist

import * as PDFJS from "pdfjs-dist";

4、初始化pdf插件

/* ** @param fileUrl pdf有效的查看地址 ** （1、线上地址(如：http://www.xxx.com) ** 2、本地public地址（例如：/static/view.pdf）） ** @param pdfPicturePath pdf转化的图片地址-用于放大查看所有pdf图片 */ readPdf(fileUrl) { let self = this self.pdfPicturePath = [] const loadingTask = PDFJS.getDocument(fileUrl); loadingTask.promise.then(function (pdf) { if (pdf) { // pdf 总页数 const pageNum = pdf.numPages; for (let i = 1; i self.exportImg(self) }, 1000); } }).catch(function (reason) { console.error("Error: " + reason); }); // }; }

5、pdf转成canvas

/* ** @param loading pdf生成图片时的加载状态 ** @param scale 控制 canvas显示的大小 ** @param pdfPicturePath pdf转化的图片地址-用于放大查看所有pdf图片 */ openPage(pdfFile, pageNumber, context) { let scale = 2; let that = this pdfFile.getPage(pageNumber).then(function (page) { // reference canvas via context const viewport = page.getViewport(scale); let canvas = context.canvas; canvas.width = viewport.width; canvas.height = viewport.height; canvas.style.width = "100%"; canvas.style.height = "100%"; let renderContext = { canvasContext: context, viewport: viewport }; page.render(renderContext); that.loading = false }); return; }

6、canvas转成图片（可根据具体情况，进行图片转化显示）这里我把所有图片的base64存放在数组里面，方便放大查看，也可以直接把生成图片标签进行图片展示

// 转图片 exportImg(self) { let canvaslist: any = document.querySelectorAll('canvas'); for (let i = 0; i

【本文地址】

【vue】pdf转图片

【vue】pdf转图片

今日新闻

推荐新闻