html2canvas cuts the display when there is horizontal scrollbar - html2canvas

I want to export a div as pdf with html2canvas :
function printPdf() {
var w = document.getElementById("to_print").offsetWidth;
var h = document.getElementById("to_print").offsetHeight;
html2canvas(document.getElementById("to_print"), {
dpi: 300,
scale: 3,
onrendered: function(canvas) {
var img = canvas.toDataURL("image/jpeg", 1);
var doc = new jsPDF('L', 'px', [w, h]);
doc.addImage(img, 'JPEG', 0, 0, w, h);
doc.save('rapport-arrivee-depart.pdf');
}
});
}
The content to be exported is :
<div id="to_print">
<div class="row">
<div class="col-md-12" style="background-color: white">
<div class="portlet box green">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-globe"></i><fmt:message key="HOTEL.REPORT_ARRIVAL_DEPARTURE.PAGE_BREADCRUMB.SPAN"/> </div>
<div class="tools"> </div>
</div>
<div class="portlet-body">
<table class="table table-striped table-bordered table-hover" id="sample_1">
<thead>
<tr>
<th colspan="3"></th>
<th class="uppercase text-center" colspan="3"><fmt:message key="COMMON.DEPARTURE.TITLE"/></th>
<th class="uppercase text-center" colspan="3"><fmt:message key="COMMON.ARRIVED.TITLE"/></th>
<th colspan="2"></th>
</tr>
<tr role="row">
<th class="uppercase text-center"> <fmt:message key="COMMON.NUM.CHAMBER_MIN"/> </th>
<th class="uppercase text-center"> <fmt:message key="COMMON.TYPE.TITLE"/> </th>
<th class="uppercase text-center"> <fmt:message key="COMMON.REPORT.TITLE"/> </th>
<th class="uppercase text-center"> <fmt:message key="COMMON.TABLE.NAME_MIN"/> </th>
<th class="uppercase text-center"> <fmt:message key="COMMON.ADULT_CHILD.TITLE"/> </th>
<th class="uppercase text-center"> <fmt:message key="COMMON.CHILD.TITLE"/> </th>
<th class="uppercase text-center"> <fmt:message key="COMMON.TABLE.NAME_MIN"/> </th>
<th class="uppercase text-center"> <fmt:message key="COMMON.ADULT_CHILD.TITLE"/> </th>
<th class="uppercase text-center"> <fmt:message key="COMMON.CHILD.TITLE"/> </th>
<th class="uppercase text-center"> <fmt:message key="COMMON.HOUR.TITLE"/> </th>
<th class="uppercase text-center"> <fmt:message key="COMMON.NUMBER.NIGHT"/> </th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th class="uppercase text-center"></th>
<th class="uppercase text-center"></th>
<th class="uppercase text-center"></th>
<th class="uppercase text-center"></th>
<th style="text-align:center"></th>
<th class="uppercase text-center"></th>
<th class="uppercase text-center"></th>
<th style="text-align:center"></th>
<th class="uppercase text-center"></th>
<th class="uppercase text-center"></th>
<th class="uppercase text-center"></th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
<div class="row invoice-subtotal right" style="background-color: white">
<div class="col-xs-3 col-xs-offset-3">
<strong><fmt:message key="HOTEL.REPORT_ARRIVAL_DEPARTURE.NUMBER_BEDROOM_DEPARTURE"/> : <span id="bindNbDepart"><fmt:message key="COMMON.NOT.DEFINED"/></span></strong>
</div>
<div class="col-xs-3">
<strong><fmt:message key="HOTEL.REPORT_ARRIVAL_DEPARTURE.NUMBER_BEDROOM_ARRIVAL"/> : <span id="bindNbArrivee"><fmt:message key="COMMON.NOT.DEFINED"/></span></strong>
</div>
</div>
</div>
Here is the web page displayed :
And here is the pdf generated :
So how to display all the content of the web page inside the pdf ?


You can set the window width and height in the html2canvas call. Also instead of offsetWidth you should use scrollWidth. Before you do that it may be needed to scroll to the start of the page. Code, adapted from https://github.com/niklasvh/html2canvas/issues/1438#issuecomment-739244530 and https://stackoverflow.com/a/68707065/:
scrollX: -window.scrollX,
scrollY: -window.scrollY,
windowWidth: document.documentElement.scrollWidth,
windowHeight: document.documentElement.scrollHeight,
Full html code, with some additional libraries and data added to replicate your example:
<html>
<head>
<title>
pdf export with scrollbars
</title>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script>
function printPdf() {
var w = document.getElementById("to_print").scrollWidth;
var h = document.getElementById("to_print").scrollHeight;
html2canvas(document.getElementById("to_print"), {
scrollX: -window.scrollX,
scrollY: -window.scrollY,
windowWidth: document.documentElement.scrollWidth,
windowHeight: document.documentElement.scrollHeight,
dpi: 300,
scale: 3,
}).then(function (canvas) {
var img = canvas.toDataURL("image/jpeg", 1);
var doc = new jsPDF('L', 'px', [w, h]);
doc.addImage(img, 'JPEG', 0, 0, w, h);
doc.save('rapport-arrivee-depart.pdf');
});
}
</script>
</head>
<body>
<div id="to_print">
<div class="row">
<div class="col-md-12" style="background-color: white">
<div class="portlet box green">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-globe"></i><fmt:message key="HOTEL.REPORT_ARRIVAL_DEPARTURE.PAGE_BREADCRUMB.SPAN"/> </div>
<div class="tools"> </div>
</div>
<div class="portlet-body">
<table class="table table-striped table-bordered table-hover" id="sample_1">
<thead>
<tr>
<th colspan="3"></th>
<th class="uppercase text-center" colspan="3">Départ</th>
<th class="uppercase text-center" colspan="3">Arrivée</th>
<th colspan="2"></th>
</tr>
<tr role="row">
<th class="uppercase text-center">No. Chambre</th>
<th class="uppercase text-center">Type</th>
<th class="uppercase text-center">État</th>
<th class="uppercase text-center">Nom</th>
<th class="uppercase text-center">Adult./Enf.</th>
<th class="uppercase text-center">Enfants(s)</th>
<th class="uppercase text-center">Nom</th>
<th class="uppercase text-center">Adult./Enf.</th>
<th class="uppercase text-center">Enfants(s)</th>
<th class="uppercase text-center">Heure</th>
<th class="uppercase text-center">No. nuits</th>
</tr>
</thead>
<tbody>
<tr><td>1</td><td>Chambre simple</td><td>CLEAN</td><td>AndrianiainaAndyFrédéricnomtrèslargeprovoquantdesbarresdedéfilement</td><td>1</td><td>1</td><td>AndrianiainaAndyFrédéricnomtrèslargeprovoquantdesbarresdedéfilement</td><td>1</td><td>1</td><td>10:00</td><td>5</td></tr>
<tr><td>1</td><td>Chambre simple</td><td>CLEAN</td><td>AndrianiainaAndyFrédéricnomtrèslargeprovoquantdesbarresdedéfilement</td><td>1</td><td>1</td><td>AndrianiainaAndyFrédéricnomtrèslargeprovoquantdesbarresdedéfilement</td><td>1</td><td>1</td><td>10:00</td><td>5</td></tr>
<tr><td>1</td><td>Chambre simple</td><td>CLEAN</td><td>AndrianiainaAndyFrédéricnomtrèslargeprovoquantdesbarresdedéfilement</td><td>1</td><td>1</td><td>AndrianiainaAndyFrédéricnomtrèslargeprovoquantdesbarresdedéfilement</td><td>1</td><td>1</td><td>10:00</td><td>5</td></tr>
</tbody>
<tfoot>
<tr>
<th class="uppercase text-center"></th>
<th class="uppercase text-center"></th>
<th class="uppercase text-center"></th>
<th class="uppercase text-center"></th>
<th style="text-align:center"></th>
<th class="uppercase text-center"></th>
<th class="uppercase text-center"></th>
<th style="text-align:center"></th>
<th class="uppercase text-center"></th>
<th class="uppercase text-center"></th>
<th class="uppercase text-center"></th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
<div class="row invoice-subtotal right" style="background-color: white">
<div class="col-xs-3 col-xs-offset-3">
<strong><fmt:message key="HOTEL.REPORT_ARRIVAL_DEPARTURE.NUMBER_BEDROOM_DEPARTURE"/> : <span id="bindNbDepart"><fmt:message key="COMMON.NOT.DEFINED"/></span></strong>
</div>
<div class="col-xs-3">
<strong><fmt:message key="HOTEL.REPORT_ARRIVAL_DEPARTURE.NUMBER_BEDROOM_ARRIVAL"/> : <span id="bindNbArrivee"><fmt:message key="COMMON.NOT.DEFINED"/></span></strong>
</div>
</div>
</div>
<button onclick="printPdf();">Print</button>
</body>
</html>
Resulting pdf:

Related

how to save data from webcrawlling by date, mealtype

As you can see in this screenshot, I want to save those Korean-written data in array. (actually they are food menu of my dormitory)
<div class="row">
<div class="table-responsive">
<table class="table table-center table-data">
<colgroup>
<col width="18%">
<col width="28%">
<col width="28%">
<col width="28%">
</colgroup>
<thead>
<tr>
<th>구 분</th>
<th>조 식</th>
<th>중 식</th>
<th>석 식</th>
</tr>
</thead>
<tbody>
<tr style="height:80px">
<th>
2021년 09월 13일 (월요일)</th>
<td>와플/생크림,쨈,감자소시지크림스튜,양배추콘샐럳,</td>
<td>발아현미밥,짜박이된장찌개,치즈불닭,명란오이무침,김치</td>
<td>렌즈콩밥,풋팟퐁커리,콩나물국,얌운센샐러드,단무지채무침,김치</td>
</tr>
<tr style="height:80px">
<th>
2021년 09월 14일 (화요일)</th>
<td>소고기맑은장국,마약메추리알,진미채볶음,김치</td>
<td>흑미밥,목살고추장찌개,임연수구이,우엉호두강정,김치</td>
<td>찰수수밥,청국장김치찌개,돈육갈비찜,미나리버섯초무침,백김치</td>
</tr>
<tr style="height:80px">
<th>
2021년 09월 15일 (수요일)</th>
<td>새우미역죽,동그랑땡,꼴뚜기젓무침,김치볶음,쥬스</td>
<td>얼큰잔치국수,멸치주먹밥,회오리감자,참나물생채,김치</td>
<td>율무밥,옹심이만두전골,녹두전/오징어장떡,시금치나물,김치</td>
</tr>
<tr style="height:80px">
<th>
2021년 09월 16일 (목요일)</th>
<td>또띠아에그콘피자,우유,초코첵스,오렌지</td>
<td>중국식볶음밥,유부팽이장국,로제떡볶이,마늘장아찌,김치</td>
<td>혼합잡곡밥,콩나물국,간장소스파닭,무피클,고추된장무침,김치</td>
</tr>
<tr style="height:80px">
<th>
2021년 09월 17일 (금요일)</th>
<td>황태맑은국,어묵죽순볶음,건파래볶음,김치</td>
<td>낙지콩나물비빔밥,토란맑은국,김치,모둠과일</td>
<td>기장밥,대구매운탕,두부감자강정,마늘쫑베이컨무침,김치</td>
</tr>
<tr style="height:80px">
<th>
2021년 09월 18일 (토요일)</th>
<td>누룽지죽,햄전,쑥갓나물,김치볶음</td>
<td>차조밥,아욱국,돈육불고기,양배추&깻잎쌈,무생채,김치</td>
<td>간편식</td>
</tr>
<tr style="height:80px">
<th style="color:red;">
2021년 09월 19일 (일요일)</th>
<td>간편식</td>
<td>간편식</td>
<td>간편식</td>
</tr>
</tbody>
</table>
</div><!-- // table-responsive -->
</div>
With codes below, I could get only entire data like
let html = try String(contentsOf: myURL, encoding: .utf8)
let doc: Document = try SwiftSoup.parse(html)
let body = try doc.body()
let menu = try body?.getElementsByClass("table-responsive").text()
<Don't care the Korean, they are just food menu....>
but I want to save them separated by date and meal type.
As I'm new to swift soup and web crawling, I'm very confusing now.
Is there any way to save them seperately in array?

Perl XML::LibXML XPath 2.0 to XPath 1.0

I have the following XPath that works fine in XPath 2.0 (as tested in OxygenXML):
//h2[a[#id='start']]/following-sibling::*[not(preceding-sibling::*[self::div[#id='end']])]
but I'm getting different results when I use it with LibXML findnodes():
my #nodes = $source_doc->findnodes('//h2[a[#id="start"]]/following-sibling::*[not(preceding-sibling::*[self::div[#id="end"]])]');
After checking the LibXML documentation, it seems that LibXML supports XPath 1.0 only. How would I go about changing my XPath to something that works with XPath 1.0? Is it even possible to create a compatible path like this in XPath 1.0?
Since I've been asked to provide, I'm updating the post to include my sample data and the output I'm getting when I run the XPath I entered above:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="insn.css" />
<meta name="generator" content="encodingindex.xsl" />
<title>Index by Encoding</title>
</head>
<body><hr /><h1 class="topleveltable"><a name="top" id="top"></a>Top-level encodings</h1><div
class="regdiagram-32"></div><hr /><h2><a name="dp" id="start"></a>Data-processing and
miscellaneous instructions</h2><div class="decode_navigation">
<p>These instructions are under the top-level.</p>
</div><div class="regdiagram-32">
<table class="regdiagram">
<thead>
<tr>
<td>31</td>
<td>0</td>
</tr>
</thead>
<tbody>
<tr class="firstrow">
<td colspan="4" class="lr">!= 1111</td>
<td colspan="2" class="lr">00</td>
<td class="lr">op0</td>
<td colspan="5" class="lr">op1</td>
<td colspan="12" class="lr"></td>
<td class="lr">op2</td>
<td colspan="2" class="lr">op3</td>
<td class="lr">op4</td>
<td colspan="4" class="lr"></td>
</tr>
</tbody>
</table>
</div><div class="instructiontable">
<table class="instructiontable">
<tr>
<th colspan="5">Decode fields</th>
<th rowspan="2"> Instruction details </th>
</tr>
<tr>
<th class="bitfields">op0</th>
<th class="bitfields">op1</th>
<th class="bitfields">op2</th>
<th class="bitfields">op3</th>
<th class="bitfields">op4</th>
</tr>
<tr class="instructiontable">
<td class="bitfield"> 0 </td>
<td class="bitfield"> </td>
<td class="bitfield"> 1 </td>
<td class="bitfield"> != 00 </td>
<td class="bitfield"> 1 </td>
<td class="iformname">Extra load/store</td>
</tr>
<tr class="instructiontable">
<td class="bitfield"> 0 </td>
<td class="bitfield"> 0xxxx </td>
<td class="bitfield"> 1 </td>
<td class="bitfield"> 00 </td>
<td class="bitfield"> 1 </td>
<td class="iformname">Multiply and Accumulate</td>
</tr>
</table>
</div><hr /><h2><a name="sync" id="sync"></a>Synchronization primitives and
Load-Acquire/Store-Release</h2><div class="decode_navigation">
<p>These instructions are under <a href="#dp">Data-processing and miscellaneous
instructions</a>.</p>
</div><div class="regdiagram-32">
<table class="regdiagram">
<thead>
<tr>
<td>31</td>
<td>0</td>
</tr>
</thead>
<tbody>
<tr class="firstrow">
<td colspan="4" class="lr">!= 1111</td>
<td colspan="4" class="lr">0001</td>
<td class="lr">op0</td>
<td colspan="11" class="lr"></td>
<td colspan="2" class="lr">11</td>
<td colspan="2" class="lr"></td>
<td colspan="4" class="lr">1001</td>
<td colspan="4" class="lr"></td>
</tr>
</tbody>
</table>
</div><hr /><hr /><h2><a name="dpmisc" id="dpmisc"></a>Miscellaneous</h2><div
class="decode_navigation">
<p>These instructions are under <a href="#dp">Data-processing and miscellaneous
instructions</a>.</p>
</div><div class="regdiagram-32">
<table class="regdiagram">
<thead>
<tr>
<td>31</td>
<td>30</td>
<td>0</td>
</tr>
</thead>
<tbody>
<tr class="firstrow">
<td colspan="4" class="lr">!= 1111</td>
<td colspan="5" class="lr">00010</td>
<td colspan="2" class="lr">op0</td>
<td colspan="1" class="lr">0</td>
<td colspan="12" class="lr"></td>
<td colspan="1" class="lr">0</td>
<td colspan="3" class="lr">op1</td>
<td colspan="4" class="lr"></td>
</tr>
</tbody>
</table>
</div><div class="instructiontable">
<table class="instructiontable">
<tr>
<th colspan="2">Decode fields</th>
<th rowspan="2"> Instruction details </th>
</tr>
<tr>
<th class="bitfields">op0</th>
<th class="bitfields">op1</th>
</tr>
<tr class="instructiontable">
<td class="bitfield"> 01 </td>
<td class="bitfield"> 010 </td>
<td class="iformname">BXJ</td>
</tr>
<tr class="instructiontable">
<td class="bitfield"> 01 </td>
<td class="bitfield"> 011 </td>
<td class="iformname">BLX (register)</td>
</tr>
</table>
</div><div class="decode_navigation">
<p>These instructions are under <a href="#dp">Data-processing and miscellaneous
instructions</a>.</p>
</div><div class="regdiagram-32">
<table class="regdiagram">
<thead>
<tr>
<td>31</td>
<td>30</td>
<td>0</td>
</tr>
</thead>
<tbody>
<tr class="firstrow">
<td colspan="4" class="lr">!= 1111</td>
<td colspan="3" class="lr">000</td>
<td colspan="2" class="lr">op0</td>
<td colspan="2" class="lr"></td>
<td class="lr">op1</td>
<td colspan="15" class="lr"></td>
<td colspan="1" class="lr">0</td>
<td colspan="4" class="lr"></td>
</tr>
</tbody>
</table>
</div><div class="decode_constraints">
<p> The following constraints also apply to this encoding: op0:op1 != 100 </p>
</div><div class="instructiontable">
<table class="instructiontable">
<tr>
<th colspan="2">Decode fields</th>
<th rowspan="2"> Instruction details </th>
</tr>
<tr>
<th class="bitfields">op0</th>
<th class="bitfields">op1</th>
</tr>
<tr class="instructiontable">
<td class="bitfield"> 0x </td>
<td class="bitfield"> </td>
<td class="iformname"><a href="#intdp3reg_immsh">Integer Data Processing (three register,
immediate shift)</a></td>
</tr>
<tr class="instructiontable">
<td class="bitfield"> 10 </td>
<td class="bitfield"> 1 </td>
<td class="iformname"><a href="#intdp2reg_immsh">Integer Test and Compare (two register,
immediate shift)</a></td>
</tr>
<tr class="instructiontable">
<td class="bitfield"> 11 </td>
<td class="bitfield"> </td>
<td class="iformname"><a href="#logic3reg_immsh">Logical Arithmetic (three register,
immediate shift)</a></td>
</tr>
</table>
</div><hr /><div class="iclass" id="intdp3reg_immsh">
<a name="intdp3reg_immsh" id="intdp3reg_immsh"></a>
<h3 class="iclass">Integer Data Processing (three register, immediate shift)</h3>
<p>These instructions are under <a href="#dpregis">Data-processing register (immediate
shift)</a>.</p>
<div class="regdiagram-32">
<table class="regdiagram">
<thead>
<tr>
<td>31</td>
<td>0</td>
</tr>
</thead>
<tbody>
<tr class="firstrow">
<td colspan="4" class="lr">!= 1111</td>
<td class="l">0</td>
<td>0</td>
<td>0</td>
<td class="r">0</td>
<td colspan="3" class="lr">opc</td>
<td class="lr">S</td>
<td colspan="4" class="lr">Rn</td>
<td colspan="4" class="lr">Rd</td>
<td colspan="5" class="lr">imm5</td>
<td colspan="2" class="lr">type</td>
<td class="lr">0</td>
<td colspan="4" class="lr">Rm</td>
</tr>
<tr class="secondrow">
<td colspan="4" class="droppedname">cond</td>
<td colspan="4"></td>
<td colspan="3"></td>
<td></td>
<td colspan="4"></td>
<td colspan="4"></td>
<td colspan="5"></td>
<td colspan="2"></td>
<td></td>
<td colspan="4"></td>
</tr>
</tbody>
</table>
</div>
<div class="decode_constraints">
<p> The following constraints also apply to this encoding: cond != 1111 && cond !=
1111 </p>
</div>
<div class="instructiontable">
<table class="instructiontable" id="intdp3reg_immsh">
<thead class="instructiontable">
<tr>
<th class="bitfields-heading" rowspan="" colspan="3">Decode fields</th>
<th class="iformname" rowspan="2" colspan=""> Instruction Details </th>
</tr>
<tr>
<th class="bitfields" rowspan="" colspan="">opc</th>
<th class="bitfields" rowspan="" colspan="">S</th>
<th class="bitfields" rowspan="" colspan="">Rn</th>
</tr>
</thead>
<tbody>
<tr>
<td class="bitfield">000</td>
<td class="bitfield"></td>
<td class="bitfield"></td>
<td class="iformname"><a name="AND_r" href="and_r.html" id="AND_r">AND, ANDS
(register)</a></td>
</tr>
<tr>
<td class="bitfield">001</td>
<td class="bitfield"></td>
<td class="bitfield"></td>
<td class="iformname"><a name="EOR_r" href="eor_r.html" id="EOR_r">EOR, EORS
(register)</a></td>
</tr>
</tbody>
</table>
</div>
</div><div class="decode_constraints">
<p> The following constraints also apply to this encoding: op0:op1 != 100 </p>
</div><div class="instructiontable">
<table class="instructiontable">
<tr>
<th colspan="2">Decode fields</th>
<th rowspan="2"> Instruction details </th>
</tr>
<tr>
<th class="bitfields">op0</th>
<th class="bitfields">op1</th>
</tr>
<tr class="instructiontable">
<td class="bitfield"> 0x </td>
<td class="bitfield"> </td>
<td class="iformname"><a href="#intdp3reg_regsh">Integer Data Processing (three register,
register shift)</a></td>
</tr>
<tr class="instructiontable">
<td class="bitfield"> 10 </td>
<td class="bitfield"> 1 </td>
<td class="iformname"><a href="#intdp2reg_regsh">Integer Test and Compare (two register,
register shift)</a></td>
</tr>
</table>
</div><hr /><h2><a name="dpimm" id="dpimm"></a>Data-processing immediate</h2><div
class="decode_navigation">
<p>These instructions are under <a href="#dp">Data-processing and miscellaneous
instructions</a>.</p>
</div><div class="regdiagram-32">
<table class="regdiagram">
<thead>
<tr>
<td>31</td>
<td>0</td>
</tr>
</thead>
<tbody>
<tr class="firstrow">
<td colspan="4" class="lr">!= 1111</td>
<td colspan="3" class="lr">001</td>
<td colspan="2" class="lr">op0</td>
<td colspan="1" class="lr"></td>
<td colspan="2" class="lr">op1</td>
<td colspan="20" class="lr"></td>
</tr>
</tbody>
</table>
</div><div class="instructiontable">
<table class="instructiontable">
<tr>
<th colspan="2">Decode fields</th>
<th rowspan="2"> Instruction details </th>
</tr>
<tr>
<th class="bitfields">op0</th>
<th class="bitfields">op1</th>
</tr>
<tr class="instructiontable">
<td class="bitfield"> 0x </td>
<td class="bitfield"> </td>
<td class="iformname"><a href="#intdp2reg_imm">Integer Data Processing (two register and
immediate)</a></td>
</tr>
</table>
</div><hr /><div class="iclass" id="intdp2reg_imm">
<a name="intdp2reg_imm" id="intdp2reg_imm"></a>
</div><div class="iclass" id="end">
<a name="ldstimm" id="ldstimm"></a>
<h3 class="iclass">Load/Store Word, Unsigned Byte (immediate, literal)</h3>
<div class="regdiagram-32">
<table class="regdiagram">
<thead>
<tr>
<td>31</td>
<td>0</td>
</tr>
</thead>
<tbody>
<tr class="firstrow">
<td colspan="4" class="lr">!= 1111</td>
<td class="l">0</td>
<td>1</td>
<td class="r">0</td>
<td class="lr">P</td>
<td class="lr">U</td>
<td class="lr">o2</td>
<td class="lr">W</td>
<td class="lr">o1</td>
<td colspan="4" class="lr">Rn</td>
<td colspan="4" class="lr">Rt</td>
<td colspan="12" class="lr">imm12</td>
</tr>
<tr class="secondrow">
<td colspan="4" class="droppedname">cond</td>
<td colspan="3"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="4"></td>
<td colspan="4"></td>
<td colspan="12"></td>
</tr>
</tbody>
</table>
</div>
<div class="decode_constraints">
<p> The following constraints also apply to this encoding: cond != 1111 && cond !=
1111 </p>
</div>
<div class="instructiontable">
<table class="instructiontable" id="ldstimm">
<thead class="instructiontable">
<tr>
<th class="bitfields-heading" rowspan="" colspan="4">Decode fields</th>
<th class="iformname" rowspan="2" colspan=""> Instruction Details </th>
</tr>
<tr>
<th class="bitfields" rowspan="" colspan="">P:W</th>
<th class="bitfields" rowspan="" colspan="">o2</th>
<th class="bitfields" rowspan="" colspan="">o1</th>
<th class="bitfields" rowspan="" colspan="">Rn</th>
</tr>
</thead>
<tbody>
<tr>
<td class="bitfield">!= 01</td>
<td class="bitfield">0</td>
<td class="bitfield">1</td>
<td class="bitfield">1111</td>
<td class="iformname"><a name="LDR_l" href="ldr_l.html" id="LDR_l">LDR
(literal)</a></td>
</tr>
<tr>
<td class="bitfield">!= 01</td>
<td class="bitfield">1</td>
<td class="bitfield">1</td>
<td class="bitfield">1111</td>
<td class="iformname"><a name="LDRB_l" href="ldrb_l.html" id="LDRB_l">LDRB
(literal)</a></td>
</tr>
</tbody>
</table>
</div>
</div></body>
</html>
Here's the output using the XPath given above:
<div class="decode_navigation">
<p>These instructions are under the top-level.</p>
</div>
Just to clarify, the output should include all of the divs in the sample HTML, about 400 lines in total.
I've also tried the XPath suggestions I've been given below, but they produced the same results.
Edit: Here's my code:
use strict;
use warnings;
use feature 'say';
use XML::LibXML;
my $encoding_index_file = q(C:\path\to\testfile.html);
my $source_doc = XML::LibXML->load_html(
location => $encoding_index_file,
recover => 1,
suppress_errors => 1,
);
my ($node) = $source_doc->findnodes('//h2[a[#id="start"]]/following-sibling::*[not(preceding-sibling::div[#id="end"])]');
say $node->toString;

Not only does that XPath conform to XPath 1.0, it works correctly in XML::LibXML.
use strict;
use warnings qw( all );
use feature qw( say );
use XML::LibXML qw( );
my $doc = XML::LibXML->new->parse_html_string(<<'__EOS__');
<html>
<h2><a id="start">Foo</a></h2>
<div id="pre1"><img></div>
<div id="pre2"><img></div>
<div id="end"><img></div>
<div id="post1"><img></div>
<div id="post2"><img></div>
</html>
__EOS__
# Select all the siblings of the starting h2 element that follow
# it and don't have <div id="end"/> as a preceding sibling.
for my $node ($doc->findnodes('//h2[a[#id="start"]]/following-sibling::*[not(preceding-sibling::*[self::div[#id="end"]])]')) {
my $name = $node->nodeName;
my $id = $node->getAttribute('id');
say $id ? sprintf("%s#%s", $name, $id) : $name;
}
Output:
div#pre1
div#pre2
div#end
By the way,
//h2[a[#id="start"]]/following-sibling::*[not(preceding-sibling::*[self::div[#id="end"]])]
is a weird way of writing
//h2[a[#id="start"]]/following-sibling::*[not(preceding-sibling::div[#id="end"])]
Maybe you wanted
//h2[a[#id="start"]]/following-sibling::*[not(self::div[#id="end"] or preceding-sibling::div[#id="end"])]
That would produce the following output:
div#pre1
div#pre2

I managed to get to the bottom of what was causing the problem: Every sibling found by the XPath is handled by LibXML as a separate node, so I needed to assign them to an array, not a simple scalar as I was doing. The not-weird XPath suggested by ikegami was also better than the one I was using, as mine was doubling up everything in the output.
Here's the code that produces the correct results:
use strict;
use warnings;
use feature 'say';
use XML::LibXML qw( );
my $encoding_index_file = q(C:\path\to\testfile.html);
my $source_doc = XML::LibXML->load_html(
location => $encoding_index_file,
recover => 1,
suppress_errors => 1,
);
my $contents = "";
my #nodes = $source_doc->findnodes('//h2[a[#id="start"]]/following-sibling::[not(preceding-sibling::div[#id="end"])]');
foreach my $node (#nodes) {
my ($str) = $node->toString;
$contents = $contents . $str;
}
print $contents;

Cannot read the table elements in Protractor

Trying to read the following table.
<div class="well" style="background-color: #fff;">
<table class="table table-bordered table-striped table-condensed">
<tbody><tr>
<td style="width: 20%; vertical-align: middle">
<span class="label label-primary">Field0</span>
</td>
<td>Value0</td>
</tr>
<tr>
<td style="width: 120px;">Field1</td>
<td>Value1</td>
</tr>
<tr>
<td><strong>Field2</strong></td>
<td>Value2</td>
</tr>
</tbody>
</table>
</div>
However, I am stuck when I am trying to get each of the values individually.
"return $$('.well').get(0).all(by.tagName('td')).get(0).getText();"

Odoo Qweb Report

I am creating report in Odoo using qweb template, while I am editing the paper format, I am not getting the desired view.
Here is my code.
<?xml version="1.0" encoding="UTF-8"?>
<openerp>
<data>
<template id="leave_card_report_temp">
<!-- <t t-call="report.html_container">-->
<!-- <t t-foreach="docs" t-as="doc">-->
<t t-call="report.external_layout">
<div class="page" style="width:860px;">
<!--<img t-if="company.logo" t-att-src="'data:image/png;base64,%s' % company.logo" style="max-height:60px;align:left"/>-->
<h3><p style="text-center;">Leave Card</p></h3>
<br/>
<style>
table, th, td {
border: 2px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
<table style="width:860px;font-Size:11px; border:1px solid black;border-collapse:collapse;border-bottom:1px solid white;">
<!-- <t t-foreach="docs" t-as="doc">-->
<!-- <t t-if="o.name">-->
<tr>
<td><strong>Name:</strong></td>
<td>
<!-- <span t-field="doc.name"/>-->
</td>
<td><strong>Designation:</strong></td>
<!-- <td><span t-field="designation"/></td>-->
<td><strong>Department:</strong></td>
<!-- <td><span t-field="department"/></td>-->
<td><strong>Employee Code:</strong></td>
<!-- <td><span t-field="name"/></td>-->
</tr>
<tr>
<td><strong>DOJ(C):</strong></td><td></td>
<td><strong>DOJ(R):</strong></td><td></td>
</tr>
<!-- </t> -->
</table>
<br/>
<br/>
<table cellspacing="1" cellpadding="4" border="3" class = "table table-striped">
<!--<table style="width:860px;font-Size:11px; border:1px solid black;border-collapse:collapse;border-bottom:1px solid white;">-->
<tr>
<th width="70" rowspan="2" >DATE FROM</th>
<th width="70" rowspan="2" >DATE TO</th>
<th width="70" rowspan="2" >No Of Days</th>
<th colspan="3"> CL</th>
<th colspan="4"> EL</th>
<th width="70" rowspan="2">LOP</th>
<th colspan="2">INITIALS</th>
<th width="70" rowspan="2"> REMARKS</th>
</tr>
<tr align="right">
<th width="70">Earned</th>
<th width="70">Availed</th>
<th width="70">Balance</th>
<th width="70">Earned</th>
<th width="70">Availed</th>
<th width="70">Balance</th>
<th width="70">Encashment</th>
<th width="70">Reporting Officer</th>
<th width="70">Reviewing Officer</th>
</tr>
<tbody>
<t t-foreach = "docs" t-as = "doc">
<tr>
<td><span t-field="doc.date_from"/></td>
<td><span t-field="doc.date_to"/></td>
<td><span t-field="doc.no_of_days"/></td>
<td><span t-field = "doc.earned_cl"/></td>
<td><span t-field = "doc.availed_cl"/></td>
<td><span t-field = "doc.balance_cl"/></td>
<td><span t-field = "doc.earned_el"/></td>
<td><span t-field = "doc.availed_el"/></td>
<td><span t-field = "doc.balance_el"/></td>
<td><span t-field = "doc.encash"/></td>
<td><span t-field = "doc.loss_of_pay"/></td>
<td><span t-field = "doc.reporting_officer"/></td>
<td><span t-field = "doc.reviewing_officer"/></td>
<td><span t-field = "doc.remark"/></td>
</tr>
</t>
</tbody>
</table>
</div>
</t>
<!-- </t>-->
<!-- </t>-->
</template>
<template id="leave_card_view">
<t t-call="report.html_container">
<t t-foreach="doc_ids" t-as="doc_id">
<t t-raw="translate_doc(doc_id, doc_model, 'leaves_management.leave_card_report_temp')"/>
</t>
</t>
</template>
</data>
</openerp>
My problem is, When I try to print a report, I am getting multiple documents. In my first table, if I assign the value doc.name, its create problem
I like to have multiple records in my second table but in the case of my first it should display ones.

First You should put the docs object in global ones in whole the template ran-daring in QWeb Report like this..
<template id="leave_card_report_temp">
<t t-call="report.html_container">
<t t-foreach="docs" t-as="doc">
And access the doc in multiple table in ODOO
<table>
<tr>
<td>
<t t-if="doc.name>
<span t-field="doc.name"/>
</t>
</td>
</tr>
</table>
<table>
<tr>
<td>
<t-if="doc.date_from">
<span t-field="doc.date_from"/>
</t>
</td>
<td>
<t-if="doc.date_to">
<span t-field="doc.date_to"/>
</t>
</td>
<td>
<t-if="doc.no_of_days">
<span t-field="doc.no_of_days"/>
</t>
</td>
</tr>
</table>
</t>
</t>
</template>
This may helpful for you

Jquery parent child selectors

I have the html structure below and I'm trying to select the row containing the text 'Related list item:'.
My Jquery is below:
$('#WebPartWPQ3 > table(eq:2) > tbody > tr > td > table > tbody > tr:last').remove();
but not working...
<DIV id="WebPartWPQ3" fixed_bound allowDelete="false" OnlyForMePart="true" HasPers="true" WebPartID="00000000-0000-0000-0000-000000000000" width="100%">
<TABLE cellSpacing="0" cellPadding="4" width="100%" border="0" fixed_bound xmlns:ddwrt2="urn:frontpage:internal" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:dsp="http://schemas.microsoft.com/sharepoint/dsp" xmlns:x="http://www.w3.org/2001/XMLSchema">
<TBODY fixed_bound>
<TR fixed_bound>
<TD class="ms-vb" fixed_bound>
</TD>
</TR>
</TBODY>
</TABLE>
<TABLE width="100%" border="0" fixed_bound xmlns:ddwrt2="urn:frontpage:internal" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:dsp="http://schemas.microsoft.com/sharepoint/dsp" xmlns:x="http://www.w3.org/2001/XMLSchema">
<TBODY fixed_bound>
<TR fixed_bound>
<TD fixed_bound>
<TABLE cellSpacing="0" width="100%" border="0" fixed_bound>
<TBODY fixed_bound>
<TR fixed_bound>
<TD class="ms-formlabel" vAlign="top" noWrap width="25%" fixed_bound>
<B fixed_bound>Title:
</B>
</TD>
<TD class="ms-formbody" vAlign="top" width="75%" fixed_bound>Employee annual leave approval
<BR fixed_bound/>
<BR fixed_bound/>
</TD>
</TR>
<TR fixed_bound>
<TD class="ms-formlabel" width="25%" fixed_bound>
<B fixed_bound>Approved Carry Forward days
<SPAN class="ms-formvalidation" fixed_bound> *
</SPAN>:
</B>
</TD>
<TD class="ms-formbody" width="75%" fixed_bound>
<SPAN fixed_bound>
<INPUT class="ms-input" id="ctl00_PlaceHolderMain_TaskForm_ff1_1_ctl00_ctl00_TextField" title="Approved Carry Forward days" style="IME-MODE: inactive" size="11" name="ctl00$PlaceHolderMain$TaskForm$ff1_1$ctl00$ctl00$TextField" fixed_bound value=""/>
<BR fixed_bound/>
</SPAN>
</TD>
</TR>
<TR fixed_bound>
<TD class="ms-formlabel" width="25%" fixed_bound>
<B fixed_bound>Review Comments:
</B>
</TD>
<TD class="ms-formbody" width="75%" fixed_bound>
<SPAN fixed_bound>
<TEXTAREA class="ms-long" id="ctl00_PlaceHolderMain_TaskForm_ff2_1_ctl00_ctl00_TextField" title="Review Comments" name="ctl00$PlaceHolderMain$TaskForm$ff2_1$ctl00$ctl00$TextField" rows="5" fixed_bound>
</TEXTAREA>
<BR fixed_bound/>
</SPAN>
</TD>
</TR>
<TR fixed_bound>
<TD class="ms-formlabel" vAlign="top" noWrap width="25%" fixed_bound>
<B fixed_bound>Related list item:
</B>
</TD>
<TD class="ms-formbody" vAlign="top" width="75%" fixed_bound>
<A href="http://orange.extra.net/people/hr/Workflows/Expire%20the%20employee%20year%20in%20a%20year/" fixed_bound>
</A>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
<TABLE cellSpacing="0" cellPadding="4" width="100%" border="0" fixed_bound xmlns:ddwrt2="urn:frontpage:internal" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:dsp="http://schemas.microsoft.com/sharepoint/dsp" xmlns:x="http://www.w3.org/2001/XMLSchema">
<TBODY fixed_bound>
<TR fixed_bound>
<TD class="ms-vb" noWrap fixed_bound>
<INPUT style="DISPLAY: none" onclick="javascript: __doPostBack('ctl00$PlaceHolderMain$TaskForm','__update;__commit;__redirectsource;__redirectToList={};')" type="button" name="btnSave" fixed_bound jQuery1291028280448="3" value="Save Draft"/>
</TD>
<TD fixed_bound>
<INPUT onclick="javascript: __doPostBack('ctl00$PlaceHolderMain$TaskForm','__update;__workflowTaskComplete={0*};__commit;__redirectsource;__redirectToList={};')" type="button" name="btnMarkSubmited" fixed_bound value="Complete Task"/>
</TD>
<TD class="ms-vb" noWrap width="99%" fixed_bound>
<INPUT onclick="javascript: __doPostBack('ctl00$PlaceHolderMain$TaskForm','__cancel;__redirectsource;__redirectToList={};')" type="button" name="btnCancel" fixed_bound value="Cancel"/>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>

$('.ms-formlabel').last().children().remove();

I prefer to give an id to the tr and remove the tr by id.
$('#trid').remove();

$('#WebPartWPQ3').find('Related list item').closest('tr').remove();