Following is my html content which i want to show in the webview using android sdk. It will displays only
//Please
But when I put this HTML content into the browser then it shows differently.
<br /><br />Read the handouts please for tomorrow.<br /><br /><!--homework help homework
help help with homework homework assignments elementary school high school middle school
// --><font color="#60c000" size="4"><strong>Please!</strong></font>
Please suggest how to resolve this problem
I have another problem that in HTML content there is a tag
<img src="http://www.homeworknow.com/hwnow/upload/images/tn_star300.gif" border="0" />
in this images does not shows.
Use web.loadDataWithBaseURL instead of web.loadData (And don't forget to escape strings where it's needed)
You need to add internet permission to download images and view them in your manifest file.
This example works for me:
public class SimpleMusicStream extends Activity {
#Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
WebView wv = (WebView) findViewById(R.id.WebView01);
final String mimeType = "text/html";
final String encoding = "UTF-8";
String html = "<br /><br />Read the handouts please for tomorrow.<br /><br /><!--homework help homework" +
"help help with homework homework assignments elementary school high school middle school" +
"// --><font color='#60c000' size='4'><strong>Please!</strong></font>" +
"<img src='http://www.homeworknow.com/hwnow/upload/images/tn_star300.gif' />";
wv.loadDataWithBaseURL("", html, mimeType, encoding, "");
}
}
And don't forget to add:
<uses-permission android:name="android.permission.INTERNET"></uses-permission>
in your AndroidManifest.xml file
Either you can do it as above or put html file into the asset folder and the use it loke this to display it
view.loadUrl("file:///android_asset/FILENAME.html");
for image display you can do it like
String str= " img src=\"http://www.homeworknow.com/hwnow/upload/images/tn_star300.gif\" alt=\"this is img\"ALIGN=\"right\"/>";
wv.loadData(str, "text/html", "utf-8");
Related
My app is a blazor Web assembly hosted app.
I created a component, DisplayReport, which can access to the server project, and get an HTML which is displayed by the component.
Here is the razor page of the component:
#inject HttpClient HttpClient
<div style="#Style" class="#Class">
#HTMLText
</div>
Here is the method which calls the server:
protected override async Task OnParametersSetAsync()
{
if (!IsSet && Speciality != null)
{
IsSet = true;
IsLoading = true;
Dashboard.Refresh();
URL = $"?%2fSSRS%2f{Report}&rc:Section={Section}&rs:Command=Embed&rs:Format=MHTML&HospitalParam={{{Speciality.Service.Site.Hospital.Id.ToString().ToUpper()}}}&SiteParam={{{Speciality.Service.Site.Id.ToString().ToUpper()}}}&ServiceParam={{{Speciality.Service.Id.ToString().ToUpper()}}}&SpecialityParam={{{Speciality.Id.ToString().ToUpper()}}}&Cohort={Cohort}";
HttpResponseMessage response = await HttpClient.PostAsJsonAsync("Dashboard/GetReport", URL);
if (response.IsSuccessStatusCode)
{
byte[] byteArray = response.Content.ReadAsByteArrayAsync().Result;
string result_string = Encoding.UTF8.GetString(byteArray, 0, byteArray.Length);
HTMLText = (MarkupString)result_string;
}
IsLoading = false;
if (!IsLoaded)
Dashboard.NumberDisplayReportsLoaded += 1;
IsLoaded = true;
Dashboard.Refresh();
}
}
No need to expplain it a lot, it does a POST Http request, and stores the HTML in the variable HTMLText, as a MarkupString.
There are in the main razor page a lot of DisplayReports, which display the HTML got from SSRS(the calls to SSRS are performed by the controller in the server, method GetReport).
Individually, each DisplayReport is displayed right, but I noticed that when they are all in the page, there is bugs in the display, like this:
The blue color is added when an other DisplayReport is displayed: with the second DisplayReport(DR) there is the bug, without there isn't.
Many reports are in the same case: there are bugs in the display when an other is displayed.
I made some tests, and saw that if the other DR is only loaded but not displayed(with Style="display:none"), the bug remains. When the first DR, the one that has bugs, is in the first in the page, the problem remains(it seems independant of the order).
Here is an other bug in an other DR(same problem):
The world 'TRANSFUSION' should be like 'PRATIQUES POST-OPERATOIRES'.
Here is the DR tag, for the GHM table:
<DisplayReport Dashboard="this" #ref="SyntheseGHM" Report="GHM" Section="1" Speciality="#LocalizationBanner.SelectedSpeciality" Cohort="#Tools.Snapshot" Style="width: 640px; height: 600px"/>
There are 24 DR loaded at the same time, but obviously each DR has its own HTMLText.
I can't see why there are such issues.
thank you.
EDIT
Here is the HTMLText value of a DR:
'<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
>\n<html>\r\n<head><title>KPIs</title>\r\n<META http-equiv="Content-Type" content="text/html; charset=utf-8"/><META http-equiv="Content-Style-Type" content="text/css"/><META http-equiv="Content-Script-Type" content="text/javascript"/><META HTTP-EQUIV="Location" CONTENT="http://my-pc:80/reports?%2FSSRS%2FKPIs"/><META HTTP-EQUIV="Uri" CONTENT="http://my-pc:80/reports?%2FSSRS%2FKPIs"/><META HTTP-EQUIV="Last-Modified" …OLSPAN="12" style="WIDTH:71.12mm;min-width: 71.12mm;"></TD><TD COLSPAN="17" style="WIDTH:104.10mm;min-width: 104.10mm;"><TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" style="WIDTH:104.28mm;min-width:
104.28mm;HEIGHT:0.26mm;" class="a46"><TR><TD style="HEIGHT:0.26mm;WIDTH:104.28mm;min-width:
104.28mm;font-size:1pt"> </TD></TR></TABLE></TD></TR></TABLE></TD></TR></TABLE></TD><TD WIDTH="100%" HEIGHT="0"></TD></TR><TR><TD WIDTH="0" HEIGHT="100%"></TD></TR></TABLE></DIV></DIV></body></html>'
I think the problem should be the HTML from SSRS inserted "directly" in the page.
For this kind of situation, when you have some HTML code with a full declaration (like the piece of code you reported), I think it's better to use an iframe tag in order to isolate this HTML inside your page.
You can use the iframe syntax like:
<iframe src="some HTTP Url">...
or the HTML 5 srcdoc:
<iframe srcdoc='<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
...
srcdoc is fully compatible with latest browsers.
For a complete compatibility reference look at:
https://caniuse.com/mdn-html_elements_iframe_srcdoc
I have HTML content which includes texts, images, and videos. The text and images work fine without any problems, but the videos never show up. I have tried many plugins regarding HTML, for example: flutter_html and flutter_html_view, and they all do not show the video.
Sample of the HTML content with video that I want to display:
<p>Hello world 25-3-2019 :</p>
<p> </p>
<p>
<iframe
src="https://www.youtube.com/embed/W8TrvLoPrfQ"
width="400"
height="300"
frameborder="0"></iframe>
</p>
Does anyone have an idea about displaying this content inside a widget?
I'm not sure if this will work for you but you can try the webview_flutter package. A warning though: it is currently in developers preview, and can be found here.
You can give the inline widget some html string to render, for example:
WebView(
initialUrl: new Uri.dataFromString("<p>Hello world 25-3-2019 :</p>
<p> </p
<p>
<iframe
src="https://www.youtube.com/embed/W8TrvLoPrfQ"
width="400"
height="300"
frameborder="0"></iframe>
</p>", mimeType: "text/html", encoding: utf8).toString(),
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController) {
_controller.complete(webViewController);
},
),
This code example does require you to pass it a controller: final Completer<WebViewController> _controller = Completer<WebViewController>(); and it is also safe practice to dispose of said controller when you are about to dispose the screen:
#override
void dispose() {
super.dispose();
_controller.dispose();
}
Let me know if this helps.
now, I am make thumbnail pages using BASE64.
I store Image on server, and call them back as Base64 on client.
I want use these Base 64 encoded Imgs as src.
It it work well
. but, I got an err like that
GET http://localhost:8080/%7B%7Bitem.THUMBNAIL%7D%7D 404
what is problem? and it is proper way to use base64 as src without any convert?
here is my Source
Script
$http.get( "app/dashboard/recentWithInfo").then( function( rtn) {
rtn.data.map( item => {
if( item.THUMBNAIL){
item.THUMBNAIL = "data:image/png;base64," +item.THUMBNAIL.body;
}
})
$scope.items = rtn.data;
});
HTML
<img class="block-thumbnail-img" ng-if="item.THUMBNAIL != null" src="{{item.THUMBNAIL}}">
<h2 ng-if="item.THUMBNAIL == null" style="color:#ccc"> No THUMBNAIL</h2>
Additionally, I use Springboot and AngularJS.
Thanks in advance!
Yes you can use base64 images but make your the images are small and less in no.. below is a basic code where base64 images are called into html pages and rendered
<div>
<p>Taken from wikpedia</p>
<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
</div>
check the fiddle http://jsfiddle.net/hpP45/
In trying to fine-tune the appearance of my Web API page, I'm making changes to CSS classes, and adding new classes, to \Content/Site.css, yet they do not alter the appearance of the page as they should, even when I append "!important" to specific rules.
For example, I added a horizontal rule to the page, which does show up, but quite unobtrusively (with a faint, barely discernible line). So I added this .css class to Site.css:
hr {
border: 0;
height: 1px;
color: navy;
background: #333;
}
...which works just fine in another project, but doesn't in this one. The line remains faint even when I append "! important" to the "height" rule there:
height: 1px !important;
I tried right-clicking the page at runtime and selecting "Reload Page" but that made no difference, either.
Other CSS changes (margins and paddings) are not having any effect, either; this is just one specific case whose resolution should work for all of them.
What do I need to do to get modified/added CSS rules to be applied?
UPDATE
Even when I, acquiescing to Algernop K's suggestion, change the code from this:
. . .
builder.Append(string.Format("<h1 style=\'margin-left:16\'>Available PRO*ACT Reports for <span style='color: #000080;'>{0}</span></h1>", _unit.ToUpper()));
builder.Append("<p style='margin-left:16;'>(Click any link below to download the Excel spreadsheet file to your computer)</p>");
builder.Append("</div>");
builder.Append("<div class=\"row\">");
builder.Append("<div class=\"col-md-12\">");
builder.Append("<hr />");
. . .
...to this:
. . .
builder.Append(string.Format("<h1 style=\'margin-left:16; margin-top:48;\'>Available PRO*ACT Reports for <span style='color: #000080;'>{0}</span></h1>", _unit.ToUpper()));
builder.Append("<p style='margin-left:16;'>(Click any link below to download the Excel spreadsheet file to your computer)</p>");
builder.Append("</div>");
builder.Append("<div class=\"row\">");
builder.Append("<div class=\"col-md-12\">");
builder.Append("<hr style=\'size:4;\' />");
. . .
...(adding "; margin-top:48;" to the h1 element, and "size" to the hr), no change is evident.
UPDATE 2
A "funny" thing happened on the way to the Inspecting of Elements. As Chris W suggested, I right-clicked the hr element on the page, but it's so miniscule that I may have got a different element to inspect. Nevertheless, an err msg in the console may be revealing the basic problem - there it says, "bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires jQuery"
UPDATE 3
Should I explicitly add my \Content\Site.css file to the html? I tried dragging it from Solution Explorer below the lines shown above, hoping it would generate the correct code, but instead it gave me:
C:\Projects\ProActWebReports\ProActWebReports\Content\Site.css
...and a prompt to add "'System.Security.Policy.Site' and all other references in file"
Note that I have a related question here
UPDATE 4
FWIW, here's the entire (relevant) code that builds up this html:
namespace PlatypusWebReports.Controllers
{
[RoutePrefix("api")]
public class LandingPageController : ApiController
{
private string _unit;
[Route("{unit}")]
public HttpResponseMessage Get(string unit)
{
_unit = unit;
string beginningHtml = GetBeginningHTML();
string deliveryPerformanceHtml = GetDeliveryPerformanceHTML();
string fillRateHtml = GetFillRateHTML();
string priceComplianceHtml = GetPriceComplianceHTML();
string produceUsageHtml = GetProduceUsageHTML();
string endingHtml = GetEndingHTML();
String HtmlToDisplay = string.Format("{0}{1}{2}{3}{4}{5}",
beginningHtml,
deliveryPerformanceHtml,
fillRateHtml,
priceComplianceHtml,
produceUsageHtml,
endingHtml);
return new HttpResponseMessage()
{
Content = new StringContent(
HtmlToDisplay,
Encoding.UTF8,
"text/html"
)
};
}
private string GetBeginningHTML()
{
StringBuilder builder = new StringBuilder();
builder.Append("<html>");
builder.Append("<head>");
builder.Append("<title>");
builder.Append(string.Format("Available Reports For {0}", _unit));
builder.Append(_unit);
builder.Append("</title>");
builder.Append("<script src='https://code.jquery.com/jquery-1.12.2.min.js' integrity='sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=' crossorigin='anonymous'></script>");
builder.Append("<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet' />");
builder.Append("<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>");
builder.Append("</head>");
builder.Append("<body class=\"body-content\" style='margin-top:0;margin-left:60;margin-right:60;'>");
builder.Append("<div class=\"jumbotronjr\">");
builder.Append("<img src=\"http://www.Platypususa.com/wp-content/themes/Platypus/images/pa_logo_notag.png\" alt=\"Platypus logo\">");
builder.Append(string.Format("<h1 style=\'margin-left:16; margin-top:48;\'>Available Platypus Reports for <span style='color: #000080;'>{0}</span></h1>", _unit.ToUpper()));
builder.Append("<p style='margin-left:16;'>(Click any link below to download the Excel spreadsheet file to your computer)</p>");
builder.Append("</div>");
builder.Append("<div class=\"row\">");
builder.Append("<div class=\"col-md-12\">");
builder.Append("<hr style='color:red;height:12;' />");
builder.Append("</div>");
builder.Append("</div>");
// for beginning the row div
builder.Append("<div class=\"row\">");
return builder.ToString();
}
private string GetEndingHTML()
{
StringBuilder builder = new StringBuilder();
// for ending the row div
builder.Append("</div>");
builder.Append("</body>");
builder.Append("</html>");
return builder.ToString();
}
. . .
Everything is displaying basically as I want it to, it's just not allowing me to add the "gingebread" (adding margins, hrs, shadow around the used area)
UPDATE 5
Even though _ViewStart.cshtml points to Layout:
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
...and _Layout.cshtml renders (supposedly) the Styles in the Content/css folder, which contains the Sites.css which I have been adding CSS styles madly to:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - PRO*ACT USA</title>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/bootstrap")
#Styles.Render("~/Content/css")
</head>
<body>
<div class="container body-content">
#RenderBody()
</div>
#*#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")*#
#RenderSection("scripts", required: false)
</body>
</html>
...all that does nothing to add these styles I want. The only way seems to use inline styles:
builder.Append("<body style='margin-top:40;margin-left:60;margin-right:60;'>");
. . .
builder.Append("<hr style='border:0;height:1;background:#333;color:navy;' />");
The whole process could certainly be made much clea[n,r]er / more straightforward.
I have the following string value generated in the controller.
cc.lstchat = "Reply the Number with your question... <br />";
foreach (clsChat item in lstchat)
{
cc.lstchat =cc.lstchat + item.DisplayNumber+". " + item.ChatItem+" <br/> ";
}
Now i'm trying to display above string value inside a div tag in my view but it does not render the line breaks.
<div id="divChat" style="width:400px;height:300px;border:double">
#Model.lstchat.ToString()
</div>
Try the #Html.Raw method
#Html.Raw(Model.lstchat)
Use Html.Raw() it is used to render any string as HTML.
`#Html.Raw("input data in here is rendered as HTML only")`
please please be careful with #Html.Raw() because of HTML injection (eg my comment will be <script>...</script> test - that an XSS right away. If you just want line breaks - consider this answer:
#Html.Raw(Html.Encode(Model.CommentText).Replace("\n", "<br />"))