最近公司项目要求pdf文件转图片,通过上一页|下一页切换预览pdf的每一页,实现过程中发现某些pdf文件在转换为image图片后,显示发现,所有文本内容都不显示。针对这个问题网上查了资料是字体丢失问题。读取pdf文件时主要设置cMapUrl和cMapPacked就可解决问题。使用CDN能解决问题
const loadingTask = PDFJS.getDocument({data: decodedBase64, cMapUrl: "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.5.207/cmaps/",
cMapPacked: true});
但是CDN是不可控,毕竟不是自己维护,最后决定要设置为本地的url。坑又来了,以下几种设置方法都是错误的:
- 错误1:直接设置为node_modules对应的路劲,最后发现不能设置成功。
const loadingTask = PDFJS.getDocument({data: decodedBase64, cMapUrl: "../../node_modules/pdfjs-dist/cmaps/",
cMapPacked: true});
- 错误2: 在引用类别名上直接设置,不生效。
import * as PDFJS from 'pdfjs-dist';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';
//PDF解析需要依赖pdf.worker文件
PDFJS.GlobalWorkerOptions.workerSrc = pdfjsWorker;
PDFJS.cMapUrl = "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.2.228/cmaps/"
PDFJS.cMapPacked = true;
- 错误3: 拷贝cmps/目录到工程根目录,在通过相对路劲引用到cmps目录给cMapUrl,仍然不生效。
const loadingTask = PDFJS.getDocument({data: decodedBase64, cMapUrl: "./cmaps/",
cMapPacked: true});
最后通过阅读pdfjs-dist源码得知,cmps读取目录只能放在public目录下面。
- 拷贝cmps目录到工程public目录。在通过如下代码:
const loadingTask = PDFJS.getDocument({data: decodedBase64, cMapUrl: "./cmaps/",
cMapPacked: true});
继续通过canvas转图片就可以正常识别图片及图片文件中的文本信息了。