Is there any way to Convert HTML table to Image file? I have one HTML table which contains controls like Labels, GridView, and CheckBoxes. How can we convert this table into Image file for creating a PDF file?
This is not a trivial task. Ultimately, you need an HTML renderer to convert the HTML to pixels.
Fortunately, you don't need to write your own. You can use the WebBrowser control.
You can see some code I wrote to extract a thumbnail image from a given URL in the article Creating Website Thumbnails in ASP.NET.
If this is a one-off, load it up in your browser and take a screenshot (Alt-PrtScr on windows for just the current application)
If you need to do this repeatedly/in an automated way, you can either automate a browser control or you can use a headless browser
You should also look into WebKit2Png which will render the page in the same manner as Chrome/other webkit browsers and then save that as a png. It can optionally simulate javascript/etc too
Similarly, there's a wkhtmltopdf which works on all platforms
Converting HTML Table into Image File
$("#selfAssessmentPowerPointDownload").on('mouseover', function () {
var element = $("#html-content-holder"); // global variable
var getCanvas; // global variable
html2canvas(element, {
onrendered: function (canvas) {
getCanvas = canvas;
var imgageData = getCanvas.toDataURL("image/png");
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
$("#selfAssessmentPowerPointDownload").attr("download", "gridData.png").attr("href", newData);
}
});
});
<button id="selfAssessmentPowerPointDownload">Download</button>
<table id="html-content-holder"></table>
Datatables is a powerful jquery plugin for working with tables. One of the option that datatables offered is make a pdf or excel from your table. You can see find many examples in it's website.
Related
So I am using SelectPDF to convert an MVC view's html to PDF, but for some reason, a great deal of the content is missing from the PDF.
I have tested the program on other sites I have made in MVC and they work...
So as per the readme doc's recommendation, I use this code to produce a
SelectPdf.HtmlToPdf converter = new SelectPdf.HtmlToPdf();
SelectPdf.PdfDocument doc = converter.ConvertUrl(HTMLPath);
//SelectPdf.PdfDocument doc = converter.ConvertHtmlString(ViewHTML);
doc.Save(PDFSavePath);
doc.Close();
So HTMLSave path is the location of the HTML file created from the rendered MVC view. While ViewHTML contains the HTML in the form of a string.
So this is how the HTML looks (the file and the view look identical, I did double check in case the HTML was captured incorrectly):
But this is how the PDF looks:
Absolutely tragic...
Not sure if it will be helpful, but here's the HTML:
https://drive.google.com/open?id=0B8DiACLG11oYd3p5Tzc2ZlJQLVk
Unfortunately, all the HTML is on one line thanks to the MVC View to HTML
It seems that the html/css engine used to render the page does not support vh, vw for font sizes. It's a common issue with all converters, so probably you should try to change this if you need the page converted to pdf.
Later update: it seems that there is support for vw, but not for vh. That's why the "each" words appear. They use vw in css.
I have a pdf file created with itextsharp with images in the file. I would like to put a hyperlink in the file that if you pick the picture it will open that picture in a picture viewer. I can set a hyperlink to a web address but have no idea how to get it to open a file. Below is the code, yes I know that c:\test.jpg is a bad hardcoded file name but it is just a test. When you click the picture it does nothing but I have no idea how to tell it what to do.
iTextSharp.text.Image pic =TextSharp.text.Image.GetInstance(comment.examplePic);
pic.ScaleToFit(200f, 200f);
Chunk cImage = new Chunk(pic, 0, 0, false);
Anchor anchor = new Anchor(cImage);
anchor.Reference = "c:\\test.jpg";
doc.Add(pic);
doc.Add(anchor);
A PDF is self-contained. This means that all the resources needed to show the PDF are (usually) stored inside the PDF (exceptions are for instance fonts that can be retrieved from the operating system).
When you have an image that is shown on a PDF page, the bytes of that image are stored in what we call an Image XObject. An XObject is an object that is external to the page, but that is stored as a separate object inside the PDF file.
You are asking to serve the image bytes stored inside this separate object to a viewer on the operating system. This is impossible. I don't know of any viewer that can take those bytes and somehow forward them to an image viewer.
I can think of three possible workarounds. I don't know if any of these workarounds is acceptable to you.
1. Serve the image online
You could put the image on a server and use the code you have in your snippet to link to that online image. Of course: this will only work if the person viewing the document is online and clicks OK when his viewer asks him if it's OK to link to a resources on the internet.
2. Serve the image as an annotation
In this case, you create an annotation for which you create an appearance that renders that same image XObject in the annotation layer (all annotations are shown on top of the page content). You can easily change the visibility status of an annotation to make it invisible (in your case, this would be the default status) or visible (in your case, this would be triggered by a JavaScript action when clicking the link).
There's an example of such an annotation here: Advertisement. If you open advertisement.pdf, you see an image with a button that says "Close this advertisement". Once you click that, the status of the annotation will be changed to invisible. You could do something similar, but the other way round: click a link to make it visible instead of invisible.
This solution doesn't depend on an external viewer, the image is shown in the PDF viewer.
3. Add the image as optional content
Starting with PDF 1.5, PDF supports optional content. See for instance the OptionalContentExample. In this example, we have some questions and answers, but the answers are not visible by default. See layer_actions.pdf. There are links "on / off / toggle" to make the answers visible or invisible.
You could do the same with images: you could add them to a layer that is invisible by default, but that can be made visible if somebody clicks a link. However: this requires a viewer that supports OCG (optional content groups) and the actions to change the status of these OCGs. For instance: if you would try the layer_actions.pdf example in the PDF viewer in Chrome, it won't work, but if you download the PDF and open it in Adobe Reader, you'll see the behavior I described.
Summarized:
You are asking something that is impossible, but there are workarounds. Please post another question if you have chosen a workaround and you don't succeed in making that workaround word (but please take into account that not all viewers support every workaround).
no offence but too much knowledge sometimes makes you ignorant of small things.
simple solution to this problem is here
http://kuujinbo.info/iTextSharp/imageAnchor.aspx
sample code that i implemented works like charm
PdfPCell p1 = new PdfPCell();
p1 = new PdfPCell();
p1.Padding = 0;
p1.Border = 0;
PdfPTable nav = new PdfPTable(1);
nav.WidthPercentage = 100;
nav.SpacingAfter = 12;
navbarImg.Annotation= new Annotation(0, 0, 0, 0, ur);
p1.Image = navbarImg;
nav.AddCell(p1);
_doc.Add(nav);
I am using an or tag to load an SVG file into my html. This file is then edited in javascript by the user(customize, Hide/show elements and color).
The last step of the customization is that i need to save all data in a pdf document, and the SVG is where i am having trouble. I do an ajax request to an asmx service (with all parameters) to create the pdf.
My current approach to the svg problem is to try to get the XML content and draw it in a canvas then save it to an image in order for me to pass it as a parameter to the web service but no luck. I also tried to get the svg content and trasform it to a dataURL to create the image object:
var svg = document.getElementById("testObj").getSVGDocument();
var svgText = svg.documentElement;
var mySrc = 'data:image/svg+xml;base64,' + window.btoa(svgText);
var source = new Image();
source.src = mySrc;
Where testObj is the embed or object tag containing the svg.
I am obviously doing something wrong in both cases.
I want to know what is the best way to handle this scenario. Any help is appreciated.
How to paste HTML ( tables ) code into Excel or PowerPoint?
I've overcome some issues concerning pasting HTML into Excel and PowerPoint and noticed that a lot of people are asking that.
I'd like to share my research, solution I made out for it.
Let's say we have a html file named html and we would like to access it in Excel, let's do following:
Clipboard.SetText(html);
We copy our html into the Clipboard. The clipboard generates from the html a real table or image/chart from the input file.
System.Threading.Thread.Sleep(2000);
Let's wait a second to have a preview
sheet.Range(cellmapp).PasteSpecial();
Now, we paste the content into a range that we could like to paste it, by defining cellmap.
System.Threading.Thread.Sleep(1000);
Let's wait a second to see the output
sheet.UsedRange.Copy(Missing.Value);
Now, in order to copy the table image into PowerPoint, we must work the with UsedRange.Copy, because it will copy the currently selected Excel area.
In order to check that we paste it into the correct Powerpoint slide
foreach (PowerPoint.Slide slide in presentation.Slides)
{
foreach (PowerPoint.Shape pptshape in slide.Shapes)
{
if(<your condition satisfies>)
{
slide.Select(); // some position in any slide
pptshape.Delete();//delete old content that was in that slide
ppApp.ActiveWindow.View.PasteSpecial(); //paste the Excel content
}
}
}
Of course there are other solutions, like making an image out of the html code and pasting that, which was my initial idea.
Another post refering that manipulation:
Showing HTML in PowerPoint
So I was wondering, if I have a div which contains a maps of google maps rendered with some makers and I want to take a picture of that element how can I do this?.I found this solutions it's a approach of what I need but the problem it's that sending a url doesn't help me, I need the specific Div with all the markers. For the server side i'm using C# and for the cliente, asp.net with jquery. Also the google maps apiV3 to handle the maps
Take a look at the Canvas2Image library by Nihilogic Labs:
http://www.nihilogic.dk/labs/canvas2image/
Here's an example of how to take a screenshot of an element through JavaScript:
var oCanvas = document.getElementById("thecanvas");
Canvas2Image.saveAsPNG(oCanvas);
EDIT
You might also take a look at Html2Canvas and FlashCanvas too. I believe one of them has support for earlier browsers (those which don't support HTML5).
Use the method in the link you mentioned and crop the resulting image to the dimensions of your div. You can use myDiv.getBoundingClientRect() in JavaScript to get the dimensions of your div.
Using the WebBrowser control, you can manipulate the document using html or JavaScript to get the page in the state you need to take your screenshot.
Have you considered using the Google Maps Static API - this will render a map image, with markers on it, as a PNG.