i have been using Pechkin (wkhtml wrapper for c#) to create pdf reports in my project and its working fine except i cant render any ajax chart(pie, bar, bubble or anything) in my created pdf, i have also tried rederdelay property but it didnt help me a bit.
the text data comes but the chart doesnt and the whole thing mess up. So i deduced that the problem is because created charts are not using standard html for the wrapper to handle, so in conclusion i need something which can convert these chart to images before html render on fly and it should be OpenSource/free.
thanks
Alok
P.S. I am using ajax control toolkit charts, pechkin is latest install from nuGet.
convert the chart into image and use this function to convert into byte array
private Byte[] Chart()
{
using (var chartimage = new MemoryStream())
{
chart.SaveImage(chartimage, ChartImageFormat.Png);
return chartimage.GetBuffer();
}
}
then create image from those byte[]
var image = Image.GetInstance(Chart());
image.ScalePercent(75f);
add this image in the document
Related
I have a aspx page which generates charts using jQuery flot tool. Its working good. My new requirement is I have to place a button called "Export to Excel" in this page. Whenever I click this button, the charts which are generated by jQuery flot tool has to export to excel file as images. Its like copy and paste the image from html page to excel file. I tried so many ways but I cant get proper solution. Help me to solve this.
method 1:
1.In JavaScript, I convert the chart div into canvas and set source of asp image control into that image . Its displaying in browser as expected.
var data = canvas.toDataURL('image/jpg');
document.getElementById('ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder1_imgChart').src=data;
}
});
2.But at server I cant access that image src even though I put the submit button in update panel.
string picName = imgChart.ImageUrl;
worksheet.Shapes.AddPicture(picName, Microsoft.Office.Core.MsoTriState.msoFalse, Microsoft.Office.Core.MsoTriState.msoCTrue, 10, 10, 100, 100);
It shows picName is null error.
method 2:
Convert the chart into image and store in a local folder
Add the image file from folder in the excel
But the problem is cant convert the chart into image and store in local folder.
This behaviour is expected in ASP.NET. Changing the src path (e.g. the ImageUrl property) with JavaScript of an Image won't be available in the postback.
I would try to store the value of the canvas also in a HiddenField and take the value from there in my server side code.
JavaScript
var data = canvas.toDataURL('image/jpg');
document.getElementById('ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder1_imgChart').src=data;
document.getElementById('ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder1_HiddenField1').value=data;
C#
string picName = HiddenField1.Value;
worksheet.Shapes.AddPicture(picName, Microsoft.Office.Core.MsoTriState.msoFalse, Microsoft.Office.Core.MsoTriState.msoCTrue, 10, 10, 100, 100);
Update: This approach will give you data: URL that will look like this data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA.
In order to save this string as an image in C# you need the following code which I found here. After saving this image to the file system (the file "~/temp/file.png") you can easily add it to excel.
C#
string data = #"data:image/png;base64,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";
var base64Data = Regex.Match(data, #"data:image/(?<type>.+?),(?<data>.+)").Groups["data"].Value;
var binData = Convert.FromBase64String(base64Data);
using (var stream = new MemoryStream(binData))
{
System.Drawing.Image image = new Bitmap(stream);
image.Save(Server.MapPath("~/temp/file.png"));
}
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.
Background
I am working on a WPF application that I need to implement reporting functionality for, in PDF and RTF formats. The reports are mostly tabular.
The application doesn't have a database. Instead its data is taken from local XML files from which I create View Models which are in turn passed to the UI for presentation to the user. I need to use these View Models for the reports.
Question
What is the best way for me to approach this requirement, so that I can use my existing View Models to produce reports in PDF and RTF formats?
Potentials
I was thinking if this was a web application I could generate a report in HTML and use 3rd party tools to convert it to PDF and RTF. I've done this before, and I know it would work. Unfortunately there's no guarantee that the user will have an internet connection so I have to keep the report generation local.
So I'm wondering about using XAML to define the report template. Is this possible? I see a utility for Xaml FlowDocument or XPS to PDF Converter on CodePlex but this works with FlowDocument, but I don't think this is what I need. The reports I'll be generating are mostly tabular.
It turns out this:
Xaml FlowDocument or XPS to PDF Converter
appears to be the solution.
I can specify tables in the FlowDocument and and specify a DataContext to bind my View Models to it, and then I can either convert that to PDF using the in-built functionality, or convert it to RTF with something similar to the following:
// get FlowDocument object
var uri = new Uri("/Documents/SamplePDF.xaml", UriKind.Relative);
FlowDocument doc = App.LoadComponent(uri) as FlowDocument;
// create TextRange representation of the FlowDocument
var content = new TextRange(doc.ContentStart, doc.ContentEnd);
if (content.CanSave(DataFormats.Rtf))
{
using (var stream = new FileStream(#"C:\Path\To\file.rtf", FileMode.OpenOrCreate))
{
// save it
content.Save(stream, DataFormats.Rtf);
}
}
I have a PDF file with XFA forms, that I can successfully populate through a dynamically generated XML file.
Now I am trying to insert an image (a hand-made JPG signature file), for which I tried multiple ways, with "partial" luck.
I tried this:
How can i set an image to a pdf field in existing pdf file?
And this:
How can I insert an image with iTextSharp in an existing PDF?
I meant "partial" luck because the image does show in Foxit Reader, but doesn't show in Acrobat Pro.
Any help will be much, much appreciated.
EDIT:
This is the code I'm using to replace a button field with an image.
private void InsertSignatureIntoBOL(string inputFile, string fieldName, byte[] imageFile, string outputFile)
{
using (PdfStamper stamper = new PdfStamper(new PdfReader(inputFile), File.Create(outputFile)))
{
AcroFields.FieldPosition fieldPosition = stamper.AcroFields.GetFieldPositions(fieldName)[0];
PushbuttonField imageField = new PushbuttonField(stamper.Writer, fieldPosition.position, fieldName);
imageField.Layout = PushbuttonField.LAYOUT_ICON_ONLY;
imageField.Image = iTextSharp.text.Image.GetInstance(imageFile);
imageField.ScaleIcon = PushbuttonField.SCALE_ICON_ALWAYS;
imageField.ProportionalIcon = false;
imageField.Options = BaseField.READ_ONLY;
stamper.AcroFields.RemoveField(fieldName);
stamper.AddAnnotation(imageField.Field, fieldPosition.page);
stamper.Close();
}
}
I also tried this code to add an image to an absolute position"
var pdfContentByte = stamper.GetOverContent(1);
iTextSharp.text.Image image = iTextSharp.text.Image.GetInstance(Convert.FromBase64String(SignatureHiddenField.Value));
image.SetAbsolutePosition(100, 100);
pdfContentByte.AddImage(image, false);
The only way I can make the images show up in Acrobat Pro is by flattening the form, but I also fill XFA fields in the same form and, when flattened, the XFA fields are shown as empty.
As I was mentioning, it works wonderfully in Foxit Phantom, but my main interest is with Acrobat Pro.
Any help would be much, much appreciated.
I ended up modifying the XDP file (in Adobe LiveCycle) in order to add an image field. Then, I populated that field with the Base64 encoded string representing the image. Many thanks.
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.