一、安裝和引入pdf.js包。（這里不再做過多的贅述）

二、渲染pdf，同事添加div，進(jìn)行用來存儲(chǔ)文字，保證文字可以被選取復(fù)制。

通過input標(biāo)簽獲取到數(shù)據(jù)文件，然后通過getPDF（）方法進(jìn)行渲染。

renderPDF（）方法

至此，其實(shí)已經(jīng)實(shí)現(xiàn)了pdf文字可復(fù)制的要求。但是，由于各個(gè)div里的文字寬度和高度的不同，導(dǎo)致選取文字的時(shí)候，選取的背景顏色不同統(tǒng)一，需要進(jìn)行統(tǒng)一背景樣式。

思路：渲染完成pdf以后，監(jiān)聽頁面的鼠標(biāo)按下事件和鼠標(biāo)彈起事件。當(dāng)用戶選取文字完成以后，獲取選取文字的長(zhǎng)度和寬度，獲取選取文字距離上邊框和右邊框的值。通過獲取的值來創(chuàng)建div并設(shè)置長(zhǎng)度寬度以及背景顏色，對(duì)文字進(jìn)行遮罩，最后取消用戶選擇的文字。

1、首先確認(rèn)鼠標(biāo)點(diǎn)擊相對(duì)文檔的開始位置：

2、確認(rèn)用戶選取的文字是從哪開始，在哪結(jié)束。

3、最后通過applyColours()進(jìn)行渲染。

applyColours()判斷了很多種情況，當(dāng)用戶值選擇了一行的情況，當(dāng)渲染的文字有還行遞歸調(diào)用回來的等多種情況。同事判斷是否換行是通過第一個(gè)節(jié)點(diǎn)與第二個(gè)節(jié)點(diǎn)的top值絕對(duì)值是否大于10，大于10就表示換行。同時(shí)，節(jié)點(diǎn)后面兩個(gè)節(jié)點(diǎn)如果就調(diào)用另外一個(gè)渲染方法。

otherMothodload（）方法：

至此，任務(wù)完成。

效果入下圖：

未優(yōu)化前：

優(yōu)化后：

這種方法雖然實(shí)現(xiàn)背景的渲染，但是存在幾個(gè)問題：

1、渲染第一行文字的位置是通過鼠標(biāo)按下的位置來確定的，但是當(dāng)用戶鼠標(biāo)按下的位置與選取的文字的位置偏差較大，會(huì)導(dǎo)致渲染的div與選取的文字位置有偏差。如下圖：

2、選取文字的長(zhǎng)度和寬度是通過獲取文字的內(nèi)容，文字的size，以及文字的字體。再頁面中創(chuàng)建一個(gè)span標(biāo)簽，然后把文字帶進(jìn)document里，獲取到寬度和高度。這種方法有些文字渲染出來的長(zhǎng)度太長(zhǎng)。如下圖：

附上獲取長(zhǎng)度和寬度的方法：

以上兩個(gè)問題，希望有大神給我一點(diǎn)思路和解決方案。歡迎小伙伴跟我一起討論。

附上項(xiàng)目github：https://github.com/caohelen/pdfjs