⑴ pdf.js實現文字可復制並且選取文字背景不一致，修改選取文字背景
一、安裝和引入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
⑵ js將網頁導出成pdf（js 列印指定div內容）2020-09-02
<input type="button" id="button" value="點擊列印"/>
<div id="div_print">
<p>列印此處內容</p>
</div>
<script type="text/javascript">
function printdiv(printpage){
var newstr=document.getElementById(printpage).innerHTML;
var oldstr=document.body.innerHTML;
document.body.innerHTML=newstr;
window.print();
document.body.innerHTML=oldstr;
return false;
}
window.onload=function(){
var bt=document.getElementById("button");
bt.onclick=function(){printdiv('div_print');}
}
</script>
html, body{
overflow:visible;
}
列印時另存為pdf模式列印後的內容可復制 默認為Microsoft Print to PDF 模式
⑶ 如何在網頁中顯示PDF文件
使用js插件
其中實現閱讀pdf文件的js插件很多，比如：pdf.js：是一個技術原型主要用於在 HTML5 平台上展示 PDF 文檔，無需任何本地技術支持；jsPDF：是一個使用Javascript語言生成PDF的開源庫
這個 PDFObject.js，是一個 JavaScript 庫用來在HTML中動態嵌入 PDF 文檔。
js代碼：
<script type="text/javascript">
window.onload = function (){
var success = new PDFObject({ url: "sample.pdf" }).embed();
};
</script>
OK,這樣就可以了。只要把地址寫對即可。
若我在某一個div中載入pdf咋辦呢？看官網，發現embed()方法可以有參數的，無參數是指body，有參數是具體的某一個位置。
<script type="text/javascript">
window.onload = function (){
var success = new PDFObject({ url: "sample.pdf" }).embed(「div的id」);
};
</script>
當然,其中還可以進一步設置參數,比如你想以多少秒的速度預覽,有css,無css等
具體的官網如下：http$://$www.$pdfobject$.com/
請去掉$這個符號