在前面的文章中，易捷在线PDF转换成Word方法和步骤1、选择【工具】【表单】【编辑】以确保您在编辑模式下，然后单击【选择对象】工具 。2、请双击当前的按钮，然后单击在【按钮属性】对话框中的选项标签。3、请为【布局】选择您要显示的标签类型。4、请为【方式】指定单击后按钮的显示：5、要定义按钮上出现的标签或图标，请执行以下步骤：a、如果标签选项已在【布局】菜单中选定，请在标签框中输入文本；b、如果从布局菜单中选择了一个图标选项，则单击【选择图标】，再单击【浏览】，然后选择文件。按钮行为方式选项无 ： 保持按钮的外观一致。推 ： 指定鼠标的向上、按下和鼠标感应状态的外观。在状态下选择选项，然后指定标签或图标选项。向上 ： 决定了当鼠标按钮未被单击时按钮的外观。按下 ： 决定了当鼠标单击按钮而未松开前按钮的外观。鼠标感应 ： 决定了当指针悬停在按钮上方时按钮的外观。轮廓 ： 高亮显示按钮边界。反色 ： 反色按钮的明暗阴影。Word 2010可以设置在打开文件时以只读方式打开，打开后用户不能进行任何操作，只能阅读文档，如果用户要选择以只读方式打开文档并对其进行修改，必须另存为文件。将文档设为只读后，再打开时系统会提示文档以设为只读模式。 1.单击文件菜单，在弹出的面板中单击打开命令，打开一个Word文档。2.单击文件菜单，在弹出的面板中单击另存为命令，弹出另存为对话框，设置保存路径和文件名，单击工具右侧的下三角按钮，在弹出的列表中选择常规选项选项，弹出常规选项对话框，在其中选中建议以只读方式打开文档复选框。3.依次单击确定按钮和保存按钮，即可设置文档模式为只读模式。 Microsoft Office 2010下载： 软件名称：Microsoft Office 2010SP1 32Bit 简体中文官方版 大小：340.00MB版本：SP1 32Bit 简体中文官方版类别：文字处理 语言：中文使用平台：Win_xp/Win7/Win8/Ubuntu Microsoft Office 2010下载： 软件名称：Microsoft Office 2010SP1 64Bit 简体中文官方版 大小：410.00MB版本：SP1 64Bit 简体中文官方版类别：文字处理 语言：中文使用平台：Win_xp/Win7/Win8/Ubuntu一、安装和引入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中有["1","2","3","4"]这样一个string，怎么把它变成array](/aiimages/js%E4%B8%AD%E6%9C%89%5B%26quot%3B1%26quot%3B%2C%26quot%3B2%26quot%3B%2C%26quot%3B3%26quot%3B%2C%26quot%3B4%26quot%3B%5D%E8%BF%99%E6%A0%B7%E4%B8%80%E4%B8%AAstring%EF%BC%8C%E6%80%8E%E4%B9%88%E6%8A%8A%E5%AE%83%E5%8F%98%E6%88%90array.png)
