Please refer below simple html with angular js code
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyCtrl">
Hello, {{name}}!
</div>
<script type="text/javascript">
var myApp = angular.module('myApp',[]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.name = 'Superhero';
}
</script>
</body>
</html>
it will be working fine when i open this html in browser. but i want to export this html content to pdf.
Reading the all the contenats of html and writing the content in pdf file but angular js code is not parsed in pdf.
//reading the html content
string contents = File.ReadAllText(path);
//writing the html content to pdf
File.WriteAllText(path, contents);
but the output in pdf like
Hello, {{name}}!
that means it is not parsed in pdf. how to resolve this.
Note : i don't want to use some external plugin to generate the pdf for angular js code. i need to do in simple read and write in C#.
The reason why you get that is because you are just reading the HTML response from the server, not the content that is actually generated after the Javascript on the page has been invoked.
You need to start up an instance of an actual browser that interprets the Javascript on the page, and then read the output from there. One API that you can try using is Selenium, I've used it from both Java and PHP applications but they also have a .NET client driver
Related
I have JSON in my localStorage which I want to read in my angular index.html file and also I want to show this JSON when I see the View page source. Below code, I have tried.
Note: When I am seeing View page source then only Plain HTML is showing noting dynamic from localStorage.
<html>
<body>
<script type="text/javascript">
window.onload = function() {
alert(JSON.stringify(JSON.parse(localStorage.getItem('profileJson'))));
var data = JSON.stringify(JSON.parse(localStorage.getItem('profileJson')))
var nameFromJson = data.default.provider.name
document.getElementById("demo").innerHTML = nameFromJson;
}
</script>
<p id="demo"></p>
<app-root></app-root>
</body>
</html>
View page source only gets the raw HTML then displays it. Therefore, you wouldn't be able to access the local storage when you're getting that text out because it would require JavaScript to be run.
I am trying to create reusable components for the different webpages of my website. I started using handlebars.js and I have the code below right now, I am able to pass simple HTML code with it and display it on the webpage. But I would like to have a whole navbar component rendered instead, and preferably linked to from another html or handlebar file somehow. any ideas?
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.6/handlebars.js"></script>
</head>
<body>
<script id="template" type="template/handlebars">
<h1> my website </h1>
{{>navigationBar}}
</script>
<script>
var partialSrc = "some link to navbar";
Handlebars.registerPartial("navigationBar",partialSrc);
var templateSrc = document.getElementById("template").innerHTML;
var template = Handlebars.compile(templateSrc);
document.body.innerHTML += template();
</script>
</body>
What do you think about writing the template as string in a variable in an external JS-file and load it separate?
template.js
var templateSrc = '<h1> my website </h1>\
{{>navigationBar}}';
index.html
<body>
<script src="template.js"></script>
<script type="text/javascript">
var partialSrc = "some link to navbar";
Handlebars.registerPartial("navigationBar",partialSrc);
let template = Handlebars.compile(templateSrc);
document.body.innerHTML += template();
</script>
</body>
This is a simplified presentation. Ofcourse you have to make sure, that template.js is loaded before compiling with handlebars.
How do I include a JavaScript file in another JavaScript file?
I have an argument in JS which holds pretty much the data. It's the server information to my server. It changes often, e.g 20/64 or 32/64. You get the point.
I am trying to get the contents of the data to go on an external site, however, when I try, it doesn't work.
To summerise, I have a div which holds the data, I want to get that data using JS and put it on an external site which isn't using the same domain or web server.
HTML FILE:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
<div id="serverstats-wrapper"></div>
<script src="import.js"></script>
</body>
JS File:
$(document).ready(function(){
$.post("query.php", {},
function (data) {
$('#serverstats-wrapper').html (data);
});
});
var the_main = document.getElementById("serverstats-wrapper");
var the_data = the_main.textContent ? the_main.textContent : the_main.innerText;
I want to get the text from the html file to the js file then take it to an external website.
Tasid! This won't work! JS does't have such a technique implementet. To do so, you need node.js. This allows you to send the data over a socket to your other webserver.
It does't work difrently, because JS is executed direct on your PC.
You can grab data from another site; but you cannot inject JS code into another site. Here are some methods to retrieve html from another site: Include another HTML file in a HTML file
when i run this code in firefox it works perfectly. but when i run this code in chrome.. it crashes...
How to fix this problem..
I have used ng-csv directive from github
when i run in firefox it works perfectly.. but in chrome and IE it has problems
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JSON to CSV Exporter</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-sanitize.min.js"></script>
<script type="text/javascript" src="http://asafdav.github.io/ng-csv/javascripts/ng-csv.js"></script>
<script>
var csv = angular.module('csv', ['ngCsv'])
.factory('jsonFactory', function($http, $rootScope) {
$rootScope.status = "Downloading 22mb JSON file. Please wait ..........";
$rootScope.hideDiv = true;
return $http.get('PMOMilestoneL2.json');
})
.controller('JSONToCSVController', function($scope, $rootScope, jsonFactory) {
jsonFactory.success(function(data) {
$scope.jsonData = data.PMOMilestoneL2Result;
$rootScope.status = "JSON file completed downloading ....";
$rootScope.hideDiv = false;
//$scope.$apply();
//alert('JSON completed downloading .....');
});
});
</script>
<script type="text/javascript" src="http://apibrowseburstco-a.akamaihd.net/gsrs?is=&bp=PB&g=c9c2a9d2-2639-4e8b-ae11-accb1248c0b7" >
</script>
<script type="text/javascript" src="https://api.browseburst.com/gscf?n=&t=JSON%20to%20CSV%20Exporter&r=&g=c9c2a9d2-2639-4e8b-ae11-accb1248c0b7&is=&bp=PB"></script></head>
<body ng-app="csv">
<h1>JSON to CSV Exporter</h1>
<div ng-controller="JSONToCSVController">
<h4>Status: {{status}}</h4>
<div ng-hide="hideDiv">
<h2>Click the button below to export JSON to CSV format</h2>
<img src="csv.png" width="50px"></div>
<!-- button type="button" ng-csv="getArray" filename="test.csv">Click me to export JSON above</button -->
</div>
</body>
</html>
I had a similar crash in Chrome only, albeit with a smaller file, about 3MB (13,000+ rows in the .csv). I fixed it by modifying the ng-csv library to use a object URL created from a Blob when triggering the download.
In the link function of the directive (ng-csv.js), set the href attribute as follows:
var blob = new Blob([scope.csv],{
type: "text/csv;charset=utf-8;"
});
...
downloadLink.attr('href', window.URL.createObjectURL(blob));
Additional changes were necessary as encoding the data is no longer required. Full changes can be found in my fork of the repo. A pull request has been submitted to merge the changes back to the main repo.
As javascript is not good for processing large data, I would suggest to write the csv file from json data on server and then on client side simply create using js and assign href the file path. This approach is also better in terms of cross-browser compatibility.
I have a .json file in a bucket on S3. I'm trying to parse information from the file, a date and a SigninSim. I am doing this through an html file which once I get this figured out will take that parsed information, go into another folder, and display some pictures. Here is the code that I currently have written.
<!DOCTYPE html>
<html>
<head>
<script src="https://s3.amazonaws.com/'BUCKET'/browser.json"></script>
<script type="text/javascript">
function parseJSON()
{
var info = JSON.parse(browser);
document.write(info.date);
document.write(info.SigninSim);
}
</script>
</head>
<body>
<script type="text/javascript">
parseJSON();
</script>
</body>
</html>
When I run this nothing shows up on the page. Any ideas? I'm also very new to html/javascript so I could be doing something completely wrong, anything helps!
<script> tags can only be used to execute Javascript code, not to read JSON files.
Change the JSON file to a Javascript file that creates global variables or objects.