I am creating a pdf file using snappy1.4,
I want create 2 pages ,each of them divided in 2 parts (vertically),
I have created them: when they are empty its ok but when I fill for example a part1 with some data the part2 is shifted down.
How can I fix the 4 parts in a way that they still fixed (in hight) if they are empty or some of them filled
example1 with empty data (ok):
shifted pdf:
My code:
return new Response(
$this->get('knp_snappy.pdf')->getOutputFromHtml($html,array(
'orientation'=>'Landscape',
'default-header'=>null,
// 'custom-header' =>false,
//'page-size' =>'A4',
// 'no-custom-header-propagation'=>false,
'encoding' => 'utf-8',
'images' => true,
'enable-javascript' => true,
'margin-right' => 1,
'margin-left' =>2,
'margin-top' =>0,
'margin-bottom' =>0,
'javascript-delay' => 5000
)),
200,
array(
'Content-Type' => 'application/pdf',
'Content-Disposition' => 'attachment; filename="file1.pdf"'
)
);
my twig:
<body>
<div style=" padding-left:3em;margin-top: 10px;display:inline-block;height: 0.3in ">
<div style="width:35px;display:inline-block;vertical-align: middle;height: 0.3in"><img style="width:35px " src="{{ absolute_url(asset('images/visa.png' ))}} " id="imgtun"></div>
</div>
<div style=" padding-left:20em;margin-top: 10px;display:inline-block;height: 0.3in">
<div style="width:35px;display:inline-block;vertical-align: middle;height: 0.3in"><img style="width:35px " src="{{ absolute_url(asset('images/visa.png' ))}} " id="imgcenter"></div>
<div style=" display:inline-block;font-size: 20px; font-weight: bold;vertical-align: middle; text-align: center;height: 0.3in">
<span style="text-align: center">My file with 4 parts </span></div>
</div>
<div id="Page1" style="width: 100%; height: 7.8in">
<div id="Partie_presentation" style="display:inline-block;height: 7.8in; width: 30%">
<div style="height:0.3in" id="header_presentation">
<p style="height:25px;background-color:darkseagreen;font-weight: bold;font-size: 20px">
Part1</p>
</div>
<div style="height: 7.5in" id="partie_presentation" >
<div style="height:1.8in">
<p>
<span class="detailtitre" style="font-weight: bold">Adress :</span>
<span class="detailcont">My adress</span>
</p>
<p>
<span class="detailtitre" style="font-weight: bold">Tél :</span>
<span class="detailcont">3389652368</span>
</p>
<p>
<span class="detailtitre" style="font-weight: bold">E-mail :</span>
<span class="detailcont">email#gmail.com</span>
</p>
<p>
<span class="detailtitre" style="font-weight: bold">Website :</span>
<span class="detailcont">my webste</span>
</p>
</div>
</div>
</div>
<div id="Part2"style="height: 7.8in; display:inline-block;width: 69%">
<div style="height:0.3in" id="entete_res">
<p style="height:25px;background-color:darkseagreen;font-weight: bold;font-size: 20px">
Part2</p>
</div>
<div style="height: 7.5in" id="partie_res" >
<div id="partie_budget" style="height: 3.8in">
</div>
<div id="partie_pers" style="height: 4in">
</div>
</div>
</div>
</div>{#end page1#}
<div id="Page2" style="width: 100%; height: 8.1in">
{# partie_ac #}
<div id="Part3" style=" margin-top:2px;display:inline-block;height: 8.1in; width: 49%">
<div style="height: 0.3in">
<p style="height:19px;background-color:darkseagreen;font-weight: bold;font-size: 19px">
Part3</p>
</div>
<div style="height: 7.8in" id="partie_ac" >
</div>
</div>
{# partie_per #}
<div id="Part4" style="display:inline-block;height: 8.1in; width: 50%">
<div style="height: 0.3in">
<p style="height:19px;background-color:darkseagreen;font-weight: bold;font-size: 19px">
Part4</p>
</div>
<div style="height: 7.8in" id="partie_per" >
</div>
</div>
</div>
</body>
This is a CSS problem. Here's one way to fix it:
#Partie_presentation {
float: left;
}
#Part2 {
float: right; /* or left */
}
See JSFiddle
If it's possible in your case (I don't know how Snappy works), move the CSS styles to a <style> tag or to a separate CSS file. Now you are using inline styles so the HTML is very messy.
Related
Created a swipe with thumbs. When I click on thumbs, it scrolls to the right with incomprehensible logic. I cannot understand what this may be connected with, I am trying to solve this problem for the second day, nothing comes out. Is it possible to somehow disable this option so that you can remove this scroll when clicked?
const productThumbs = new Swiper(".swiper-thumbs", {
spaceBetween: 30,
loop: true,
slidesPerView: 6,
loopedSlides: 7,
});
const productCarousel = new Swiper(".swiper-content", {
effect: 'fade',
fadeEffect: {
crossFade: true
},
touchRatio: 0,
thumbs: {
swiper: productThumbs,
}
});
.swiper-slide{
background: gray;
}
.swiper-thumbs .swiper-slide{
height: 300px;
}
.swiper-content{
margin-top: 30px;
}
.swiper-thumbs .swiper-slide{
display: flex;
flex-direction: column;
}
.swiper-content .swiper-slide{
height: 250px;
background: black;
color: white;
font-size: 72px;
}
<link href="https://unpkg.com/swiper/swiper-bundle.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<div class="swiper-container swiper-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide">
<span class="slider-title">01</span>
<img src='https://i.ibb.co/Tq5Hvp8/1.png'>
<span class="slider-desc">Windows Server</span>
</div>
<div class="swiper-slide">
<span class="slider-title">02</span>
<img src='https://i.ibb.co/Tq5Hvp8/1.png'>
<span class="slider-desc">Windows Server</span>
</div>
<div class="swiper-slide">
<span class="slider-title">03</span>
<img src='https://i.ibb.co/Tq5Hvp8/1.png'>
<span class="slider-desc">Windows Server</span>
</div>
<div class="swiper-slide">
<span class="slider-title">04</span>
<img src='https://i.ibb.co/Tq5Hvp8/1.png'>
<span class="slider-desc">Windows Server</span>
</div>
<div class="swiper-slide">
<span class="slider-title">05</span>
<img src='https://i.ibb.co/Tq5Hvp8/1.png'>
<span class="slider-desc">Windows Server</span>
</div>
<div class="swiper-slide">
<span class="slider-title">06</span>
<img src='https://i.ibb.co/Tq5Hvp8/1.png'>
<span class="slider-desc">Windows Server</span>
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div class="swiper-container swiper-content">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
</div>
</div>
I tried to do this, but I just simply do not understand why this is happening
In the "thumbs" slider, you need to change the value "loop" to "false" or remove the key "loop" from "thumbs" slider.
I am new to Yii2. What I am working now is generating PDF with some widget like html2pdf and mpdf. I have my HTML and CSS code very well displayed in IE (client's requirement), shown as below picture.
HTML and CSS displayed in IE Browser
When I generate the PDF file, it was a mess.
Generated PDF File using html2pdf
I was assigning full HTML content into a variable like this in my controller.
public function actionReport()
{
$username = Yii::$app->user->identity->username;
$html = <<<HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
#bop_event{
border:outset thin black;
padding: 1% 1% 1% 1%;
width: 18cm;
height: 29.7cm;
}
#logo{
//border:outset thin black;
display: block;
}
.logo,.hidden_logo{
display:inline-block;
width:32%;
padding:1% 1% 1% 1%;
// border: outset thin red;
}
.hidden_logo{
visibility:hidden;
}
#bop_title{
border:outset thin black;
padding:5px 5px 5px 5px;
text-align:center;
margin-bottom:1%;
}
#bop_desc{
border:outset thin black;
padding:5px 5px 5px 5px;
font-size:1.2em;
margin-bottom:3%;
}
.subcontent_area{
margin-bottom:3%;
}
.subcontent_title,#signature{
font-size:1.2em;
font-weight:bold;
}
.field{
display: inline-block;
font-size:1em;
width:30%;
border:outset thin black;
margin-bottom:1%;
//margin-right:1%;
}
.field_title{
font-weight:bold;
border-bottom: outset thin;
padding-left:2%;
}
.field_data{
padding-left:2%;
}
.hidden_field{
visibility:hidden;
display:inline-block;
width:30%;
}
#place_sign{
text-align:center;
/*width:31%;*/
}
.sign,.hidden_sign{
display:inline-block;
/*width:28%;*/
text-align:center;
// border: outset thin red;
}
.person{
/*margin-top:27%;*/
width:relative;
// border: outset thin black;
}
.hidden_sign{
visibility:hidden;
}
</style>
</head>
<body>
<div id="bop_event">
<div id="logo">
<div class="logo" >
<img src="images\rpt_axa_logo_left_bg.png" align="left" />
</div>
<div class="hidden_logo" ></div>
<div class="logo" >
<img src="images\rpt_mandiri_axa_logo_right_bg.png" align="right" />
</div>
</div>
<div id="bop_title">
<h1><b>BOP Event Proposal</b></h1>
</div>
<div id="bop_desc">
Dengan ini saya yang bertanda tangan di bawah ini mengajukan permohonan untuk penggantian biaya BOP yang akan diselenggarakan dengan detil sebagai berikut.
</div>
<div id="konten">
<div id="event_budget" class='subcontent_area'>
<div class="subcontent_title">
Detil Event dan Budget
</div>
<div class="field">
<div class="field_title">Tanggal BOP</div>
<div class="field_data">31 Maret 2017</div>
</div>
<div class="field">
<div class="field_title">Jenis BOP</div>
<div class="field_data">Reguler BOP</div>
</div>
<div class="field">
<div class="field_title">Total Biaya</div>
<div class="field_data">Rp3.000.000,-</div>
</div>
<div class="field">
<div class="field_title">Kota</div>
<div class="field_data">Jakarta</div>
</div>
<!--<div class="field">
<div class="field_title">Tempat Pelaksanaan</div>
<div class="field_data">AXA Tower</div>
</div>-->
</div>
<div id="speaker_pic" class='subcontent_area'>
<div class="subcontent_title">
Pembicara dan PIC
</div>
<div class="field">
<div class="field_title">Pembicara</div>
<div class="field_data">Eksternal</div>
</div>
<div class="field">
<div class="field_title">Nama Pembicara</div>
<div class="field_data">Indra Gunawan</div>
</div>
<div class="field">
<div class="field_title">Keterangan</div>
<div class="field_data">tess</div>
</div>
<div class="field">
<div class="field_title">PIC Management</div>
<div class="field_data">Rainaldy</div>
</div>
<div class="field">
<div class="field_title">No HP PIC</div>
<div class="field_data">08112223456</div>
</div>
<div class="hidden_field">
<div class="field_title">-</div>
<div class="field_data">-</div>
</div>
<div class="field">
<div class="field_title">PIC Agency</div>
<div class="field_data">Imam Hidayat</div>
</div>
<div class="field">
<div class="field_title">No HP PIC</div>
<div class="field_data">08112223456</div>
</div>
</div>
<div id="comitment_plan" class='subcontent_area'>
<div class="subcontent_title">
Komitment/Plan
</div>
<div class="field">
<div class="field_title">Total Peserta BOP</div>
<div class="field_data">50</div>
</div>
<div class="field">
<div class="field_title">Total Agent Code</div>
<div class="field_data">30</div>
</div>
<div class="field">
<div class="field_title">Total NR</div>
<div class="field_data">25</div>
</div>
</div>
</div>
<div id="signature">
<div id="place_sign">Kota, <?php date_default_timezone_set('Asia/Jakarta'); echo date('d M Y');?>
</div>
<div id="sign_area">
<div class="sign">
<div>Proposed By</div>
<div class="person">$username</div>
</div>
<div class="hidden_sign"></div>
<div class="sign">
<div>Approved By</div>
<div class="person">()</div>
</div>
</div>
</div>
</div>
</body>
</html>
HTML;
return Yii::$app->html2pdf->convert($html)->saveAs('output.pdf');
}
.field is the class which contains the box.
Anyone has ever got this issue?
Thanks for your help.
I've got my stacked progress bars looking nice, with percentage labels on each, but I'm not sure how to solve when a percentage causes the bar to be too small for the label.
Setting a min-width works for non-stacked progress bars, but breaks stacked ones.
How can I fix this without hacking up bootstrap too much?
Example fiddle: http://jsfiddle.net/nimh/kx7hvxyz/
<div class="container-fluid">
<div class="row-fluid">
<div class="panel panel-default max-width">
<div class="panel-body">
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 89.74%">
<div class="text-left">+89.74%</div>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10.26%">
<div class="text-right">-10.26%</div>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 10.26%">
<div class="text-left">+10.26%</div>
</div>
<div class="progress-bar progress-bar-danger" style="width: 89.74%">
<div class="text-right">-89.74%</div>
</div>
</div>
</div>
</div>
</div>
Had a night to think about it and realized i can add a max-width percentage, as well as a min-width percentage, to keep stacked progress bars at least wide enough to show a label on both.
.progress-bar {
min-width: 15%;
max-width: 85%;
}
http://jsfiddle.net/nimh/kx7hvxyz/8/
It's not perfect (may look funny with a 99% and 1%), but will work for showing a label at all times for our needs.
How about playing with the line-height and font-size?
[1]: http://www.bootply.com/Tq7YbaeOX5
/* CSS used here will be applied after bootstrap.css */
.max-width {
max-width: 25em;
}
/* .progress-bar {
min-width: 4em;
} */
.progress-bar {
padding: 4px;
line-height: 12px;
}
.text-Left {
font-size: 12px;
float: left;
}
.text-left, .text-right {
font-size: 7px;
padding-right:5px;
}
.text_Right {
float: right;
}
<div class="container-fluid">
<div class="row-fluid">
<div class="panel panel-default max-width">
<div class="panel-body">
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 89.74%">
<div class="text-Left">+89.74%</div>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10.26%">
<div class="text-right">-10.26%</div>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 10.26%">
<div class="text-left">+10.26%</div>
</div>
<div class="progress-bar progress-bar-danger" style="width: 89.74%">
<div class="text_Right">-89.74%</div>
</div>
</div>
</div>
</div>
</div>
</div>
I am using the following code, in order to display a Menu with the right click (In Selenium context menu).
# encoding: utf-8
require 'watir-webdriver'
b = Watir::Browser.new
b.goto 'localhost:8080/swbadmin'
b.text_field(:name => 'wb_username').set 'admin'
b.text_field(:name => 'wb_password').set 'webbuilder'
b.button(:text => 'Login').click
a = b.div(:class => 'dijitTreeNodeContainer').div(:class => 'dijitTreeIsRoot').div(:class => 'dijitTreeRow').span(:class => 'dijitTreeContent')
c= a.span(:text => 'tst')
c.right_click
The thing is that dijitTreeNodeContainer is made by a dojo. So i have to wait until it loads all the information, I tried to use Watir::wait.until{ span(:text => 'tst').visible ?} but it dindn't work.
With this code without the line
c= a.span(:text => 'tst')
and with c.click, I'm able to click the default TreeContent, but when I try with right click or double_click, it throws an exception ( ..cannot preform native interactions...)
This is the html code
<div id="dijit_layout_AccordionPane_0" class="dijitContentPane dijitAccordionContainer-child dijitAccordionContainer-dijitContentPane dijitContentPaneSingleChild" selected="true" dojotype="dijit.layout.AccordionPane" widgetid="dijit_layout_AccordionPane_0" title="" style="width: 238px; height: 76.5px;">
<div url="/swbadmin/jsp/Tree.jsp?id=mtree" jsid="mtreeStore" dojotype="dojo.data.ItemFileWriteStore"></div>
<div childrenattrs="children" rootid="root" store="mtreeStore" jsid="mtreeModel" dojotype="dijit.tree.ForestStoreModel"></div>
<div id="mtree" class="dojoDndSource dojoDndTarget dojoDndContainer dijitTree" role="presentation" widgetid="mtree" tabindex="0" _dijitmenumtreemenu="1" style="width: 238px; height: 76.5px;">
<div class="dijitInline dijitTreeIndent" data-dojo-attach-point="indentDetector" style="position: absolute; top: -9999px"></div>
<div class="dijitTreeExpando dijitTreeExpandoLoading" data-dojo-attach-point="rootLoadingIndicator" style="display: none;"></div>
<div class="dijitTreeContainer" role="presentation" data-dojo-attach-point="containerNode" style="width: 100%;">
<div id="dijit__TreeNode_0" class="dijitTreeIsRoot dijitTreeNode dijitTreeNodeLoaded dijitLoaded" role="presentation" style="background-position: 0px 0px;" widgetid="dijit__TreeNode_0">
<div class="dijitTreeRow" role="presentation" data-dojo-attach-point="rowNode" style="padding-left: 0px; display: none;">
<div class="dijitTreeNodeContainer" style="height: auto;" role="tree" data-dojo-attach-point="containerNode" aria-expanded="true" aria-multiselectable="true">
<div id="dijit__TreeNode_3" class="dijitTreeIsRoot dijitTreeNode dijitTreeNodeNotLoaded dijitNotLoaded" role="presentation" style="background-position: 0px 0px;" widgetid="dijit__TreeNode_3">
<div class="dijitTreeRow dijitTreeRowSelected" role="presentation" data-dojo-attach-point="rowNode" title="" style="padding-left: 0px;">
<span class="dijitInline dijitTreeExpando dijitTreeExpandoClosed" role="presentation" data-dojo-attach-point="expandoNode"></span>
<span class="dijitExpandoText" role="presentation" data-dojo-attach-point="expandoNodeText">+</span>
<span class="dijitTreeContent" role="presentation" data-dojo-attach-point="contentNode">
<span class="dijitInline dijitIcon dijitTreeIcon swbIconWebSite" data-dojo-attach-point="iconNode" role="presentation"></span>
<span class="dijitTreeLabel" aria-selected="true" tabindex="-1" role="treeitem" data-dojo-attach-point="labelNode,focusNode" aria-expanded="false">Demo</span>
</span>
</div>
<div class="dijitTreeNodeContainer" style="display: none;" role="presentation" data-dojo-attach-point="containerNode"></div>
</div>
<div id="dijit__TreeNode_4" class="dijitTreeIsRoot dijitTreeNode dijitTreeNodeLoaded dijitLoaded" role="presentation" style="background-position: 0px 0px;" widgetid="dijit__TreeNode_4">
<div class="dijitTreeRow" role="presentation" data-dojo-attach-point="rowNode" title="" style="padding-left: 0px;">
<span class="dijitInline dijitTreeExpando dijitTreeExpandoClosed" role="presentation" data-dojo-attach-point="expandoNode"></span>
<span class="dijitExpandoText" role="presentation" data-dojo-attach-point="expandoNodeText">+</span>
<span class="dijitTreeContent" role="presentation" data-dojo-attach-point="contentNode">
<span class="dijitInline dijitIcon dijitTreeIcon swbIconWebSiteU" data-dojo-attach-point="iconNode" role="presentation"></span>
<span class="dijitTreeLabel" aria-selected="false" tabindex="-1" role="treeitem" data-dojo-attach-point="labelNode,focusNode" aria-expanded="false">tst</span>
</span>
</div>
<div class="dijitTreeNodeContainer" style="height: auto; display: none;" role="group" data-dojo-attach-point="containerNode">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You didn't mention which browser you're using - is it Firefox on Windows? In that case try spawning Chrome instead:
b = Watir::Browser.new :chrome
If you have to stick with Firefox, try disabling native events.
profile = Selenium::WebDriver::Firefox::Profile.new
profile.native_events = false
b = Watir::Browser.new :firefox, :profile => profile
I want to extract some textual data from a HTML page programatically. I am using vb.net 2008 webbrowser controls to programatically capturing that data. The HTML code of the webpage is given below
<div id="main-div"> <div id="top_header"> <div style="height: 85px;"> <div style="float: left; width: 400px; height: 80px;"><img src="cc/elance.png" width="318" height="80">1</div> <div style="float: left;"> <div class="trebuchet-23"><img src="images/logo.png"></div> <div style="height: 20px; padding-left: 315px;"> <div class="arial-12-left">Sitemap</div> <div class="arial-12-left">-</div> <div class="arial-12-left">Location</div> </div> </div> </div> </div> <div id="menu-div"> <div id="menu-left"></div> <div id="menu-middle"> <div id="menu-inside"> <div id="menu-ov">Home</div> <div class="menu-line"></div> <div id="menu-bt">About Us</div> <div class="menu-line"></div> <div id="menu-bt">Member Login </div> <div class="menu-line"></div> <div id="menu-bt">Contractors</div> <div class="menu-line"></div> <div id="menu-bt">Contact</div> </div> <div id="search-bg"> </div> </div> <div id="menu-right"></div> </div> <div style="margin-bottom: 20px;"><img src="images/banner.jpg" width="890" height="336"></div> <div id="inside-div"> <div id="about-div"> <div id="about-left"></div> <div id="about-middle"> <div class="heading-div"> <div class="white-20">Welcom To</div> <div class="red-20"><img src="cc/elance.png" width="398" height="81"></div> </div> <div class="myriad-22"></div> <div style="height: 220px;"> <div style="float: left; margin-right: 10px;"> <font color="#ffffff" size="+2">Assignment Report</font><br><font color="#ffffff">Assignment No.1</font><br><font color="#ffffff">Total Posts 341</font><br><hr>
***<font color="#ffffff">Pin Code = HF5O6</font><br><font color="#ffffff">TITLE = Xbox 360 with 20GB HDD + 2 wireless controllers + 8 Games + Wireless Headset + Guitar in Eastry</font><br><font color="#ffffff">DATE = 09/08/2012</font><br><font color="#ffffff">Tracking Key = 85265E712050-15152226115354753</font><br>***
<form name="form1" method="post" action="/dflogin.php"><input name="txtId" value="E712050-15" type="hidden"><input name="txtassId" value="1" type="hidden"><input name="txtPsw" value="HH29" type="hidden"><input name="txtLog" value="0" type="hidden"><hr><font color="#ffffff">*Please copy tracking key exact as it is. We track your report through this key.</font><br><h6 align="right"><input name="btnSub" value="Next" style="background-color: rgb(0, 153, 0); color: rgb(255, 255, 255);" type="SUBMIT"></h6></form> </div> <div style="float: left;"> <div class="Tre-13-gray" style="width: 280px;"></div> <div class="bt-read2"></div> </div> </div> </div> <div id="about-right"></div> </div> </div> <div id="footer-div"> <div id="footer-left"></div> <div id="footer-middle"> <!--<div style="float:left; padding-top:35px; margin-right:15px;"> <div class="white-20">Contact</div> <div class="red-20">us</div> </div>--> <div style="float: left; padding-top: 15px;"> <div style="height: 30px;"> <!--<div class="Tre-13-red2" style="width:120px;">Mailing address:</div> <div class="Tre-13-gray2" style="width:400px;">admin#eoprojects.com</div>--> </div> <!-- <div class="Tre-13-gray3">General Pricing and Service information:<br /> </div> <div class="Tre-13-red2" style="width:255px;">General Operations Director/ Sales:</div> <div class="Tre-13-gray2" style="width:300px;">eoprojects.com</div>--> </div> <div style="float: left; padding-left: 312px;"> <div style="height: 69px; width: 90px;"> <div style="float: left; padding-top: 20px; padding-right: 15px;"><img src="images/icon_f.png" width="34" height="35"></div> <div style="float: left; padding-top: 20px;"><img src="images/icon_t.png" width="34" height="35"></div> </div> <div class="arial-11">© 2010 All Copyrights Reserved</div> </div> </div> <div id="footer-right">1</div> </div> </div>
The line starting with stars is that line which I want to extract from the following code.
Can any one plz tell me what code I should write to extract that ?
Thanks in advance.
You need to parse the HTML. There's a free tool called HtmlAgilityPack in .NET designed specially to do this for you. Something like the following should work (this assumes you have a variable rawHtml which stores your HTML code):
Dim parsedHtml As New HtmlDocument()
parsedHtml.Load(rawHtml)
Dim fontNode As HtmlNode = parsedHtml.DocumentNode.Descendants("/font")
The sample code below extracts the IP address from a website.
Option Explicit
' Add Microsoft Internet Transfer Control
Dim pubIPA As String, pos1 As Long, pos2 As Long, str As String
Private Sub Form_Load()
str = Inet1.OpenURL("http://api.externalip.net/ip/", icString)
pos1 = InStr(str, "var ip =")
pos1 = InStr(pos1 + 1, str, "'", vbTextCompare) + 1
pos2 = InStr(pos1 + 1, str, "'", vbTextCompare)
pubIPA = Mid$(str, pos1, pos2 - pos1)
MsgBox pubIPA, vbInformation
Unload Me
End Sub