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.
I created a Container model and connected it to an S3 bucket which all works well. I am trying to upload a file using Angular, using the service file generated with lb-ng.
If I do Container.upload({container: 'testbucket'}, {file: file}) call will fire but nothing uploads. Am sure I have just got the params wrong but cannot find any example of the angular library being used, and the official example at https://github.com/strongloop/loopback-example-storage uses a different angular uploader to handle the upload, which I'd like to avoid if possible.
Thanks!
I am trying to download a pdf file generated by laravel in AngularJs. So far i have been able to get the file from laravel but when i click the action, Angular does not download the file but just returns a response that includes the file as in the diagram below.
Response from laravel returns pdf file
How do i get the file to download?
Laravel
public function getPrintInvoice()
{
$pdf = PDF::loadView('crystal.invoice');
return $pdf->download('hello.pdf');
}
Angular
$http.get('print-invoice');
Because $http.get() uses an asynchronous call to the server the response is captured by the XMLHttpResponse object rather than presented directly to the user. The easiest method of presenting the PDF to the user is to skip the angular call, e.g. use $location.url('/print-invoice'); or $window.open('/print-invoice');
If you want to stick with the $http methods (e.g. if you want to be able to perform some action based on the success or failure of the file get) you'll need to capture the return value from the download and use the HTML5 Blob methods. I'd recommend using something like Angular File Saver. But it does require a bit more work on the server side to ensure the data is in the correct format.
I am currently following this tutorial:
https://scotch.io/tutorials/build-a-real-time-scheduling-app-using-angularjs-and-firebase#connecting-to-and-using-firebase, but it is not working as I have it in Google Apps Script.
I am trying to use AngularJS in Apps Scripts. However, the documented fixes to make AngularJS work is documented to use the following line of code:
var ui = HtmlService.createHtmlOutputFromFile('myPage')
.setTitle('My Title');
ui.setSandboxMode(HtmlService.SandboxMode.IFRAME);
Source: Angular JS in Google Apps Script
But I am not sure where to put this in my Code.gs file? I have a function.doGet, so does it go in there?
Right now, my Code.gs is as follows:
function doGet() {
return HtmlService.createHtmlOutputFromFile('index')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
Thanks for your help!
HtmlService.createOutputFromFile(...) returns an instance of the HtmlOutput class, which has the setSandboxMode(..) method. Assuming that you have a file "index.html" in your Apps Script project, your code is correct:
function doGet() {
return HtmlService.createHtmlOutputFromFile('index')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
doGet is the method called by the Apps Script runtime when user navigates to your app's URL, and it should return the fully formed HTML that you want to render (which can include references to externally hosted js, css, etc.)
By this I mean I have read that Angular allows mock up data to be used so that RESTFul apis need not be wired up. I can think of a use case where a UX designer need only look at the cosmetics and need not hook up to a web server. I can think of other use cases as well.
So would Angular work is I give browser a url of a local file like C:\temp\index.html and the js files are either at c:\temp or say c:\temp\js.
So actually, I tried it, here is all in one application file (I know it should be separated)
<html ng-app="myNoteApp">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-controller="myNoteCtrl">
<h2>My Note</h2>
<p><textarea ng-model="message" cols="40" rows="10"></textarea></p>
<p>
<button ng-click="save()">Save</button>
<button ng-click="clear()">Clear</button>
</p>
<p>Number of characters left: <span ng-bind="left()"></span></p>
</div>
<script >
// was in separate file but pasted in for demo purposes
var app = angular.module("myNoteApp", []);
</script>
<script >
// was in separate file but pasted in for demo purposes
app.controller("myNoteCtrl", function($scope) {
$scope.message = "";
$scope.left = function() {return 100 - $scope.message.length;};
$scope.clear = function() {$scope.message = "";};
$scope.save = function() {alert("Note Saved:" + $scope.message);};
});
</script>
</body>
</html>
The results are, it works in Chrome and Firefox no problems, IE blocks content initially but one can allow it run.
You cannot just access an angular application by the filepath on the local machine because you will get cross origin domain errors.
The solution is to install http-server (which requires node.js to be installed). This allows you to create a http-server local to your machine and will allow you to access the Angular application as if it were hosted online for development and test purposes.
Yes you can run a local file, but if you need data off a server, the browser should block it, depending on what version and type of browser you are running.
Here is the official Angularjs Tutorial explanation under the PhoneCat Tutorial App: Running the Development Web Server
While Angular applications are purely client-side code, and it is possible to open them in a web browser directly from the file system,
it is better to serve them from an HTTP web server. In particular, for
security reasons, most modern browsers will not allow JavaScript to
make server requests if the page is loaded directly from the file
system.
If you need to just display data using an expression like {{mymessage}} inside a div, you don't need a web server.
But if you need to load template html files uing ngview, you need a web server- otherwise it will complain with following error.
Request cannot load file. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
If laoding templates is needed for learning angularjs routing, I found a web server exe easy to use - HFS. So far it meets my requirements for learning AngularJS.
References
HFS:Introduction
HTTP File Server
So, the way I've done this is to create a temp service and just load that instead of from a url/file.
Example:
//tempUser.js
angular.module("app").constant("tempUser", {
firstname : "Joe",
lastname : "Smith"
});
//userService.js
angular.module("app").factory("userService", function ($q, tempUser) {
return {
load : load
};
function load(id) {
//TODO: finish impl
return $q.when(tempUser);
}
});
This way the controller can still work as if you were loading from a web service.
angular.module("app").controller("UserDetailCtrl", function (userService) {
userService.load().then(function (user) {
$scope.user = user;
});
});
As others have said, it's best to serve properly as http. However, there are other workarounds.
Some editors, like Brackets (click on the lightning bolt in the top right corner while in a file), can serve the code to your browser properly. For others there might be plugins that do it.
Update: My suggestion below worked well enough for AngularJS 1, but just FYI is insufficient for Angular 2. Also see Disable same origin policy in Chrome
Further, if you're on Chrome you can run it with flags, which means you add some stuff at behind the .exe part of the path on a short cut; options if you will. Specifically you'd want:
--allow-file-access-from-files --allow-file-access --allow-cross-origin-auth-prompt
That makes it not throw errors when trying to access files from various origins. There was a plugin for that once, but I couldn't get it to work. Note there's security reaosns why this isn't the default, so maybe don't put it on your main short cut that you use all the time for surfing... - Use at own risk.