I'm developing an app in AngularJs, which has to display a server generated pdf to the user.
Using pdf.js I successfully downloaded and displayed a pdf, the issue is that now I have to provide to the user a functionality to print it.
I see two ways:
When the button is clicked, open a new window and re-download the pdf to show the print preview. But this'll overload the server;
Download the pdf somewhere with angular, and let pdf.js only to render it, then to print use the previous approach only with a local file. But I don't know where save the file.
I'm missing something, there are other ways?
Thank you.
Have a look at the PDF.js demo app - it includes a print button!
https://mozilla.github.io/pdf.js/web/viewer.html
There is an npm package which can do exactly this https://github.com/legalthings/angular-pdfjs-viewer
Usage
<!DOCTYPE html>
<html ng-app="app" ng-controller="AppCtrl">
<head>
<title>Angular PDF.js demo</title>
<script src="bower_components/pdf.js-viewer/pdf.js"></script>
<link rel="stylesheet" href="bower_components/pdf.js-viewer/viewer.css">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-pdfjs-viewer/dist/angular-pdfjs-viewer.js"></script>
<script src="app.js"></script>
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
.some-pdf-container { width: 100%; height: 100%; }
</style>
</head>
<body>
<div class="some-pdf-container">
<pdfjs-viewer src="{{ pdf.src }}"></pdfjs-viewer>
</div>
</body>
</html>
Related
I'm learning ReactJS and trying to run the code at https://raw.githubusercontent.com/kirupa/kirupa/master/reactjs/helloworld_batman.htm (this is from the instructions at https://www.kirupa.com/react/building_your_first_react_app.htm).
Using Chrome, "Batman" is never displayed and Chrome developer tools logs the following error:
Access to script at
'https://unpkg.com/react-dom#16.7.0/umd/react-dom.development.js'
(redirected from
'https://unpkg.com/react-dom#16/umd/react-dom.development.js') from
origin 'null' has been blocked by CORS policy: No
'Access-Control-Allow-Origin' header is present on the requested
resource.
Sure enough, when requesting react-dom.development.js directly the Network tab reveals that the header is missing.
Other items of note:
The header IS present when requesting react.development.js directly
The instructions at https://reactjs.org/docs/cdn-links.html show retrieving the files from unpkg in this way
The problem does not occur in IE 11
What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React! React! React!</title>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
<style>
#container {
padding: 50px;
background-color: #EEE;
}
#container h1 {
font-size: 144px;
font-family: sans-serif;
color: #0080a8;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
var destination = document.querySelector("#container");
ReactDOM.render(React.createElement(
"h1",
null,
"Batman"
), destination);
</script>
</body>
</html>
It turns out if I take out "crossorigin" then it works in Chrome!
There's a discussion of this at With <script crossorigin='anonymous'>, why is a script "blocked by CORS policy"?
I have started to use JSON editor library and angular wrapper from angular-tools/ng-jsoneditor.
The bug appears to be very annoying when switched to code view. Anyone had something similar?
Situation image
Situation image 2
Happens only when quotes appear on that line. Thats pretty every line for a JSON.
Using standart lib, nothing changed. I'm running out of ideas.
controller
$scope.obj = { data: null, options: { mode: 'code' } };
$scope.onLoad = function (instance) {
instance.expandAll();
};
view
<!DOCTYPE html>
<html ng-app="jsonapp" ng-controller="jsonController">
<head>
<meta charset="utf-8" />
<!-- when using the mode "code", it's important to specify charset utf-8 -->
<meta content="charset=utf-8">
<link href="jsoneditor/dist/jsoneditor.min.css" rel="stylesheet" type="text/css">
<script src="jsoneditor/dist/jsoneditor.min.js"></script>
</head>
<body>
<div ng-jsoneditor="onLoad" ng-model="obj.data" options="obj.options" style="height:800px"></div>
</body>
</html>
I had a similar problem, after a few hours of investigation finally I find that what causing it was the font-family style(I had global font for all app).
So I override it with ng-deep:: to font-family: monospace.
This was a solution in my case!
<!DOCTYPE html>
<html>
<head>
<!-- locally referred ExtJS library files -->
<link href="ExtjsLib/ext-all.css" rel="stylesheet"
<script type="text/javascript" src="ExtjsLib/ext-all.js"></script>
<script type="text/javascript" src="ExtjsLib/ext-base.js"></script>
<script type="text/javascript"> Ext.BLANK_IMAGE_URL = "ExtjsLib/s.gif"; </script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.create('Ext.Panel', {
renderTo: 'helloWorldPanel',
height: 200,
width: 600,
title: 'Hello world',
html: 'First Ext JS Hello World Program'
});
});
</script>
</head>
<body>
<div id="helloWorldPanel" />
</body>
</html>
What's wrong in my code.I am using ExtJS 3.4.1 version and I have referred the Extjs library files locally from 'ExtLib' folder. Its displaying just the blank page as output. please help.
This line:
<!-- locally referred ExtJS library files
should be this
<!-- locally referred ExtJS library files -->
If you don't close the comment everything is a comment.
Use Library Ext.all.debug.js instead of ext.base.js.
I'm having a hard time getting Angular to work inside a Windows Universal App. I'm using Visual Studio 2015.
I'm trying to follow the instructions here: https://github.com/winjs/angular-winjs
In the html head section I have:
<!-- WinJS references -->
<link href="WinJS/css/ui-dark.css" rel="stylesheet" />
<script src="WinJS/js/base.js"></script>
<script src="WinJS/js/ui.js"></script>
<!-- angular -->
<script src="angular-winjs.js"></script>
When I run the app I get an error in the angular-winjs.js file:
var module = angular.module("winjs", []);
The error is that angular isn't defined.
So this could be something simple, but I'm having a hard time figuring out what the problem is.
The instructions say:
You must also add this module to your list of angular module
dependencies:
angular.module('your-module', ['winjs', 'other-module-you-depend-on', 'etc']);
I have no idea what my "list of angular module dependencies" is.. but since I can't even access angular I don't think that's the (main) problem.
You need WinJS libraries (ui.js, base.js and the style ui-light.css / ui-dark.css), AngularJS libraries (angular.js) and finally angular-winjs library (angular-win.js). In your code you are missing Angular library. That's why angularjs is still undefined.
Needed files to get started with angular-winjs:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.3.0/css/ui-light.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.3.0/js/base.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.3.0/js/ui.js"></script>
<script src="https://cdn.rawgit.com/winjs/angular-winjs/master/js/angular-winjs.js"></script></script>
Working sample for you to get started:
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Working sample</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.3.0/css/ui-light.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.3.0/js/base.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.3.0/js/ui.js"></script>
<script src="https://cdn.rawgit.com/winjs/angular-winjs/master/js/angular-winjs.js"></script></script>
<style>
<!-- You need define yourself the styles for templates -->
.win-listview {
width: 600px;
height: 300px;
border: solid 2px rgba(0, 0, 0, 0.13);
}
.miniTemp {
width: 282px;
height: 70px;
padding: 5px;
overflow: hidden;
display: -ms-grid;
}
</style>
</head>
<body>
<div ng-app="workingsample" ng-controller="ratingCtrl">
<!-- listview -->
<div>Selected count: {{selection.length}}, indexes: {{selection.toString()}}</div>
<win-list-view id="mylistview" item-data-source="ratings" selection="selection" items-reorderable="true">
<win-list-view-header>This is a ListView header</win-list-view-header>
<win-item-template>
<div class="miniTemp">
This list view item's rating is: {{item.data.rating}}
</div>
</win-item-template>
<win-list-layout></win-list-layout>
<win-list-view-footer>This is a ListView footer</win-list-view-footer>
</win-list-view>
</div>
<script>
angular.module("workingsample", ['winjs'])
.controller("ratingCtrl", ['$scope', function ($scope) {
$scope.ratings = [
{ "rating": "Too much" },
{ "rating": "Bigger than yours" },
{ "rating": "Too small yep" },
{ "rating": "Why me" },
{ "rating": "Rekt m9" }
];
$scope.selection = [];
}])
</script>
</body>
</html>
I am trying to implement a simple angular-flexslider app within my project:
https://github.com/woothemes/FlexSlider
I have been successful in sliding the images, but i cannot get the next/previous buttons to show, also, there seems to be a left margin which shows the previous image.
HTML:
<head>
<title>Angular FlexSlider Example - Basic Slider</title>
<link rel="stylesheet" type="text/css" href="https://raw.githubusercontent.com/woothemes/FlexSlider/master/flexslider.css">
<style type="text/css">
.flexslider-container {
width: 100%;
margin: 1px auto;
}
</style>
</head>
<body ng-controller="BasicSliderCtrl">
<flex-slider slide="s in slides" animation="slide" >
<li>
<img ng-src="{{s}}">
</li>
</flex-slider>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="https://raw.githubusercontent.com/woothemes/FlexSlider/master/jquery.flexslider.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="https://raw.githubusercontent.com/thenikso/angular-flexslider/master/angular-flexslider.js"></script>
<script type="text/javascript">
angular.module('BasicSlider', ['angular-flexslider'])
.controller('BasicSliderCtrl', function($scope) {
$scope.slides = [
'http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg',
'http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg',
'http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg',
'http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg'
];
});
</script>
</body>
</html>
Plunker: http://plnkr.co/edit/2529sAA4i6qcCzbZgCA2
Here's what i am trying to achieve: http://flexslider.woothemes.com/index.html
Thanks
I don't know if you still have this issue but I ran into both of these problems myself. The fixes that worked for me are below.
Issue 1 - next/previous buttons not showing
The next and previous buttons are shown using css. Ensure that flexslider.css is included in your page.
Also, if you open up flexslider.css you will see under an "Icon fonts" comment (its near the top) some source urls. Ensure that these source urls match the location of the flexslider font files in your project.
Issue 2 - Left Margin showing previous image
Add the following code to a css file included on your page
.carousel li {margin-right:0;}