前端pdf文件转图片方法

最新推荐文章于 2024-09-05 10:37:19 发布

小飞侠在吗

最新推荐文章于 2024-09-05 10:37:19 发布

阅读量2.1k

点赞数 3

文章标签：前端 pdf javascript

本文链接：https://blog.csdn.net/W_LIN/article/details/130842611

版权

该文章介绍了如何利用pdf.js库和pdf.worker.js模块将PDF文件的页面转换为canvas元素，进而可以预览或保存为图片。首先，通过pdf.js获取PDF文档并加载第一页，然后在canvas上渲染页面，最后将canvas转为PNG图片。此外，还展示了如何将整个PDF的所有页面转换为图片的代码示例。

摘要由CSDN通过智能技术生成

所需工具

pdf.js（负责API解析，可将pdf文件渲染成canvas实现预览）
pdf.worker.js（负责核心解析）

工具下载

pdf.js及pdf.worker.js下载地址：
http://mozilla.github.io/pdf.js/getting_started/#download

我自己的下载地址：https://download.csdn.net/download/W_LIN/87814244

代码实现：

1、将pdf文件第一页转换为图片

/ 获取PDF文件
const pdfUrl = 'example.pdf';
const pdf = await pdfjsLib.getDocument(pdfUrl).promise;

// 获取第一页
const page = await pdf.getPage(1);

// 将页面转换为图片
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
const viewport = page.getViewport({ scale: 1 });
canvas.width = viewport.width;
canvas.height = viewport.height;
await page.render({ canvasContext: context, viewport }).promise;

// 将图片保存为PNG格式
const imgData = canvas.toDataURL('image/png');

实际应用，动态生成canvas

<div id="zz-canvas-container"></div>

async function pdfToCanvas(pdfUrl) {
// 获取PDF文件
const pdf = await pdfjsLib.getDocument(pdfUrl).promise;
// 获取第一页
const page = await pdf.getPage(1);
// 将页面转换为图片
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
var viewport = page.getViewport({scale: 1,});
var scale = (800 / viewport.width).toFixed(2)
viewport = page.getViewport({scale: scale});
canvas.width = viewport.width;
canvas.height = viewport.height;
page.render({canvasContext: context, viewport}).promise;
zzContainer.appendChild(canvas);
}

2、将PDF文件的所有页面转换为图片

// 获取PDF文件
const pdfUrl = 'example.pdf';
const pdf = await pdfLib.getDocument(pdfUrl).promise;

// 获取所有页面
const pages = Array.from({ length: pdf.numPages }, (_, i) => i + 1);

// 将每个页面转换为图片
const images = await Promise.all(pages.map(async (pageNumber) => {
  const page = await pdf.getPage(pageNumber);
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  const viewport = page.getViewport({ scale: 1 });
  canvas.width = viewport.width;
  canvas.height = viewport.height;
  await page.render({ canvasContext: context, viewport }).promise;
  return canvas.toDataURL('image/png');
}));