Vue项目pdf(base64)转图片
最新回答
野稚
2026-10-24 00:49:58
关键插件为pdf.js，利用动态生成canvas标签并借助此插件创建可渲染PDF对象。生成的PDF显示为画布形式，不包含PDF控件。引入插件时，发现使用原始JavaScript方法或复制源码引入较为困难，且引入后项目体积过大。在GitHub上寻找引入方法时，官方说明使用npm或bower引入pdf.js的pre-built版本，名称为pdfjs-dist。
后台提供包含pdf文件名、Base64编码及缩略图Base64编码的数组(pdfDataList)。首先创建承载所有canvas的父节点(pdfList)。通过解码Base64数据，利用pdf.js的getDocument方法创建PDF对象。此方法返回一个对象，包含numPages属性（PDF页数）。动态创建canvas节点、调用PDF对象的getPage()和getViewport()方法生成页面缩放视口，渲染canvas，并给每个canvas节点添加样式，最后插入至pdfList节点。
注意，Vue框架生成的DOM节点无自定义属性如data-v-xxxxx，因此无法直接修改canvas样式。解决方案是在样式中创建新的自定义类名来应用样式，需留意此类名影响整个项目中的元素。
使用动态生成canvas并渲染页面，但频繁操作DOM可能影响性能。考虑使用documentFragment优化canvas渲染。创建一个documentFragment，暂存生成的节点，一次性添加到父节点中，减少渲染次数，提升性能。修改代码时，添加了documentFragment的使用。
综上，实现PDF Base64转图片功能，通过pdf.js动态创建canvas显示PDF页面，通过引入策略优化代码结构，最终达到业务需求。欢迎提供更优方法进行交流。
优化后，通过使用documentFragment封装动态生成的canvas节点，一次添加到父节点，有效减少了DOM操作的频率，优化了渲染性能。此策略适用于频繁生成和更新DOM节点的场景，有助于提高前端应用的性能。
热门标签
