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

一、安装和引入pdfjs包。（这里不再做过多的赘述）

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

通过input标签获取到数据文件，然后通过getPDF（）方法进行渲染。

renderPDF（）方法

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

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

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

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

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

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

otherMothodload（）方法：

至此，任务完成。

效果入下图：

未优化前：

优化后：

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

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

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

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

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

附上项目github：>

var str = "页面展示从数据库中取出来的字段title。。js获取所有展示出来title的内容并改变颜色";

str = strfontcolor("red");

divinnerHTML = str;

<!DOCTYPE html>

<html>

<head>

<title>getHexColor js/jQuery 获得十六进制颜色</title>

function getHexBgColor(){

var str = [];

var rgb = documentgetElementById('color')stylebackgroundColorsplit('(');

for(var k = 0; k < 3; k++){

str[k] = parseInt(rgb[1]split(',')[k])toString(16);

}

str = '#'+str[0]+str[1]+str[2];

documentgetElementById('color')innerHTML = str;

}

function getHexColor(){

var str = [];

var rgb = documentgetElementById('color')stylecolorsplit('(');

for(var k = 0; k < 3; k++){

str[k] = parseInt(rgb[1]split(',')[k])toString(16);

}

str = '#'+str[0]+str[1]+str[2];

documentgetElementById('color')innerHTML = str;

}

</script>

#color{

width: 200px;

height: 200px;

line-height: 200px;

text-align: center;

}

</style>

</head>

<body>

</body>

</html>

点击“获得背景色”按钮，会调用getHexBgColor()方法获取css的背景色。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN" " >

javascript中的getAttribute() 和style的区别很明显：

getAttribute()是HTML DOM的一个方法，用以获取HTML元素的属性（如id，name，type以及其他自定义属性）。

style是HTML DOM的一个关于样式的对象，style对象的属性（如background，color，border等等）用以设置元素的样式。

示例如下：对于以下HTML结构，

<div id="test" name="div_name" style="color:red;">示例DIV</div>

如果要获取div的name属性值，可以使用

documentgetElementById("test")getAttribute("name");

如果要获取DIV的样式如字体的颜色，可以使用

documentgetElementById("test")stylecolor;

改变选中文本的字体颜色,那我们需要的就是通过jS的onmousedowm来做，然后获取到它选择的这段文字的对象，然后在通过js改变它的css来做就行了，这里我写段代码：

<html>

var oDiv = documentgetElementById('div1');

oDivonmousedown = function(){

oDivstylecolor = '#f00';

}

</script>

<body>

<p>选择我会变颜色</p>

</div>

</body>

</html>

以上就是关于pdf.js实现文字可复制并且选取文字背景不一致，修改选取文字背景全部的内容，包括:pdf.js实现文字可复制并且选取文字背景不一致，修改选取文字背景、js实现页面点击文字,div跳转，点红，div变成红，点黄，div红就隐藏，然后把另外的div黄显示、js如何获取从数据库中取出来所展示的数据并改变颜色等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/10136683.html

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

发表评论

评论列表（0条）