3、前端页面如何优雅的显示PDF（中）：渲染文本

推荐阅读

• 1、前端页面如何优雅的显示PDF：原理说明
• 2、前端页面如何优雅的显示PDF（上）：渲染页面

通过上节，我们能把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的渲染已经全部完成了，但是他的功能只限于浏览，如果想要翻页还需要修改源代码，下节我们编写工具栏实现翻页和缩放

源码地址：https://github.com/LiuSandy/react-pdf-render