随着数字化时代的到来，越来越多的文本资料转化为电子版。然而，电子版的阅读往往带来许多不便之处，比如需要使用特定的软件或者在线服务。为解决这些问题，我们可以将 PDF 文档转化为图片格式，使用图片之所以更加便捷，是因为它可以直接在网页中展示，而且大部分浏览器都原生支持（由于浏览器的限制，不能直接在前端将 PDF 文档转化为图片）。这里我们介绍一个可以在前端将 PDF 文档转化为图片的 npm 包：cardinal-pdfjs-dist。
为什么选择 cardinal-pdfjs-dist？
cardinal-pdfjs-dist 采用 Mozilla 开发的 PDF.js 作为底层解析引擎，可以将 PDF 文档解析成为多个分页的图片，并提供了多种分辨率的选择。该包在社区使用广泛，具有以下特点：
- 兼容性好：基于标准的 HTML5 / JavaScript 实现，不依赖于其他浏览器插件，因此在主流浏览器中都能够正常使用。
- 使用方便：只需传入 PDF 文档的地址，即可快速将 PDF 文档转换为图片格式，并返回一个 Promise。
- 功能强大：可根据用户需求调整图片的 DPI 值，生成不同质量的图片。
如何使用 cardinal-pdfjs-dist？
- 安装 cardinal-pdfjs-dist
在命令行中输入以下命令：
npm install cardinal-pdfjs-dist
- 引入 cardinal-pdfjs-dist
引入 cardinal-pdfjs-dist：
import CardinalPdf from 'cardinal-pdfjs-dist';
- 调用 convert 方法
CardinalPdf.convert(url, options)
.then(function(pages){
// pages 是转换后的图像数组
});这里 url 表示 PDF 文档的地址，options 是一个选项对象，用于传递生成图片的 DPI 值，例如：
const options = {
dpi: 96 // 图片的 DPI 值，可选，默认为 96
};- 获取转化后的结果
转化结束后，pages 变量将保存着转换后的若干张图片。我们可以采用以下代码以展示图片：
pages.forEach(function(page) {
const img = document.createElement('img');
img.src = page;
document.body.appendChild(img);
});完整示例如下：
-- -------------------- ---- -------
------ ----------- ---- ----------------------
----- --- - --------------------------------------------------------------------------
----- ------- - -
---- --
--
------------------------ --------
----------------------
---------------------------- -
----- --- - ------------------------------
------- - -----
-------------------------------
---
---总结
在本文中，我们介绍了如何使用 cardinal-pdfjs-dist 这个 npm 包将 PDF 文档转换为图片格式，并提供了详细的示例代码和必要的说明。通过使用 cardinal-pdfjs-dist，我们可以避免使用繁琐的转换工具和在线服务，集成 PDF 转换功能到我们自己的网站或 app 中。同时，该包的强大功能和良好的社区支持为我们的工作带来了便利。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5651ab1864dac66c26
