pdf.js实现文字可复制并且选取文字背景不一致,修改选取文字背景

JavaScript013

pdf.js实现文字可复制并且选取文字背景不一致,修改选取文字背景,第1张

一、安装和引入pdf.js包。(这里不再做过多的赘述)

二、渲染pdf,同事添加div,进行用来存储文字,保证文字可以被选取复制。

通过input标签获取到数据文件,然后通过getPDF()方法进行渲染。

renderPDF()方法

至此,其实已经实现了pdf文字可复制的要求。但是,由于各个div里的文字宽度和高度的不同,导致选取文字的时候,选取的背景颜色不同统一,需要进行统一背景样式。

思路:渲染完成pdf以后,监听页面的鼠标按下事件和鼠标弹起事件。当用户选取文字完成以后,获取选取文字的长度和宽度,获取选取文字距离上边框和右边框的值。通过获取的值来创建div并设置长度宽度以及背景颜色,对文字进行遮罩,最后取消用户选择的文字。

1、首先确认鼠标点击相对文档的开始位置:

2、确认用户选取的文字是从哪开始,在哪结束。

3、最后通过applyColours()进行渲染。

applyColours()判断了很多种情况,当用户值选择了一行的情况,当渲染的文字有还行递归调用回来的等多种情况。同事判断是否换行是通过第一个节点与第二个节点的top值绝对值是否大于10,大于10就表示换行。同时,节点后面两个节点如果就调用另外一个渲染方法。

otherMothodload()方法:

至此,任务完成。

效果入下图:

未优化前:

优化后:

这种方法虽然实现背景的渲染,但是存在几个问题:

1、渲染第一行文字的位置是通过鼠标按下的位置来确定的,但是当用户鼠标按下的位置与选取的文字的位置偏差较大,会导致渲染的div与选取的文字位置有偏差。如下图:

2、选取文字的长度和宽度是通过获取文字的内容,文字的size,以及文字的字体。再页面中创建一个span标签,然后把文字带进document里,获取到宽度和高度。这种方法有些文字渲染出来的长度太长。如下图:

附上获取长度和宽度的方法:

以上两个问题,希望有大神给我一点思路和解决方案。欢迎小伙伴跟我一起讨论。

附上项目github:https://github.com/caohelen/pdfjs

一、遇到的问题 :预览pdf文件时,很多内容未显示。****

查看控制台,出现以下警告

二、跟踪源码,排查原因

从下图可以发现baseUrl取值为params.cMapUrl

找到调用WorkerTransport方法处:

该问题的原因是因为缺少了部分字体包,也可使用CDN方式加载字体包。

此处提供cmaps的2个CDN地址(2.2.228为pdfjs-dist的版本号):

https://unpkg.com/browse/[email protected]/cmaps/

https://cdn.jsdelivr.net/npm/[email protected]/cmaps/

加载字体包后,效果如下图(部分内容已打马赛克):