⑴ 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/
请去掉$这个符号