背景: 使用vite+pdfjs-dist@2.0.943实现pdf在线操作
问题1:在渲染textLayer文本层的时候,如果pdf是纯英文,则渲染出来的文本是一行的内容;如果pdf是中文+英文,渲染内容是每个字符一个节点
纯英文
中文+英文
问题2:在中文+英文的时候,使用findController实现了搜索和高亮,但在纯英文时,因为节点变了,_pageMatches的东西匹配不上了
问题3:实在是不知道怎么实现批注功能
问题4:如何选取段落
希望能够得到帮助,项目地址
背景: 使用vite+pdfjs-dist@2.0.943实现pdf在线操作
问题1:在渲染textLayer文本层的时候,如果pdf是纯英文,则渲染出来的文本是一行的内容;如果pdf是中文+英文,渲染内容是每个字符一个节点
纯英文
中文+英文
问题2:在中文+英文的时候,使用findController实现了搜索和高亮,但在纯英文时,因为节点变了,_pageMatches的东西匹配不上了
问题3:实在是不知道怎么实现批注功能
问题4:如何选取段落
希望能够得到帮助,项目地址
以下内容由AIGC及阿里嘎多学长共同生成、有用望采纳:
问题描述:在渲染textLayer文本层的时候,如果PDF是纯英文,则渲染出来的文本是一行的内容;如果PDF是中文+英文,渲染内容是每个字符一个节点。
可能原因:这可能是由于PDF.js在处理中文文本时的默认行为。中文字符在PDF中通常被视为单独的文本元素。
解决方案:
TextLayerBuilder
来处理文本渲染。示例代码:
import { pdfjsLib } from 'pdfjs-dist';
pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.js`;
const loadingTask = pdfjsLib.getDocument({ url: pdfUrl });
loadingTask.promise.then(pdf => {
const page = pdf.getPage(1);
page.then(page => {
const scale = 1.5;
const viewport = page.getViewport({ 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,
transform: [scale, 0, 0, scale, 0, 0],
};
const textLayer = new TextLayerBuilder({
textLayerDiv: document.getElementById('text-layer'),
pageIndex: 1,
renderInteractiveForms: false,
});
const textContent = page.getTextContent();
textLayer.setTextContent(textContent);
textLayer.render(renderContext);
document.body.appendChild(canvas);
});
});
问题描述:在中文+英文的时候,使用findController实现了搜索和高亮,但在纯英文时,因为节点变了,_pageMatches的东西匹配不上了。
可能原因:findController
可能依赖于特定的文本节点结构来执行搜索和高亮,当结构变化时,原有的匹配逻辑不再适用。
解决方案:
findController
:可能需要修改findController
的实现,使其能够适应不同的文本节点结构。findController
可以识别的格式。示例代码:
import { pdfjsLib } from 'pdfjs-dist';
pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.js`;
const loadingTask = pdfjsLib.getDocument({ url: pdfUrl });
loadingTask.promise.then(pdf => {
const findController = new pdfjsLib.FindController({
linkService: new pdfjsLib.DefaultLinkService(),
eventBus: new pdfjsLib.EventBus(),
});
const matches = findController.execute({
pages: [1],
query: 'example',
caseSensitive: false,
findPrevious: false,
highlightAll: true,
});
matches.promise.then(matches => {
console.log(matches);
});
});
问题描述:实在是不知道怎么实现批注功能。
解决方案:
示例代码:
import { pdfjsLib } from 'pdfjs-dist';
pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.js`;
const loadingTask = pdfjsLib.getDocument({ url: pdfUrl });
loadingTask.promise.then(pdf => {
const page = pdf.getPage(1);
page.then(page => {
const annotations = page.getAnnotations({ intent: 'display' });
annotations.then(annotations => {
console.log(annotations);
});
});
});
问题描述:如何选取段落。
解决方案:
示例代码:
import { pdfjsLib } from 'pdfjs-dist';
pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.js`;
const loadingTask = pdfjsLib.getDocument({ url: pdfUrl });
loadingTask.promise.then(pdf => {
const page = pdf.getPage(1);
page.then(page => {
const textContent = page.getTextContent();
const paragraphs = textContent.items.reduce((acc, item) => {
if (item.str) {
acc.push(item.str);
}
return acc;
}, []);
console.log(paragraphs);
});
});
您可以访问https://gitee.com/echopp/pdfjs.git查看项目代码。
希望这些解决方案能够帮助您解决问题。如果需要更详细的代码示例或步骤,建议您提供更多的代码上下文或具体的错误信息。