Is there any way to detect whether or not an image has not loaded/is broken in a webbrowser control? I am loading html from a file like so:
Here is some html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META content="text/html; charset=unicode" http-equiv=Content-Type>
<META name=GENERATOR content="MSHTML 11.00.10586.589">
</HEAD>
<BODY>
<A href="https://web.archive.org/web/20120124023601/http://www.flatfeets.com/wp-content/uploads/2012/01/shoes-for-flat-feet.jpg">
<IMG title="shoes for flat feet" class="alignleft size-medium wp-image-18" alt="" src="https://web.archive.org/web/20120124023601im_/http://www.flatfeets.com/wp-content/uploads/2012/01/shoes-for-flat-feet-300x238.jpg">
</A>
</BODY>
</HTML>
And simple load this into webbrowser
webbrowser1.DocumentText = thehtml
I would just like to be able to detect whether or not the image has loaded properly. This should work for all images on the page.
You could create a separate WebClient request for each image in the html file and then see if any return a html response error code.
You would first have to parse the html and make a list of all the images urls. I would suggest using a package like HTML Agility Pack to easily parse out the image urls. Then you could use this code to identify any bad paths.
WebClient requester = new WebClient();
foreach (string url in urls)
{
try
{
Byte[] imageBytes = requester.DownloadData(url);
}
catch(Exception ex)
{
//Do something here to indicate that the image file doesn't exist or couldn't be downloaded
}
}
You can also convert the byte array to an Image and then make sure that it is RGB Encoded since that is the only encoding that can reliably be displayed in a web browser.
Related
I have a html page with images, tables and some styling with Bootstrap 4. I tried to convert the pages to pdf using the JsReportMVCService, the pdf doesnot load with the proper css class from bootstrap.
HTML CONTENT
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>WeekelyReport</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<div class="jumbotron">
<h1> Hello John Doe,</h1>
<p>
This is a generic email about something.<br />
<br />
</p>
</div>
</body>
</html>
ASP.NET CORE IMPLEMENTATION
var generatedFile = await GeneratePDFAsync(htmlContent);
File.WriteAllBytes(#"C:\temp\hello.pdf", generatedFile);
async Task<byte[]> GeneratePDFAsync(string htmlContent)
{
var report = await JsReportMVCService.RenderAsync(new RenderRequest()
{
Template = new Template
{
Content = htmlContent,
Engine = Engine.None,
Recipe = Recipe.ChromePdf
}
});
using (var memoryStream = new MemoryStream())
{
await report.Content.CopyToAsync(memoryStream);
return memoryStream.ToArray();
}
}
How my Pdf Looks after the conversion to PDF.
It is possible to convert to pdf with the same bootstrap 4 layout? or am i missing something during the conversion here?
The pdf printing uses print media type and the bootstrap has quite different styles for printing. This causes that the pdf looks different than html, but it looks the same as you would print it. I would generally not recommend using responsive css framework as bootstrap for printing static pdf, but it is of course your choice.
To make your example looking the same on pdf you just need to change the media type on the chrome settings.
var report = await JsReportMVCService.RenderAsync(new RenderRequest()
{
Template = new Template
{
Content = htmlContent,
Engine = Engine.None,
Recipe = Recipe.ChromePdf,
Chrome = new Chrome {
MediaType = MediaType.Screen,
PrintBackground = true
}
}
});
make sure you have the latest jsreport.Types#2.2.2
I'd like to reference XHTML files converted from PDF files using MarkLogic's Content Processing Framework(Pipeline:PDF Conversion(Page Layout)) from the browser.
Although it could be confirmed that the XHTML file can be displayed in the browser via the HTTP server with the following code, the link of css or jpeg file referenced from the XHTML file is not valid and can not be displayed correctly.
Does anyone know how to solve this problem?
My Code(index.xqy):
declare variale $uri := "/aaa/bbb/ccc_pdf.xhmlt";
xdmp;set-response-content-type("text/html;charset=uft-8")
'<!DOCTYPE html PUBLI "-//W3c//DTD XHTML 1.0
Strict//EN "http://www.w3.org/TR/xhtml1-strict.dtd">,
<html xmlns="http://www.w3.rog/1999/xhtml">
<body>
<iframe src="get-file.xqy?uri={xdmp:uri-encode($uri)}">
</iframe>
</body>
</html>
My Code(get-file.xqy):
let $uri := xdmp:get-request-field("uri")
let $mimetype := xdmp:uri-content-type($uri)
return
if(fn:doc($uri))
then (
xdmp:set-response-content-type($mimetype),
fn:doc($uri)
)
else ()
I have a partial view rendered with an Html.Action() that I want to refresh on a button click. I've tried AJAX requests, but the data I'm passing back and forth exceeds the maximum length for JSON.
The basic structure of the page looks like:
<html>
<head>
...
</head>
<body>
<div>
#Html.Action("DisplayBox")
</div>
<div>
<input type="button" id="RefreshButton" value="Refresh Box" />
</div>
</body>
</html>
The reason why I'm asking for a method other than an AJAX request is that the partial I'm rendering is a PDF object:
#model byte[]
#{
String base64EncodedPDF = System.Convert.ToBase64String(Model);
Layout = null;
}
<object data="data:application/pdf;base64,#base64EncodedPDF"
width="900" height="900" type="application/pdf"></object>
Thus, the data passed to the partial view for rendering is too big to put in an AJAX request. On button click, I want to be able to execute the controller action and have the results update the partial with new data. Is there any way of doing this?
You have to load the HTML with the link to the controller that generate the PDF or generate the file on the server side, host it and return the URL of this PDF, then, javascript can redirect user to that file.
I don't think that returning file trough AJAX is really not a good practice!
I've got a iframe with pdf file:
<iframe src="pdf/sample.pdf"></iframe>
How to set that the iframe is the same height as the pdf file, without scrollbars?
If you want to display the PDF without scrollbars, you can do this by passing parameters in the URL. Adobe has documented this here:
http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf
Try this:
<iframe src="pdf/sample.pdf#view=fit"></iframe>
You are not exactly setting the height of the iframe to fit the PDF, but it is probably the most robust solution since it is browser-independent and doesn't require JavaScript.
Here is an update after Daniel's comment.
I created a test HTML as follows:
<!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>
<title>Untitled Page</title>
</head>
<body>
<iframe src="http://partners.adobe.com/public/developer/en/pdf/PDFReference.pdf#view=fit&toolbar=0&navpanes=0"
width="300px" height="400px"></iframe>
</body>
</html>
This is how it looks in Chrome:
This is as expected.
Note that I also turned off the toolbar and the navpane so there is room for the page.
You can do it simply using the method I've explained on my facebook post https://www.facebook.com/antimatterstudios/posts/10151007211674364
Do you have an IFrame, which you want to automatically set the height of because you're hosting a page from another website in yours.
Well, unfortunately the IFrame cannot take the height of the content you are loading and unless you put a height, it'll show either the default height, or no height at all. This is annoying.
I have the solution for you, it'll only work on recent, standard supporting browsers, but also works in IE8 too, so for about 99% of you it's perfect.
The only problem is you need to insert a javascript inside the iframe, which is easy if the content you are loading belongs to you, you can just open the content you're loading and put the javascript in the content.
In your website, you need a piece of javascript which can "receive a message from the IFrame", like this
jQuery(document).ready(function(){
jQuery(window).bind("message",function(e){
data = e.data || e.originalEvent.data;
jQuery("iframe.newsletter_view").height(data.height);
});
});
in your IFrame content, add this at the very bottom, probably it's ok to just do something like "$template.$javascript" using PHP or something, even if the javascript is not inside the tag
<script type="text/javascript" src="jquery-1.7.1-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
parent.postMessage({
height:$(document.body).height()+50+"px"
},"*");
});
</script>
Obviously I am using jquery, you dont have to, it's just easier and probably you are using it, so save yourself the hassle.
if you do that, when the iframe loads, it'll send a signal back to the parent window, which will resize the iframe based on the length of the content :)
I'm sure you can figure out how to alter the little things, but thats the method I'm using
My solution
$(document).ready(function(){
var width = $(window).width();
var height = $(window).height();
$('#objFile').attr('style', 'width: ' + width + 'px; height: ' + height + 'px;');
});
<object data="myFile.pdf" type="application/pdf" id="objFile"></object>
I'm trying to render a web page that contains images into a pdf document using ABCpdf. This is done from a web application.
When I run the application on my development machine in IIS5, everything is fine. When I deploy the application on IIS6, the images don't appear in the pdf.
To reproduce the problem, I made a simple web application to render a pdf file from a simple web page and I found out that the images which are not local are the ones that don't appear in the pdf.
The relevant code that interacts with ABCpdf is:
Doc theDoc = new Doc();
theDoc.Rect.Inset(18, 18);
theDoc.HtmlOptions.PageCacheEnabled = false;
theDoc.HtmlOptions.PageCacheClear();
theDoc.HtmlOptions.UseNoCache = true;
theDoc.HtmlOptions.Timeout = 60000;
int theID = theDoc.AddImageUrl(theUrl);
while (true)
{
if (!theDoc.Chainable(theID)) break;
theDoc.Page = theDoc.AddPage();
theID = theDoc.AddImageToChain(theID);
}
for (int i = 1; i <= theDoc.PageCount; i++)
{
theDoc.PageNumber = i;
theDoc.Flatten();
}
theDoc.Save(location);
theDoc.Clear();
The html page that I'm using for test is this:
<!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><title>Test page</title></head>
<body>
<p>This is a local image</p>
<img src="http://myserver/test/images/testimage.gif" />
<p>This is a remote image</p>
<img src="http://l.yimg.com/a/i/ww/beta/y3.gif" />
</body>
</html>
So I'm trying to render the page at this url: http://myserver/test/testpage.html (the code above) into a pdf.
In IIS6, the second image (that is not local for the server) doesn't appear in the pdf.
It seems to be a problem with access rights, but I couldn't figure it out.
Thank you.
I know this is a little late, but hopefully will help someone else!
Just been experiencing a very similar problem (which is how I landed at this page..). The version of IIS was the same, but it was being run on a different server. Looks like the problem was more generation of the PDF before the image has finished downloading.
I got in touch with WebSuperGoo. The said under the hood it uses MSHTML (good chance that's the difference in your environments) and a couple of suggestions were to try:
theDoc.SetInfo(0, "CheckBgImages", "1");
and
theDoc.SetInfo(0, "RenderDelay", "5000"); // You can change this value, just an initial test.
The second will delay rendering the PDF, giving the image a chance to download.
I had a similar issue and found it was caused by the size of the image file being too large.