推荐阅读
通过上节，我们能把pdf 文件渲染到页面实现预览功能，此时PDF只是一个图像文件，如果满足文本复制功能，我们需要把 pdf 文件的文本内容也要解析出来，渲染到相应的位置。我们就能像复制网页文字那样复制pdf里面的文字
使用依赖包
pdf.js 是能够在canvas 页面上渲染出文本。需要用到的文件。
渲染的原理：在canvas同样的位置添加一个div, 把文本信息渲染到div中
- text_layer_builder.js
- text_layer_builder.css
引入文件
import { TextLayerBuilder } from 'pdfjs-dist/web/pdf_viewer';
import 'pdfjs-dist/web/pdf_viewer.css';
开始编码
编写一个 renderText 函数
const renderText = (textContent, canvas, page, viewport) => {
const textLayerDiv = document.createElement('div');
textLayerDiv.setAttribute('class', 'textLayer');
textLayerDiv.style.width = `${canvas.width}px`
textLayerDiv.style.height = `${canvas.height}px`
// 将文本图层div添加至每页pdf的div中
const pageDom = canvas.parentNode
pageDom.appendChild(textLayerDiv);
// 创建新的TextLayerBuilder实例
const textLayer = new TextLayerBuilder({
textLayerDiv,
pageIndex: page.pageIndex,
viewport,
});
textLayer.setTextContent(textContent);
textLayer.render();
}
参数说明：
textContent：文本信息
canvas： 渲染PDF的Canvas
page： 渲染的页面
viewport： 渲染PDF时的PDF
除此之外我们需要修改上节渲染PDF的一段代码
await renderTask.promise.then(() => {
return page.getTextContent()
}).then(textContent => {
renderText(textContent, canvas, page, viewport)
})
函数说明
getTextContent()：该函数的成功回调会返回PDF页面上的文本片段。
TextLayerBuilder()：该类的实例有两个重要的方法。
setTextContent()：用于设置page.getTextContent()函数返回的文本片段；
render()：用于渲染文本图层。
到此位置PDF的渲染已经全部完成了，但是他的功能只限于浏览，如果想要翻页还需要修改源代码，下节我们编写工具栏实现翻页和缩放
