I haven an angularjs app which has a table with pagination. This app makes a call to the REST API which returns the data in JSON format to my angular app. This data is represented in a table format with pagination. (Lets say the app)
I have a need to export this entire data to pdf.
So far I have used an approach which I found here.
I have been successful in exporting to pdf, but only the first page gets exported and not the ones with pagination.
I have found many links with stackoverflow to export to pdf using angularjs. But none of them had information about handling the pagination part.
Can someone help me to get the entire table (which is displayed with pagination) to pdf ?
Any other approach would also be fine.
I had the same issue. How I solved it was, I created a different .html page that would print out the whole table(no pagination because what you are using table export only prints what's in the DOM). So from your controller you can send your $scope.tableData to the new .html page, print the table, download the file and close the html page. Yeah, it requires opening a new tab and after downloading it you can auto close.
My code looked something like
$window.localStorage['tableData'] = JSON.stringify($scope.tableData);
$window.open('#/download'); and in the same controller I had
if ($location.path() === '/download')...//download function and
$window.close();
I used $window.localStorage to get the data to the new tab because my data was pretty big, I don't know if it's smart or not to use that but it was a solution at the time.
Related
I want to use react js to make a news website with hundreds of articles. As I understand it, react makes single-page-applications. Surely it is not feasibly to include hundreds of articles in a single-page-application, so how could this be done?
You can absolutely use react to make a single page application which shows hundreds of articles.
The term single-page application describes how the articles are loaded when the user moves between the articles. In a multi-page application, every article will be its own html file. When the user clicks to go to a new article, your server sends a brand new html file, and the browser throws out the old page and shows a new one. In a single-page application, there's just one html file which is loaded at the start. As the user navigates between articles you use javascript to fetch data about that article (but not a full html file), and then you use that data to modify the existing page to look like a new page.
I am working on integrating a 2sxc content WebAPI feed into a ReactJS application.
I have managed to get a JSON feed of data into the application, and am in the process of mapping out the data.
I'm wondering what the best practice would be to "resolve" a URL which is coming through as a DNN Page/ Tab ID.
Below I will showcase the various points this is referenced...
First the Setup of the entity / data types...
Then this is an example entry with the data filled out... The page link / URL is set up to point to another internal page on the DNN website:
Finally you can see this data item come through as a JSON feed via the 2sxc API:
What is the best way to convert this piece of data into a URL which can be used in a SPA type application?
There isn't any "server-side" code going on, just reading a JSON feed on the client side...
My initial idea would be to parse this piece of data in JS, to extract the number then use something like this:
http://www.dotnetnuke.com/tabid/85/default.aspx
http://www.dotnetnuke.com/default.aspx?tabid=85
I was hoping someone with more experience would be able to suggest a better / cleaner approach.
Thanks in advance
If you were server-side in Razor you'd be doing something like this:
#using DotNetNuke.Common
View List
XXXX = Dnn.Tab.TabID or define a string with the tab id you want
I seem to have a vague memory that I saw somewhere that Daniel (2sxc) has a way to use Globals.NavigateUrl() or similar on the client side, but I have no idea where or if I did see that.
The Default.aspx?tabid=xx format will certainly work, as it's the oldest DNN convention and is still used in fallbacks. The urls aren't nice, but it's ok.
The reason you're seeing this is because the query doesn't perform the automatic lookup with the AsDynamic(...) does for you. There is an endpoint to look them up, but they are not official, so they could change and therefor I don't want to suggest that you use them.
So if you really want a nicer url, you should either see if DNN has a REST API for this, or you could create a small own 2sxc-api endpoint (in the api folder) just to look that up, then using the NavigateURL. Would be cool if you shared your work.
I have two pages included on single page which has new-registration form and listing user form below that. At a time I am showing that two things.
What I want is, once I enter the new entry in database, my listing page should be reloaded. I have used $route.reload for that. On submit button, I am calling one function to save the data in database, and after submitting I am calling $route.reload.
But What is happen like sometimes it is working and sometimes it doesn't.
I am using AngularJS 1.3.
I have tried $window.location.reload(); but it didn't work for me.
Somewhere in blog, I have seen like that reload function is not supported for angular 1.3 or less version, then why is it working sometimes.
Can anyone suggest other things to reload the things at a time only once the new record get insert and can some one suggest like where I am getting wrong while using route.reload?
If I remember correctly,
window.location.reload()
reloads the current page with POST data, while window.location.href=window.location.href does not include the POST data.
window.location.href=window.location.href will not reload the page if there's an anchor (#) in the URL - You must use window.location.reload() in this case.
Also, as noted by #Mic below, window.location.reload() takes an additional argument skip Cache so that with using window.location.reload(true) the browser will skip the cache and reload the page from the server. window.location.reload(false) will do the opposite, and load the page from cache if possible.
$route.reload function is available for angular version 1.3 see docs https://code.angularjs.org/1.3.0/docs/api/ngRoute/service/$route
Are you using two different controllers for that two views?
Actually why you want to reload the page? If you want to reload every time (while inserting,updating,deleting)?
See,
You can just push the $http response object (newly added) to existing array.
or Just call the defaultLoad() function after insert success callback
What is the best practice to export or preview page content onClick as pdf/xls in the browser?
From my inexperienced understanding, I have to create an action/function that generates a static page content to pdf. Please correct me if I'm wrong and help me with implementation.
Assuming this is not the File-> Print page function, if you are talking about actually generating a file, there are a couple of libraries out there to do that. That problem is not specific to React.
A good JavaScript library to generate pdfs is pdfmake. I have used it in a project, although I used it in a backend Nodejs server. It may also work in the frontend directly. I suggest you try leaving the pdf generation to the backend though, then you need only download the file after making a request with some data from the frontend.
I have a link thats used to download files from my server. The link passes svg (xml) as a paramater. THe server creates a jpeg using this xml and passes it back to the view to initiae a download.
The problem is that in IE only a portion of the xml is being passed due to the limit on url size. It works perfectly in Firefox and Chrome (where there must be bigger url limits).
The xml being passed comes from javascript so I need to update the link on the fly on the client side :
html :
<g:link class="button" action="testImage" id="my-link"><input type="button" value="PDF" class="invisible"/></g:link>
JS:
svgXML = "<svg ......</svg>" //can get very long
document.location.href= '${createLink(controller: 'imageCreater' , action:'downloadJPEG')}?svg='+svgXML;
Is there a way around this approach? I cant use ajax as it requires a plugin to initiate the download after it gets passed to the view. Due to requirements I cant use this plugin. I've read somewhere that POST requests don't have a limit on paramater size. Is there a way to change my link to do a POST rather then a GET request?
In case anyone comes across the same problem. I couldn't find a straight forward fix for my problem using a grails link. I came across the jQuery-File-Download plugin and its working perfectly