I have a kendo chart with the remote data. Is it possible to export the chart to png or pdf format
Since Atanas Korchev's answer, kendo has implemented a built-in method to export a chart as a png, svg or a pdf file.
If you want to export a png file you can do it by using the exportImage function:
kendoChart.exportImage().done(function(data) {
kendo.saveAs({
dataURI: data,
fileName: "chart.png"
});
});
For a PDF, it's almost the same logic with the exportPDF function:
chart.exportPDF({ paperSize: "Auto", landscape: true }).done(function(data) {
kendo.saveAs({
dataURI: data,
fileName: "chart.pdf"
});
});
You may refer to kendo chart API documentation for more details about those functions.
It is possible if you use some third-party tool such as InkScape. The latter can convert SVG (the Kendo UI Chart native format) to pretty much anything else including PNG and PDF. You can use the svg method of the chart to get the underlying SVG and then send it to a remote service.
Here is an ASP.NET MVC application which shows how: https://github.com/telerik/kendo-examples-asp-net/tree/master/chart-inkscape-export
Related
How can I create and download a PDF version of the current web page (which is open in browser) on button click?
I am assuming you use jquery on client-side.
$('#button_id').click(function(){
window.print();
});
Which will guide you to print menu where you can choose "Save as PDF" which will save your current view as pdf.
Did it solve your issue?
You can look at Nuget package: Rotativa http://nuget.org/packages/Rotativa. It's based on wkhtmltopdf.
Usage is really simple.
Having an action you would like to serve as Pdf, instead of Html page. You can define an action that returns an ActionResult of the type ActionAsPdf (RouteAsPdf is also available). So the code is just:
public ActionResult PrintIndex()
{
return new ActionAsPdf("Index", new { name = "Giorgio" }) { FileName = "Test.pdf" };
}
With name = "Giorgio" being a route parameter.
Look at this GitHub
If i am getting you right. You want to generate a PDF from HMTL. Rotativa plugin is a good choice. Also, mentioned by Janmejay Kumar. If you want to implement this plugin. Please ask if you have any doubt .I have used this plugin for PDF and for image generation.
I display an SVG file using HTML img tag through the .html file of an Angular 6 component. Let's call this SVG file a.svg.
This a.svg image contains parts that are linked to other SVG files, and let's just consider the first of them, named b.svg.
All the SVG files are static. They are place in a subfolder of assets in Angular 6 application folder.
When I open a.svg directly under my Internet browser, I can click on hyperlinked parts and navigate to b.svg, without any problem.
Under Angular 6, file a.svg is displayed correctly, but apparently, I can not click on interactive parts.
I investigate the issue without being able to find a real clue about the root cause of such behabior. Maybe, related to security issue. I wonder
is this a desired behavior of Angular 6?
is there a way to tell Angular 6, to allow user interaction on these images ?
Finally found the right way to do so.
First, read security guide for angular which provides many good hints, although far from being exhaustive.
To make my code run smoothly, this is what I changed
Firstly, in angular component .html file, I changed the HTML img tag into a div tag, on which I used the [innerHTML] binding to an internal property named svgFromFile
<div class='e2e-inner-html-bound' [innerHTML]='svgFromFile'></div>
Then, in angular component .ts file, I changed the implementation to use bypassSecurityTrustHtml() on the content of the target SVG file
this.fn = '/assets/urba/diagram/' + params['fn'] + '.svg'; // from route parameter to image asset to be served
this.http.get(this.fn, {
responseType: 'text'
}).subscribe(
data => {
console.log(data);
this.svgFromFile = this.sanitizer.bypassSecurityTrustHtml(data);
},
error => console.log('svgFromFile', error)
);
Doing so, embedded URLS in SVG file are now active and dereferenceable.
With the launch of SolidWorks 2016, Dassault Systèmes has promoted a new web portal that enables the embedding of Edrawings models into web pages: 3dcontentcentral.com.
Their web 3D viewer uses WebGL to show model inside a browser window (here you can find a live example). Moreover, there is the possibility to embed an iframe with the viewer to embed it onto another web page, like the following:
<iframe scrolling='no' frameborder='0' allowfullscreen='true'
src='http://www.3dcontentcentral.com/external-site-embed.aspx?format=3D&catalogid=364&modelid=1254&width=250&height=250&edraw=true'
name='PreviewFrame3D' id='PreviewFrame3D' width='400' height='355'>
</iframe>
<br/>
<a href='http://www.3dcontentcentral.com/download-model.aspx?catalogid=364&id=1217'>
Download</a>
The final result is something like the following:
Full screen example
So, is there any chance to export a 3D model (part) in the same way and embed as a WebGL without uploading into 3D Content Central website? I have also access to the Edrawings/SolidWorks SDK (2015), if it could be helpful in any way.
How to convert a SolidWorks file into a WebGL JSON file
The best solution I came across is simply to use SolidWorks Visualize (formerly Bunkspeed) to export the geometry and the materials using a combination of OBJ and MTL files.
Then, you'll be able to import it into a WebGL scene using the Three.js/OBJLoader. A big problem that can arise is the dimension and the memory required to load the exported file. To solve this latency/memory problem you can then convert the exported OBJ files into Three.js JSON format using the three-obj and minifying them using the minify() method. After that you'll have to load the minified files using the Three.js/BinaryLoader.
Hope this can help someone else.
Have a look at the WebGL 3D model viewer using three.js guide at http://www.radiatedpixel.com/wordpress/2013/03/27/webgl-3d-model-viewer-using-three-js/
Export the obj file from SolidWorks.
It should be straight forward to add your own controls via JavaScript.
The frameworks i'm using are AngularJS(client-side) and Sitebricks(server-side).
I want to return a list of objects into json and make the client download that json by prompting the user where he wants to save the file.
I accept all kind of propositions.
Cheers in advance.
It sounds like you want to create the file in the browser, and save it to the user's local machine. One method is presented here, but it doesn't work in IE Javascript: Create and save file
Here's a fiddle: http://jsfiddle.net/vUdyD/
$(function() {
function exportToCsv() {
var myCsv = "Col1,Col2,Col3\nval1,val2,val3";
window.open('data:text/csv;charset=utf-8,' + escape(myCsv));
}
var button = document.getElementById('b');
button.addEventListener('click', exportToCsv);
});
You could use the HTML5 download attribute. It is not perfect and browser support
<!-- will download as "expenses.pdf" -->
Download Your Expense Report
Demo: http://davidwalsh.name/download-attribute
Support: http://caniuse.com/#feat=download
How can I directly display a simple .OSM file in browser. I want to simply display .OSM file in the browser like it is displayed in JOSM editor.
The Leaflet plugin leaflet-osm has the option to load a data layer which uses a single OSM object, or a small number of objects. This method is not recommended for a large amount of data.
Here's the example from the leaflet page:
$.ajax({
url: "http://www.openstreetmap.org/api/0.6/node/164979149",
// or "http://www.openstreetmap.org/api/0.6/way/52477381/full"
dataType: "xml",
success: function (xml) {
var layer = new L.OSM.DataLayer(xml).addTo(map);
map.fitBounds(layer.getBounds());
}
});
That is not directly possible because the .osm file is just a XML file containing raw data, it needs to be rendered first. However there is various rendering software, some of it can produce an image directly out of a .osm file.
You can display osm as vector data by using the leaflet plugin leaflet-osm for example.