PDF.js是一种基于JavaScript的PDF渲染框架，它可以在现代浏览器中为每个页面提供高质量的PDF文件阅读体验。pdfjs-dist是由PDF.js代码库构建的NPM Package，将PDF.js的核心渲染器封装为一个可嵌入的，用于Node.js和浏览器的脚本文件。
一、基本用法
使用pdfjs-dist可以很方便地将PDF文件嵌入到Web应用中。以下是代码示例：
const pdfjsLib = require('pdfjs-dist');
pdfjsLib.getDocument('example.pdf').promise.then((pdf) => {
pdf.getPage(1).then((page) => {
const scale = 1.5;
const viewport = page.getViewport({ scale: scale });
const canvas = document.getElementById('pdf-canvas');
const context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
const renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});
上述代码通过调用pdfjsLib对象中的getDocument方法获取PDF文档，然后在获取的文档中，使用getPage方法获取指定页面。获取到页面后，我们可以通过指定缩放比例并调用getViewport方法获取页面视口。获取视口后，我们可以通过新建一个canvas元素来显示页面，最后，使用page.render方法渲染页面内容到canvas上。
二、高级用法
1. 导出PDF为图片
在某些场景中，我们需要将PDF文档导出为图片，以便于在其他平台或介质中展示。使用pdfjs-dist，我们可以轻松完成此操作。以下是代码示例：
const pdfjsLib = require('pdfjs-dist');
const fs = require('fs');
const path = require('path');
pdfjsLib.getDocument('example.pdf').promise.then((pdf) => {
const pageCount = pdf.numPages;
const promises = [];
for(let i = 1; i <= pageCount; i++) {
const promise = pdf.getPage(i).then((page) => {
const scale = 1.5;
const viewport = page.getViewport({ scale: scale });
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
const renderContext = {
canvasContext: context,
viewport: viewport
};
return page.render(renderContext).promise.then(() => {
const imageData = canvas.toDataURL('image/png');
return imageData;
});
});
promises.push(promise);
}
Promise.all(promises).then((data) => {
data.forEach((imageData, index) => {
fs.writeFileSync(path.join(__dirname, `page-${index+1}.png`), imageData);
});
});
});
上述代码通过在PDF文档中迭代获取每个页面并将其渲染为canvas元素，并将canvas元素转换为base64编码的图像数据，使用fs模块将图像数据写入文件系统中。通过此方法，我们可以将PDF文档中的每个页面导出为独立的PNG图像文件。
2. 搜索PDF
使用pdfjs-dist，我们还可以实现在PDF文档中进行内容搜索的功能。以下是代码示例：
const pdfjsLib = require('pdfjs-dist');
pdfjsLib.getDocument('example.pdf').promise.then((pdf) => {
const pageCount = pdf.numPages;
const promises = [];
for(let i = 1; i <= pageCount; i++) {
const promise = pdf.getPage(i).then((page) => {
return page.getTextContent().then((textContent) => {
const textItems = textContent.items;
const searchText = 'example';
const matches = [];
for (let j = 0; j < textItems.length; j++) {
const text = textItems[j].str;
const regex = new RegExp(searchText, 'gi');
let match;
while ((match = regex.exec(text)) !== null) {
const fullMatch = match[0];
const startIndex = match.index;
const endIndex = startIndex + fullMatch.length;
matches.push({
page: i,
text: fullMatch,
startIndex: startIndex,
endIndex: endIndex
});
}
}
return matches;
});
});
promises.push(promise);
}
Promise.all(promises).then((data) => {
const allMatches = [].concat(...data);
console.log(allMatches);
});
});
上述代码通过在PDF文档中迭代获取每个页面并获取其中的文本内容，使用正则表达式搜索文本内容，并将搜索结果构建为一个数组返回。
3. 合并多个PDF文档
使用pdfjs-dist，我们还可以很容易地实现将多个PDF文档合并为一个大的PDF文档的功能。以下是代码示例：
const pdfjsLib = require('pdfjs-dist');
const fs = require('fs');
const path = require('path');
const docUrlList = [
'example1.pdf',
'example2.pdf',
'example3.pdf'
];
const mergePdfs = (docUrlList) => {
const promises = [];
docUrlList.forEach((url) => {
const promise = pdfjsLib.getDocument(url).promise;
promises.push(promise);
});
Promise.all(promises).then((docs) => {
const mergedPdf = docs[0];
const pageCount = mergedPdf.numPages;
for(let i = 1; i < docs.length; i++) {
const doc = docs[i];
for(let j = 1; j <= doc.numPages; j++) {
mergedPdf.insertPage(pageCount+i+j).then((page) => {
doc.getPage(j).then((srcPage) => {
const viewport = srcPage.getViewport({ scale: 1 });
page.setWidth(viewport.width);
page.setHeight(viewport.height);
const context = page.getContext('2d');
const renderContext = {
canvasContext: context,
viewport: viewport
};
srcPage.render(renderContext).then(() => {
if(i === docs.length - 1 && j === doc.numPages) {
mergedPdf.save().then(() => {
console.log('Merge complete!');
});
}
});
});
});
}
}
});
};
mergePdfs(docUrlList);
上述代码首先将所有PDF文档获取并存储在docs数组中，在获取第一个文档作为基础文档。然后，迭代所有文档并将每个页面插入到基础文档中，最终将合并后的文档保存为一个新的PDF文档。
三、总结
pdfjs-dist是一种非常实用的PDF渲染器封装，在实现PDF渲染和相关操作时，我们可以节省大量时间和精力。希望这篇文章可以对您了解并使用pdfjs-dist有所帮助。
