最近公司項目要求pdf文件轉圖片，通過上一頁|下一頁切換預覽pdf的每一頁，實現(xiàn)過程中發(fā)現(xiàn)某些pdf文件在轉換為image圖片后，顯示發(fā)現(xiàn)，所有文本內容都不顯示。針對這個問題網(wǎng)上查了資料是字體丟失問題。讀取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對應的路勁，最后發(fā)現(xiàn)不能設置成功。
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});
繼續(xù)通過canvas轉圖片就可以正常識別圖片及圖片文件中的文本信息了。
