Export page to pdf in angular app - javascript

I'm looking for a good option to have an export to pdf functionality on each of my app's pages using angular. Does anyone have any recommendations on angular modules that can achieve this as I haven't been able to find any angular based ones.

You should use this angular-save-html-to-pdf
//Here goes your script in html file
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/niklasvh/html2canvas/0.5.0-alpha2/dist/html2canvas.min.js"></script>
<script src="../bower_components/jsPDF/dist/jspdf.debug.js"></script>
<script src="../dist/saveHtmlToPdf.min.js"></script>
//Add this module to your angular app :
var app = angular.module('app' , ['htmlToPdfSave']) ;
//This is your html file
<button pdf-save-button="idOneGraph" pdf-name="hello.pdf" class="btn">Hello World</button>
<!-- below block will be saved as pdf -->
<div pdf-save-content="idOneGraph" >
Hello World
</div>

Related

How can pass path of dicom file at cornerstone library and display it?

I want to display a Dicom image from my web site. So I have find cornerstone library to do this.
So this is the code:
<!DOCTYPE HTML>
<html>
<head>
<!-- twitter bootstrap CSS stylesheet - included to make things pretty, not needed or used by cornerstone -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="cornerstone.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="page-header">
<br>
</div>
<div class="row">
<form class="form-horizontal">
<div class="form-group">
<input type="file" id="selectFile" >
</div>
</form>
</div>
<div style="width:512px;height:512px;position:relative;color: white;display:inline-block;border-style:solid;border-color:black;"
oncontextmenu="return false"
class='disable-selection noIbar'
unselectable='on'
onselectstart='return false;'
onmousedown='return false;'>
<div id="dicomImage"
style="width:512px;height:512px;top:0px;left:0px; position:absolute">
</div>
</div>
</div>
</body>
<!-- jquery - currently a dependency and thus required for using cornerstoneWADOImageLoader -->
<script src="jquery.min.js"></script>
<!-- include the cornerstone library -->
<script src="cornerstone.min.js"></script>
<!-- include the dicomParser library as the WADO image loader depends on it -->
<script src="dicomParser.min.js"></script>
<!-- include the cornerstoneWADOImageLoader library -->
<script src="cornerstoneWADOImageLoader.min.js"></script>
<script src="../dist/cornerstoneFileImageLoader.js"></script>
<!-- jpeg 2000 codec -->
<script src="jpx.min.js"></script>
<script>
$(document).ready(function() {
var element = $('#dicomImage').get(0);
cornerstone.enable(element);
// Listen for the change event on our input element so we can get the
// file selected by the user
$('#selectFile').on('change', function(e) {
// Add the file to the cornerstoneFileImageLoader and get unique
// number for that file
var file = e.target.files[0];
alert("cambio il file");
var index = cornerstoneFileImageLoader.addFile(file);
// create an imageId for this image
var imageId = "dicomfile://" + index;
// load and display this image into the element
var element = $('#dicomImage').get(0);
cornerstone.loadImage(uriImageDesktop).then(function(image) {
cornerstone.displayImage(element, image);
});
});
});
</script>
</html>
With this code, I can display a single HTML page with a File Chooser. With this component, I can navigate into my pc then the library load a Dicom image.
Now I want to pass from the URL a path of my Dicom image.
So I'm trying to do this
var uriImageDesktop = "C:\Users\michele\Desktop\deflate_tests\image";
// load and display this image into the element
var element = $('#dicomImage').get(0);
cornerstone.loadImage(uriImageDesktop).then(function(image) {
cornerstone.displayImage(element, image);
});
for the moment I wirte static dicom image but it not found.
So the question is, how can I pass a path from my dicom file and then display it?
You're missing the image loader part here. Cornerstone requires an image loader to convert your link to an image object readable by cornerstone. If you look at cornerstone's github repo, you will find two image loaders. The WADO image loader can be used to read DICOM files. You will have to build a backend to serve the DICOM files though since the browser won't be able to access server files.
Given you have a uri to access the DICOM file:
import * as cornerstone from "cornerstone-core"
import * as cornerstoneWADOImageLoader from "cornerstone-wado-image-loader"
cornerstoneWADOImageLoader.external.cornerstone = cornerstone
const uriServed = "http://xxx/deflate_tests/image"
const element = $('#dicomImage').get(0);
cornerstone.loadImage("wadouri:" + uriServed).then(image => {
cornerstone.displayImage(element, image);
});
NB: if you do't have npm, just link to the .js files as scripts instead of importing (or you can import them too in ES6+)
Perhaps the URI format is invalid. The example does not contain a scheme. Something like
file://c:/Users/user/Desktop/images/image.dcm
may work better.

Run jQuery Functions After AngularJS Loaded Views and Included Partials

I'm using both AngularJS (v1.6.4) and jQuery (v2.1.4) in my web application. I included static html files using ng-include. So my index.html is like that:
<body>
<div id="wrapper" ng-controller="mainCtrl">
<div ng-include="'partials/header.html'"></div>
<div ng-include="'partials/menu.html'"></div>
<div class="content-page">
<div ng-view></div>
<div ng-include="'partials/footer.html'"></div>
</div>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="plugins/jquery-datatables-editable/jquery.dataTables.js"></script>
<script src="plugins/datatables/dataTables.bootstrap.js"></script>
<script src="assets/js/main.js"></script>
<script>
$("#datatable-editable").DataTable();
</script>
</body>
As you see above I have 3 include files and 1 view. I used datatable in angular view. And I want to initialize it in my index.html file with $("#datatable-editable").DataTable(); But it doesn't work. When I write html elements directly to the page instead of including, it works fine. Why is this happening? How can I solve it?

Angular material's progress circular directive is not working

I am trying to show a progressive circular symbol using angular-material's directive "md-progress-circular"(https://material.angularjs.org/latest/demo/progressCircular). I have included both angular-material.js as well as angular-material.css file. But still I am not able to see any circular symbol on the view.
The code that I have written in html file is -
<md-progress-circular md-mode="determinate" value="{{host.volumePercentage}}" md-diameter="25"></md-progress-circular>
Thanks in advance.
Here you go! This is straight from their documentation. You got to make sure the determinateValue is appropriately incremented based on whatever event you are waiting for.
var demoApp = angular.module('demo', ['ngMaterial']);
demoApp.controller('demoController', function($interval, $scope) {
});
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
<body ng-app="demo">
<div ng-controller="demoController">
<md-progress-circular md-mode="indeterminate"></md-progress-circular>
</div>
</body>

Framework7: Default url to a different view is not working

As we can see in the views page of documents in Framework7.
Default View URL
If you think that for some reason Framework7 detects wrong default
View URL (which is used for navigation history), or if you want to
have different default View URL, you can specify it using data-url
attribute on View element or using url parameter when you initialze
View:
<div class="view" data-url="index2.html">
If I do as the doc suggests, for example, in the app which accompany the framework7 package, single view app, laying under /dist/index.html, if I do something like:
<div class="view view-main" data-url='about.html'>
But when i open index.html, the main view is not directing to about.html.
Why is this happening?
It does not work like that. I think you want to load the about.html as default in the main view. You can do this something like this:
<html>
<head>
...
</head>
<body>
....
<div class="views">
<div class="view view-main"></div>
</div>
...
<script type="text/javascript" src="js/framework7.min.js"></script>
<script type="text/javascript" src="js/my-app.js"></script>
...
<script>
mainView.router.loadPage('about.html');
</script>
</body>
</html>

What is the cause for "angular is not defined"

I'm following the video tutorials on egghead.io but while trying to follow his example when he created a factory (see video here) I keep getting "angular is not defined" Reference Error but I have included the angular script
This is my html page:
<!DOCTYPE html>
<html>
<head>
<title>Prototype</title>
<link rel="stylesheet" type="text/css" href="foundation.min.css">
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div data-ng-app="">
<div data-ng-controller="FirstController">
<input type="text" data-ng-model="data.message">
<h1>{{ data.message }}</h1>
</div>
<div data-ng-controller="SecondController">
<input type="text" data-ng-model="data.message">
<h1>{{ data.message }}</h1>
</div>
</div>
<script type="text/javascript" src="angular.min.js"></script>
</body>
</html>
and this is my javascript file "main.js":
//Services
// step 1 create an app
var myApp = angular.module('Data', []).
// tep 2 create factory
// Service name, function
myApp.factory('Data', function(){
return { message: "I'm Data from a Service" }
});
//Controllers
function FirstController($scope, Data){
$scope.data = Data;
}
function SecondController($scope){
}
I have read a few posts where similar happen (here) and please correct me if I'm wrong but I think it is to do with Boot strapping andI have tried manually bootstrapping using angular.bootstrap(document, ['Data']); but with no success, still get same error.
But What I want to know is, Why this works for so many examples online, like the egghead video series, but I have issues as I believe I have followed his video very closely. is it a change in angular in recent versions?
You have to put your script tag after the one that references Angular. Move it out of the head:
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="main.js"></script>
The way you've set it up now, your script runs before Angular is loaded on the page.
You have not placed the script tags for angular js
you can do so by using cdn or downloading the angularjs for your project and then referencing it
after this you have to add your own java script in your case main.js
that should do
I had the same problem as deke. I forgot to include the most important script: angular.js :)
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>

Categories

Resources