Here is situation:
I want to create HTML document with embeded image something like this:
<html>
<head>
</head>
<body>
<img src="?" />
</body>
</html>
Where "?" could somehow point to embeded image data. Maybe if javascript could decode base64 string generated by .net it could get me closer to my goal...
This document is generated on the fly and submited to document system. So I can not use any external link to the image using LinkedResource.
You should check out the MHTML format. It is used to combine HTML with embedded resources.
http://en.wikipedia.org/wiki/MHTML
Make sure to take a look at the browsers supporting the format.
Here is some good link for generating mhtlm:
http://www.codeproject.com/Articles/8268/Convert-any-URL-to-a-MHTML-archive-using-native-NE
Related
I've got a raw image : either a Bitmap object, or a byte[]. How may I include it in my website (in an .cshtml file), without saving it on my computer ?
I'm using c#, and the project follow the MVC structure.
You can put the image in your html as a base64 string. However, You do need to know the mime-type of the image as well because that has to be prefixed to the string.
For example:
<img src="data:#mime;base64,#(Convert.ToBase64String(bytes))" />
As a rendered example, this will show a dot:
<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
I'm using the old WebBrowser control in a winforms app (C#) to display some static html document. So far, I managed to display what I want, react in a custom way to link clicks, show custom rich tooltips etc.
I'm struggling to set custom mouse cursors, though. The Control itself does not support the ctrl.Cursor property, and setting cursors via CSS in the HTML does only work for standard cursors, NOT for custom cursors.
I'm aware of the neccessity to set the engine to latest (see meta tag in head). The question is, how can I point to a .cur / .png file; I tried with relative paths, absolute paths (just for tests), or doesn't the WebBrowser control maybe allow custom cursors at all?
Here's my snippet:
this.webBrowser1.DocumentText = #"<!DOCTYPE html>
<html>
<head>
<meta http-equiv=""X-UA-Compatible"" content=""IE=edge"" />
<title>Foo</title>
<style>
.customcursor {cursor:url('C:\path\to\stuff.cur'), auto !important;}
</style>
</head>
<body>
<a href='...' class='customcursor'>Foo</a>
</body>
</html>";
I am trying to open pdf in a new tab using Asp.net mvc controller.
it is opening in new tab correctly but the document name is not showing
here is my code
public ActionResult ViewDocument()
{
byte[] docFileArr=......
var cntdn = new System.Net.Mime.ContentDisposition
{
FileName = DocumentName,
Inline = true,
};
Response.AppendHeader("Content-Disposition", cntdn .ToString());
return File(docFileArr, "application/pdf");
}
the document opening in new window correctly but it showing the controller name only not the document name. please see the attachment.
thanks in advance for help
One way to achieve this is to set the title in the metadata of the PDF (either during creation of the PDF or manipulating it, before the download begins). This has been covered by the already given SO questions.
Another approach is to open a new tab, load an own HTML page generated by an ASP.NET MVC View there, which itsself embeds the PDF file, provided by the ViewDocument action (a more appropriate name would be DownloadDocument).
The HTML page would have a Title in its HTML header, that would be shown by the browser. E.g. the view can look like (just to give the idea):
#{
Layout = null;
}
<!DOCTYPE html>
<html height="100%">
<head>
<meta charset="utf-8" />
<title>#Model.Caption</title>
<script src="/js/pdfobject.js"></script>
<style>
.pdfobject-container {
height: 96vh;
width: 99vw;
}
</style>
</head>
<body height="100%">
<div id="pdf" height="100%"></div>
<script>PDFObject.embed("#Model.DownloadUrl", "#pdf");</script>
</body>
</html>
It uses the PDObject.js library to make PDF embedding easier and less error prone.
Web browser actually use metadata included in the PDF files in order to display the title. That way, your file will have the same title without any regards to how it's loaded (from your .NET app, from the desktop after download, etc.).
See this article on how to view and edit metadata from Adobe, using Acrobat: https://helpx.adobe.com/acrobat/using/pdf-properties-metadata.html
I'm using CefSharp for showing a html file in CefSharp browser.
when I use web_view.Load(#"C:\htmlfile.htm"); it's show my body background.
but when i load htmlfile.htm and use web_view.LoadHtml(File.ReadAllText(#"C:\in.htm")); body background doesn't show?
I want to ask how do i must set address body background in html local file?
This is My Html File content:
<html>
<body background="C:\Untitled.png">
</body>
</html>
Try this:
web_view.LoadHtml(File.ReadAllText(#"C:\in.htm"), #"C:\in.htm");
The second parameters indicates the URL, if the URL is a local resource then, the page will be able to load local resources.
You will have to implement IRequestHandler.OnBeforeResourceLoad(), intercept each request, and read the bytes yourself from disk and suppy them to chromium as a response.
https://github.com/chillitom/CefSharp/blob/master/CefSharp/IRequestHandler.h#L26
Another way you could do this is use a schemeHandler (it's cleaner IMO).
Register a scheme with CEF -
CEF.RegisterScheme("ascheme", new HandlerFactory());
Add a scheme handler that loads the PNG from disk and returns a relevant response
then change your html to refer to the scheme:
body background="myscheme://Untitled.png"
I can fill in the blanks if need be... but that should be enough!
Here are the requirements, the users needs to be able to view uploaded PDFs in the browser. They need to be able to add notes to the PDF and save the updated PDF to the server without having to save it to their machine and open it outside the browser.
Any ideas on how to achieve this are welcomed.
by the way I am working with an asp.net website (in C#).
I have no control over what the pdf looks like. It is uploaded client-side then other users need to view and an notes on top of the pdf.
The solution that I was thinking is to render the PDF to a jpeg and use javascript to plot coordinates of where the note should go.
here is a quick example of the html and javascript that create the json of note (using jQuery.)
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
#PDF
{
position:absolute;
top:0;
bottom:0;
width:600px;
height:800px;
background:url(assets/images/gray.png) repeat;
float:left;
}
#results
{
float:right;
}
.comment
{
position:absolute;
border:none;
background-color:Transparent;
height:300px;
width:100px;
overflow:auto;
float:left;
top:0;
right:0;
font-family: Arial;
font-size:12px;
}
div.comment
{
padding-top:-20px;
}
.comment a.button
{
display:block;
padding-top:-20px;
}
</style>
</head>
<body>
<div>
<div id="PDF"></div>
<div id="results">
</div>
</div>
</body>
</html>
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript">
var points = [];
$("#PDF").click(function(e) {
if ($("textarea.comment").length == 0) {
var that = this;
var txt = $("<textarea class='comment'></textarea>").css({ top: e.pageY, left: e.pageX }).blur(function() { $(this).remove(); }).keypress(function(e2) {
if (e2.keyCode == 13 && !e.shiftKey) {
var that2 = this;
$("#PDF").append($("<div class='comment'>").html(that2.value.replace(/\r/gi, "<br>")).css({ top: e.pageY, left: e.pageX }));
$(this).remove();
points.push({ "x": e.pageX, "y": e.pageY, "text": that2.value })
$("#results").append('{ "x": ' + e.pageX + ', "y": ' + e.pageY + ', "text": "' + that2.value + '" }<br/>');
}
});
$(this).append(txt);
txt.each(function() { this.focus(); })
}
});
</script>
So now I need to figure out how to:
Render a pdf to jpeg.
Recreate the PDF putting the annotations on top on it.
You can use GhostScript to render a PDF to JPEG.
Command line example:
gswin32c.exe -dSAFER -dBATCH -dNOPAUSE -sDEVICE=jpeg -r300 -sOutputFile=output.jpg input.pdf
You need to call GhostScript via the command line version (as above) or use a wrapper.
A Google search turned up this blog post:
A Simple C# Wrapper for Ghostscript
For creating a new PDF you have two main alternatives:
Modify the JPEG and convert the JPEG into PDF (you can use GhsotScript for the conversion)
Use A PDF library that imports your original PDF and add data on top of that
For PDF libraries see this SO question:
Building PDF Files with C#
My company, Atalasoft, provides components that let you view document images, including PDFs and annotate them and save the annotations back into the PDF. In our product suite, you would need dotImage document imaging and the PDF Reader add-on. You would be using dotAnnotate through our AJAX web controls. Here is a link to our online demo - the document displayed is a TIFF, but you could use a PDF too.
I don't think you will be able to have a user load a pdf in their browser, edit it, then save it to the server without them saving it to their machine and then uploading it to the server.
What you can do is setup a webform with a database backend that can represent the pdf, and when they edit it you can regenerate the PDF using itextsharp and loading the information from the database, that way when the user goes back to edit the PDF you can prepopulate the form with what already exists.
itextsharp is extremely easy to use, here is an example:
string sourceFile = "path/to/pdfTemplate.pdf";
PdfReader reader = new PdfReader(sourceFile);
PdfStamper stamper = new PdfStamper(reader, new FileStream("path/to/store/pdf/filename.pdf", FileMode.Create));
AcroFields fields = stamper.AcroFields;
//now assign fields in the form to values from your form
fields.SetField("input1", input1.Text);
fields.SetField("input2", input2.Text);
//close the pdf after filling out fields
stamper.SetFullCompression();
stamper.FormFlattening = true;
stamper.Close();
then if you wanted to show the actual PDF you could easily
Response.Redirect("path/to/store/pdf/filename.pdf");
We do this using lowagie on a Spring/Java platform.
Users are presented with pre-generated sales tax returns and can add certain manual adjustments in a few fields. We then recompute totals fields based on their manual input and save the whole thing back to our DB.
You can use either PDFSharp or itextsharp to create annotations. Haven't tried PDFSharp annotation but iTextSharp does work. You'll have to handle the editing on the server side. probably copy the file to a temp folder edit it and save it back.
You'll find itextsharp at http://itextsharp.sourceforge.net, annotation example: bottom at the page http://itextsharp.sourceforge.net/tutorial/ch03.html
pdfsharp: http://www.pdfsharp.net
If you are able to buy a third party library I'd pretty much recommend TxTextControl. http://www.textcontrol.com/en_US/
With this control you can write an editor, that lets you use your pdf as a template and allows the user make changes and save them. All within the browser, without the need to manually select a tempfile on the computer. Acessing is pretty much like using the TextProperty of a normal TextBox.
You did not specify what technology limitations you have. If you can consider a Silverlight solution, and you have client computers that support Silverlight, you can easily do this.
Take a look at how Microsoft Sketchflow works, it permits the user to annotate documents in the web browser and the annotations are persisted back to the server.
Here is a company with a commercial control to annotate PDF (and other formats).
Microsoft does this in their Sketchflow player. Here is a video. Of course you would not be using sketchflow but rather implimenting something similar that meets your needs.
As an added bonus Silverlight 4 supports the clipboard as well as drag and drop so that end users could paste something onto the PDF immage as well as drag any file onto it ehich you would then be able to upload to your server.