效果图
实现代码
var showPdfView = document.getElementById('showPdfView')
showPdfView.onclick = function (e) {
var select_str = getSelectionField(e)
if (select_str === ''){
return
}
var textarea = document.getElementById('showPdfViewHtml')
if (textarea.value.indexOf(select_str) !== -1){
var parent_node = $(window.getSelection().getRangeAt(0).commonAncestorContainer.parentElement)
parent_node.addClass('select')
var node_arr = []
ergodic_ndoe(showPdfView)
function ergodic_ndoe(node) {
if(node.nodeType === 1){
if (node.children.length === 0){
if (node.innerHTML.indexOf(select_str) !== -1){
var index= -2;
var re = new RegExp(select_str, 'g')
var arr = node.innerHTML.match(re);
if (arr.length>1){
var position = 0
var anchorOffset = window.getSelection().anchorOffset
for (var i = 0;i<arr.length;i++){
index = node.innerHTML.indexOf(select_str, index) + select_str.length;
if (index === anchorOffset + select_str.length){
position = i
}
else if (index === anchorOffset){
position = i
}
}
node_arr.push({
el_select: node,
this_all_number: arr.length,
position: position
})
}
else {
node_arr.push({
el_select: node,
this_all_number: 1,
position: 0
})
}
}
}
else {
for (var i = 0;i<node.children.length;i++){
ergodic_ndoe(node.children[i])
}
}
}
}
var sign = 0
for (var j = 0;j< node_arr.length;j++){
if ($(node_arr[j].el_select).hasClass('select')){
sign += node_arr[j].position + 1
$(node_arr[j].el_select).removeClass('select')
break;
}
else {
sign += node_arr[j].this_all_number
}
}
var index2 = -2;
var re_r = new RegExp(select_str, 'g')
var arr_r = textarea.value.match(re_r);
if (arr_r && arr_r.length > 1){
for (var i = 0;i<arr_r.length;i++){
index2 = textarea.value.indexOf(select_str, index2) + select_str.length;
if ((i+1) === sign){
var line_break_str = textarea.value.substring(0,index2);
var line_break_end = textarea.value.substr(index2);
textarea.value = line_break_str
h1 = textarea.scrollHeight
textarea.value = line_break_str + line_break_end
textarea.scrollTop = h1 - 250
textarea.selectionStart = index2 - select_str.length;
textarea.selectionEnd = index2
break;
}
}
}
if (index2 === -2){
line_break_str = textarea.value.substring(0,textarea.value.indexOf(select_str));
line_break_end = textarea.value.substr(textarea.value.indexOf(select_str));
textarea.value = line_break_str
var h1 = textarea.scrollHeight
textarea.value = line_break_str + line_break_end
textarea.scrollTop = h1 - 250
textarea.selectionStart = textarea.value.indexOf(select_str);
textarea.selectionEnd = textarea.value.indexOf(select_str) + select_str.length
}
textarea.focus();
}
else {
alert('没有找到匹配项,请选中一个连续的字词')
}
}
function getSelectionField(e) {
var selection = '';
selection = getIeSelection(e);
if (selection == '') {
selection = getFireFoxSelection(e);
}
return selection.replace(/(^\s*)|(\s*$)/g, "");
}
function getIeSelection() {
if (window.getSelection) {
return window.getSelection().toString();
}
else if (document.getSelection) {
return document.getSelection();
} else if (document.selection) {
return document.selection.createRange().text;
}
}
function getFireFoxSelection(e) {
if (e.selectionStart != undefined && e.selectionEnd != undefined) {
var start = e.selectionStart;
var end = e.selectionEnd;
return e.value.substring(start, end);
} else {
return "";
}
}
model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table class="tblborder" cellspacing="0" cellpadding="0" style="width: 100%;" border="0">
<tbody>
<tr>
<td>
<form name="form" id="myform" method="post" action="">
<input type="hidden" value="1" name="direction">
<input type="hidden" value="2" name="hear_foot">
<input type="hidden" value="0,0" name="pdf_header_or_footer">
<input type="hidden" value="486" name="tid">
<table cellspacing="0" cellpadding="0" width="100%" border="0">
<tbody>
<tr class="firstalt">
<td colspan="3">
</td><td colspan="5">
<div id="fixedShow">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr class="tbti">
<td width="100%" align="center" style="padding-left:10px;line-height: 40px;">
<button type="button" class="layui-btn layui-btn-sm" onclick="export_pdf()">導出PDF</button>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr class=""><td colspan="6"> </td></tr>
<tr class="">
<td style="width:1%"> </td>
<td style="width:47%" align="left" valign="top">
<div id="showPdfView" class="left"><h2 style="text-align: center;"><span style="font-size: 8px;"><strong><span style="font-family: 黑体;"><span style="font-family: 黑体; font-size: 10px;"></span><htmlpageheader name="myHeader1"></htmlpageheader></span></strong></span></h2><h2 style="text-align: center;"><span style="font-size: 24px;"><strong><span style="font-family: 黑体; font-size: 10px;"><img src="http://www.1ecst.com/tp_ecst/ueditor/php/upload/image/20190726/1564075729299529.png" title="1564075729299529.png" alt="20190723160858.png" style="width: 220px; height: 51px;" width="220" height="51"></span></strong></span></h2><h2 style="text-align: center;"><span style="text-decoration: underline; font-size: 16px;">RECEIPT</span></h2><table><tbody class="select"><tr class="firstRow"><td style="word-break: break-all;" width="165" valign="top"><span style="font-size: 16px;">Customer Name:</span></td><td style="word-break: break-all;" width="411" valign="top"></td><td style="word-break: break-all;" width="104" valign="top"><span style="font-size: 16px;">Date:</span></td><td style="word-break: break-all;" width="228" valign="top">2020-11-04</td></tr><tr><td style="word-break: break-all;" width="164" valign="top"><span style="font-size: 16px;">Contact no:</span></td><td style="word-break: break-all;" width="411" valign="top"></td><td style="word-break: break-all;" width="104" valign="top"><span style="font-size: 16px;">Receipt No:</span></td><td style="word-break: break-all;" width="228" valign="top" align="left">SZ-DN-CONTRACT-0043/20</td></tr><tr><td style="word-break: break-all;" width="165" valign="top"><span style="font-size: 16px;">Email:</span></td><td style="word-break: break-all;" width="411" valign="top"></td><td style="word-break: break-all;" width="104" valign="top"><span style="font-size: 16px;">Our Ref.:</span></td><td style="word-break: break-all;" width="228" valign="top"></td></tr><tr><td style="word-break: break-all;" width="165" valign="top"><span style="font-size: 16px;">Attn.:</span></td><td style="word-break: break-all;" width="411" valign="top"><span style="font-size: 16px;"></span></td><td style="word-break: break-all;" width="104" valign="top"><span style="font-size: 16px;" class="">Your Ref.:</span></td><td style="word-break: break-all;" width="228" valign="top"></td></tr><tr><td style="word-break: break-all;" width="165" valign="top"><span style="font-size: 16px;">Payment Method</span></td><td style="word-break: break-all;" width="411" valign="top" class="">银行转款</td><td style="word-break: break-all;" width="104" valign="top"><span style="font-size: 16px;">Curr.:</span></td><td style="word-break: break-all;" width="228" valign="top">USD</td></tr></tbody></table><p></p><table><tbody><tr class="firstRow"><td style="word-break: break-all; border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);" width="477" valign="top" align="center">Package</td><td style="word-break: break-all; border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);" width="90" valign="top" align="center"><span style="font-size: 16px;">QTY</span></td><td style="word-break: break-all; border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);" width="97" valign="top" align="center">Set</td><td style="word-break: break-all; border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);" width="123" valign="top" align="center"><span style="font-size: 16px;">Unit Price</span></td><td style="word-break: break-all; border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);" width="102" valign="top" align="center"><span style="font-size: 16px;">Total</span></td></tr></tbody></table><p>【服務數據】<br></p><hr><table><tbody><tr class="firstRow"><td style="word-break: break-all;" width="975" valign="top" align="right"><span style="text-align: right;">Total:USD</span></td></tr></tbody></table><table><tbody><tr class="firstRow"><td style="word-break: break-all;" width="975" valign="top"><span style="font-size: 16px;" class="select">Thank you for enjoying our service<code> </code></span></td></tr></tbody></table><table><tbody><tr class="firstRow"><td style="word-break: break-all;" width="972" valign="top"><p>Remarks:</p></td></tr></tbody></table><p><span style="font-size: 10px;"><htmlpagefooter name="MyFooter1"></htmlpagefooter></span></p><hr><table data-sort="sortDisabled"><tbody><tr class="firstRow"><td style="word-break: break-all;" width="311" valign="top"><span style="text-decoration: underline;">Signature:<code> </code><code> </code><code> </code><code> </code><code> </code><code> </code><code> </code><code> </code><code> </code><code> </code><code> </code><code> </code><code> </code><code> </code><code> </code><code> </code><code> </code><code> </code> </span><br></td><td width="311" valign="top"><br></td><td style="word-break: break-all;" width="311" valign="top"><span style="text-decoration: underline;">Signature: <code> </code> <code> </code> <code> </code> <code> </code> <code> </code></span><span style="text-decoration: underline;"> <code> </code> <code> </code> <code> </code> <code> </code></span><br></td></tr><tr><td style="word-break: break-all;" width="311" valign="top">Customer:</td><td width="311" valign="top"><br></td><td style="word-break: break-all;" width="311" valign="top">开发test有限公司(勿删)</td></tr><tr><td rowspan="1" colspan="3" style="word-break: break-all;" valign="top" align="center" class="select"><p class="">地址:广东省深圳市宝安区街道2222222 電話:0755-66668888</p><p class="select">Address:Baoan District Street, Shenzhen City, Guangdong Province Tel:0755-66668888<code> </code></p></td></tr></tbody></table><p style="text-align: left;"><span style="font-size: 10px;"><code> </code></span></p><p style="text-align: left;"><br></p></div>
</td>
<td style="width:1%"> </td>
<td style="width:50%;position: absolute;" align="left">
<div class="right">
<textarea id="showPdfViewHtml" name="tempData" style="width:100%;height:580px;">
<h2 style="text-align: center;">
<span style="font-size: 8px;">
<strong>
<span style="font-family: 黑体;">
<span style="font-family: 黑体; font-size: 10px;">
</span>
<htmlpageheader name="myHeader1">
</htmlpageheader>
</span>
</strong>
</span>
</h2>
<h2 style="text-align: center;">
<span style="font-size: 24px;">
<strong>
<span style="font-family: 黑体; font-size: 10px;">
<img src="http://www.1ecst.com/tp_ecst/ueditor/php/upload/image/20190726/1564075729299529.png" title="1564075729299529.png" alt="20190723160858.png" style="width: 220px; height: 51px;" width="220" height="51">
</span>
</strong>
</span>
</h2>
<h2 style="text-align: center;">
<span style="text-decoration: underline; font-size: 16px;">RECEIPT
</span>
</h2>
<table>
<tbody>
<tr class="firstRow">
<td style="word-break: break-all;" width="165" valign="top">
<span style="font-size: 16px;">CustomerName:
</span>
</td>
<td style="word-break: break-all;" width="411" valign="top">
</td>
<td style="word-break: break-all;" width="104" valign="top">
<span style="font-size: 16px;">Date:
</span>
</td>
<td style="word-break: break-all;" width="228" valign="top">2020-11-04
</td>
</tr>
<tr>
<td style="word-break: break-all;" width="164" valign="top">
<span style="font-size: 16px;">Contactno:
</span>
</td>
<td style="word-break: break-all;" width="411" valign="top">
</td>
<td style="word-break: break-all;" width="104" valign="top">
<span style="font-size: 16px;">ReceiptNo:
</span>
</td>
<td style="word-break: break-all;" width="228" valign="top" align="left">SZ-DN-CONTRACT-0043/20
</td>
</tr>
<tr>
<td style="word-break: break-all;" width="165" valign="top">
<span style="font-size: 16px;">Email:
</span>
</td>
<td style="word-break: break-all;" width="411" valign="top">
</td>
<td style="word-break: break-all;" width="104" valign="top">
<span style="font-size: 16px;">OurRef.:
</span>
</td>
<td style="word-break: break-all;" width="228" valign="top">
</td>
</tr>
<tr>
<td style="word-break: break-all;" width="165" valign="top">
<span style="font-size: 16px;">Attn.:
</span>
</td>
<td style="word-break: break-all;" width="411" valign="top">
<span style="font-size: 16px;">
</span>
</td>
<td style="word-break: break-all;" width="104" valign="top">
<span style="font-size: 16px;">YourRef.:
</span>
</td>
<td style="word-break: break-all;" width="228" valign="top">
</td>
</tr>
<tr>
<td style="word-break: break-all;" width="165" valign="top">
<span style="font-size: 16px;">PaymentMethod
</span>
</td>
<td style="word-break: break-all;" width="411" valign="top">银行转款
</td>
<td style="word-break: break-all;" width="104" valign="top">
<span style="font-size: 16px;">Curr.:
</span>
</td>
<td style="word-break: break-all;" width="228" valign="top">USD
</td>
</tr>
</tbody>
</table>
<p>
</p>
<table>
<tbody>
<tr class="firstRow">
<td style="word-break: break-all; border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);" width="477" valign="top" align="center">Package
</td>
<td style="word-break: break-all; border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);" width="90" valign="top" align="center">
<span style="font-size: 16px;">QTY
</span>
</td>
<td style="word-break: break-all; border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);" width="97" valign="top" align="center">Set
</td>
<td style="word-break: break-all; border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);" width="123" valign="top" align="center">
<span style="font-size: 16px;">UnitPrice
</span>
</td>
<td style="word-break: break-all; border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);" width="102" valign="top" align="center">
<span style="font-size: 16px;">Total
</span>
</td>
</tr>
</tbody>
</table>
<p>【服務數據】
<br>
</p>
<hr>
<table>
<tbody>
<tr class="firstRow">
<td style="word-break: break-all;" width="975" valign="top" align="right">
<span style="text-align: right;">Total:USD
</span>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr class="firstRow">
<td style="word-break: break-all;" width="975" valign="top">
<span style="font-size: 16px;">Thankyouforenjoyingourservice
<code>
</code>
</span>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr class="firstRow">
<td style="word-break: break-all;" width="972" valign="top">
<p>Remarks:
</p>
</td>
</tr>
</tbody>
</table>
<p>
<span style="font-size: 10px;">
<htmlpagefooter name="MyFooter1">
</htmlpagefooter>
</span>
</p>
<hr>
<table data-sort="sortDisabled">
<tbody>
<tr class="firstRow">
<td style="word-break: break-all;" width="311" valign="top">
<span style="text-decoration: underline;">Signature:
<code>
</code>
<code>
</code>
<code>
</code>
<code>
</code>
<code>
</code>
<code>
</code>
<code>
</code>
<code>
</code>
<code>
</code>
<code>
</code>
<code>
</code>
<code>
</code>
<code>
</code>
<code>
</code>
<code>
</code>
<code>
</code>
<code>
</code>
<code>
</code>
</span>
<br>
</td>
<td width="311" valign="top">
<br>
</td>
<td style="word-break: break-all;" width="311" valign="top">
<span style="text-decoration: underline;">Signature:
<code>
</code>
<code>
</code>
<code>
</code>
<code>
</code>
<code>
</code>
</span>
<span style="text-decoration: underline;">
<code>
</code>
<code>
</code>
<code>
</code>
<code>
</code>
</span>
<br>
</td>
</tr>
<tr>
<td style="word-break: break-all;" width="311" valign="top">Customer:
</td>
<td width="311" valign="top">
<br>
</td>
<td style="word-break: break-all;" width="311" valign="top">开发test有限公司(勿删)
</td>
</tr>
<tr>
<td rowspan="1" colspan="3" style="word-break: break-all;" valign="top" align="center">
<p>地址:广东省深圳市宝安区街道2222222電話:0755-66668888
</p>
<p>Address:BaoanDistrictStreet,ShenzhenCity,GuangdongProvinceTel:0755-66668888
<code>
</code>
</p>
</td>
</tr>
</tbody>
</table>
<p style="text-align: left;">
<span style="font-size: 10px;">
<code>
</code>
</span>
</p>
<p style="text-align: left;">
<br>
</p>
</textarea>
</div>
</td>
<td style="width:1%"> </td>
</tr>
</tbody>
</table>
</form></td>
</tr>
</tbody>
</table>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
var showPdfView = document.getElementById('showPdfView')
showPdfView.onclick = function (e) {
var select_str = getSelectionField(e)
if (select_str === ''){
return
}
var textarea = document.getElementById('showPdfViewHtml')
if (textarea.value.indexOf(select_str) !== -1){
var parent_node = $(window.getSelection().getRangeAt(0).commonAncestorContainer.parentElement)
parent_node.addClass('select')
var node_arr = []
ergodic_ndoe(showPdfView)
function ergodic_ndoe(node) {
if(node.nodeType === 1){
if (node.children.length === 0){
if (node.innerHTML.indexOf(select_str) !== -1){
var index= -2;
var re = new RegExp(select_str, 'g')
var arr = node.innerHTML.match(re);
if (arr.length>1){
var position = 0
var anchorOffset = window.getSelection().anchorOffset
for (var i = 0;i<arr.length;i++){
index = node.innerHTML.indexOf(select_str, index) + select_str.length;
if (index === anchorOffset + select_str.length){
position = i
}
else if (index === anchorOffset){
position = i
}
}
node_arr.push({
el_select: node,
this_all_number: arr.length,
position: position
})
}
else {
node_arr.push({
el_select: node,
this_all_number: 1,
position: 0
})
}
}
}
else {
for (var i = 0;i<node.children.length;i++){
ergodic_ndoe(node.children[i])
}
}
}
}
var sign = 0
for (var j = 0;j< node_arr.length;j++){
if ($(node_arr[j].el_select).hasClass('select')){
sign += node_arr[j].position + 1
$(node_arr[j].el_select).removeClass('select')
break;
}
else {
sign += node_arr[j].this_all_number
}
}
var index2 = -2;
var re_r = new RegExp(select_str, 'g')
var arr_r = textarea.value.match(re_r);
if (arr_r && arr_r.length > 1){
for (var i = 0;i<arr_r.length;i++){
index2 = textarea.value.indexOf(select_str, index2) + select_str.length;
if ((i+1) === sign){
var line_break_str = textarea.value.substring(0,index2);
var line_break_end = textarea.value.substr(index2);
textarea.value = line_break_str
h1 = textarea.scrollHeight
textarea.value = line_break_str + line_break_end
textarea.scrollTop = h1 - 250
textarea.selectionStart = index2 - select_str.length;
textarea.selectionEnd = index2
break;
}
}
}
if (index2 === -2){
line_break_str = textarea.value.substring(0,textarea.value.indexOf(select_str));
line_break_end = textarea.value.substr(textarea.value.indexOf(select_str));
textarea.value = line_break_str
var h1 = textarea.scrollHeight
textarea.value = line_break_str + line_break_end
textarea.scrollTop = h1 - 250
textarea.selectionStart = textarea.value.indexOf(select_str);
textarea.selectionEnd = textarea.value.indexOf(select_str) + select_str.length
}
textarea.focus();
}
else {
alert('没有找到匹配项,请选中一个连续的字词')
}
}
function getSelectionField(e) {
var selection = '';
selection = getIeSelection(e);
if (selection == '') {
selection = getFireFoxSelection(e);
}
return selection.replace(/\s*/g, "");
}
function getIeSelection() {
if (window.getSelection) {
return window.getSelection().toString();
}
else if (document.getSelection) {
return document.getSelection();
} else if (document.selection) {
return document.selection.createRange().text;
}
}
function getFireFoxSelection(e) {
if (e.selectionStart != undefined && e.selectionEnd != undefined) {
var start = e.selectionStart;
var end = e.selectionEnd;
return e.value.substring(start, end);
} else {
return "";
}
}
</script>
</body>
</html>