Trying to download PDf file using examples at https://parall.ax/products/jspdf
Relevant HTML Code is as shown below.
It keeps giving error as "Uncaught TypeError: Cannot read property 'config' of undefined jspdf.debug.js
Uncaught TypeError: Cannot read property 'canvas' of undefined" and doesn't generate any PDF file.
Thanks for your help.
<script type="text/javascript" language="javascript" src="#{applicationConfiguration.appStaticFileContextPath}/desktop/js/jsPDF-master/dist/jspdf.debug.js"></script>
<script type="text/javascript" language="javascript" src="#{applicationConfiguration.appStaticFileContextPath}/desktop/js/jsPDF-master/plugins/from_html.js?"></script>
<script type="text/javascript" language="javascript" src="#{applicationConfiguration.appStaticFileContextPath}/desktop/js/jsPDF-master/plugins/canvas.js?"></script>
function downloadPDF() {
var doc = new jsPDF('p', 'in', 'letter');
var source = $('#overview_tab').first();
var specialElementHandlers = {
'#banking_tab': function(element, renderer) {
return true;
}
};
doc.fromHTML(
source, // HTML string or DOM elem ref.
0.5, // x coord
0.5, // y coord
{
'width': 7.5, // max width of content on PDF
'elementHandlers': specialElementHandlers
});
doc.output('dataurl');
}
This code works for me:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello world</title>
</head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script type="text/javascript">
function saveAspdf() {
var pdf = new jsPDF('p','pt','a4');
pdf.addHTML(document.body,function() {
pdf.save('web.pdf');
});
}
</script>
<body>
<p id="to-pdf">Generating PDF</p>
</body>
</html>
<input type="button" value="save" onclick="javascript:saveAspdf()"/>
Related
These are my files and I tried to import my files by using OnAfterRenderAsync(bool firstRender) , but after I've executed my application,I didn't see my files in the "view page source" in the browser.
This is my code please :-
_Host.chtml (Head Section)
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test</title>
<base href="~/" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.ui.touch-punch.min.js" type="text/javascript"></script>
<script src="/Scripts/allinone_bannerRotator.js" type="text/javascript"></script>
<script>
jQuery(function () {
jQuery('#allinone_bannerRotator_universal').allinone_bannerRotator({
skin: 'universal',
width: 893,
height: 496,
responsive: true,
thumbsWrapperMarginBottom: -35,
showNavArrows: false,
showCircleTimer: false,
showCircleTimerIE8IE7: false,
autoHideBottomNav: false,
showPreviewThumbs: false
});
});
</script>
</head>
_Host.chtml (BodySection)
<body>
<script src="_framework/blazor.server.js"></script>
</body>
**MainLayout.razor **
#code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JSRuntime.InvokeAsync<IJSObjectReference>("import", "https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js");
await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./Scripts/jquery-ui-1.8.16.custom.min.js");
await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./Scripts/jquery.ui.touch-punch.min.js");
await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./Scripts/allinone_bannerRotator.js");
}
}
}
Note :- When I move blazor.server.js from body to head , everything working fine.
Could anyone helps me please ?
I have problem in using ui-grid with components in angularjs version > 1.5. Can someone help me to give me a method to do that? Because I don't use scope and in the documentation of ui-grid is for angular last than 1.5
I tried this code and doesn't show the table with information :
(function(){
'use strict';
angular.module('app', ['ngTouch', 'ui.grid'])
.component('exampleComponent', {
controller: MainController,
controllerAs:'vm',
templateUrl:'index.html',
bindings:{
propertyToBind: '='
},
template: `
<div>
<p>PropertyThatIWantToBindAndShowInComponentInCellTemplate: {{ ctr.propertyToBind }}</p>
</div>
`
});
function MainController($http,$log){
vm.gridOptions = {};
vm.gridOptions.columnDefs = [
{ name: 'ShowScope',
// <example propertyToBind="ValueOfTheProperyThatIWantToShow"></example>
// cellTemplate:'<div title="{{COL_FIELD}}"> {{row.entity.id}} </div>'
//'<div class="ui-grid-cell-contents tooltip-uigrid" title="{{COL_FIELD}}">'
cellTemplate:'<p propertyToBind ="{{row.entity.name }}"></p> '
}
];
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function(data) {
vm.gridOptions.data = data;
});
}
})();
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<example-component>
<div ui-grid="gridOptions" class="grid"></div>
</example-component>
<script src="app.js"></script>
</body>
</html>
I have a problem while loading views using ui-router in cordova ios build. I'm using cordova angular in my application. The ui-router working fine in android build but while i'm running the app using cordova emulate ios the views not getting loaded.
here is my code looks like,
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Awesome material design app</title>
<link rel="stylesheet" href="node_modules/angular-material/angular-material.css">
<link rel="stylesheet" href="lib/ionic/css/ionicons.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/ngPercentDisplay.css">
<script src="node_modules/angular/angular.js"></script>
<script src="lib/angular-ui-router.min.js"></script>
<script src="node_modules/angular-aria/angular-aria.js"></script>
<script src="node_modules/angular-animate/angular-animate.js"> </script>
<script src="node_modules/angular-material/angular-material.js"></script>
<script src="node_modules/angular-local-storage/dist/angular-local-storage.js"></script>
<script src="lib/angular-touch.min.js"></script>
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<script src="js/index.js"></script>
<script src="js/controller.js"></script>
<script src="js/router.js"></script>
</head>
<body ng-app="YourApp">
<div layout="column">
<ng-include src="'templates/partials/sidebar.html'" style="top:0px" ng-if ="lang =='ENGLISH'"></ng-include>
<ng-include src="'templates/partials/sidebar-right.html'" style="top:0px" ng-if ="lang =='ARABIC'"></ng-include>
<div ui-view></div>
</div>
</body>
</html>
The router.js file looks like below
app.config(['$urlRouterProvider', '$stateProvider','$compileProvider', function($urlRouterProvider, $stateProvider,$compileProvider) {
$urlRouterProvider.otherwise('/signup');
$stateProvider.state('signup', {
url:'/signup',
templateUrl: 'templates/sign-up.html',
controller: 'signupCtrl'
});
}]);
The index.js file looks like
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
}
};
app.initialize();
controller.js looks like below,
'use strict';
var app = angular.module( 'YourApp', [ 'ngMaterial','ui.router']);
app.controller('myCtrl',['$scope',function ($scope) {
$scope.detail={};
$scope.detail.name="MyApp";
$scope.detail.desc="welcome to my app!";
}]);
Please help me if any one knows about this issue. Thanks in advance.
I have a grid page with easyui expanded row in it.
now I want to expand the row to show details, so the detail page html list below:
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head runat="server">
<title>谱系信息树</title>
<link href="../../Template/css/common.css" rel="stylesheet" type="text/css" />
<link href="../../Theme/View.css" rel="stylesheet" type="text/css" />
<link href="../../Scripts/dtree/dtree.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/dtree/vertdtree.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript" language="javascript">
mytree = new dTree('mytree');
#Html.Raw(ViewData["pTree"].ToString());
document.write(mytree);
</script>
</body>
</html>
in my grid page, when I expand the row, the ajax will be trigger to send request to detail page:
onExpandRow: function (index, row) {
var ddv = $(this).datagrid('getRowDetail', index).find('div.ddv');
ddv.panel({
height: 170,
border: false,
cache: false,
href: 'PedigreeNewChart?mid=' + row.mothor_id + "&fid=" + row.father_id,
onLoad: function () {
$('#dg').datagrid('fixDetailRowHeight', index);
}
});
$('#dg').datagrid('fixDetailRowHeight', index);
}
But now , when I expand to get the detail page, an error throw to me (firebug):
I have the needed js file(vertdtree.js) included in the detail page, but why it can't recognize it?
dTree is not loadded.
probably issue is how you include script
<script src="../../Scripts/dtree/vertdtree.js" type="text/javascript"></script>
but it should be
<script src="~/Scripts/dtree/vertdtree.js" type="text/javascript"></script>
i get an empty array when i call the youtube getAvailableQualityLevels() function, but why?
The video has many quality-levels like 360p 480p ... 720p
DEMO:
http://jsbin.com/eyexah/1/edit
YT API Doc https://developers.google.com/youtube/js_api_reference#GettingReference
CODE:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js" type="text/javascript"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<script type="text/javascript" language="javascript">
var params = { allowScriptAccess: "always" };
var atts = { id: "youtube_player" };
swfobject.embedSWF('http://www.youtube.com/v/ZGx2WUbhnyM?enablejsapi=1&playerapiid=ytplayer&version=3',
'youtube',
'425',
'356',
'8',
null,
null,
params,
atts);
</script>
<script type="text/javascript" language="javascript">
function onYouTubePlayerReady()
{
console.log('# onYouTubePlayerReady');
var ytp = document.getElementById("youtube_player");
var getQuali = ytp.getAvailableQualityLevels();
console.log(getQuali);
};
</script>
</head>
<body>
<div id="youtube"></div>
</body>
</html>
This would work if the state would be playing (or 1).
add a listener for onStateChange events in your onYouTubePlayerReady function:
ytp.addEventListener('onStateChange', 'onPlayerStateChange');
and add the onPlayerStateChange function, for example:
function onPlayerStateChange(event)
{
var getQuali = ytp.getAvailableQualityLevels();
}
See a working example based on your code: http://jsbin.com/eyexah/6/edit
You can retrieve when the state is 'playing.'
Check onPlayerStateChange(event)