I want to display menus which can be image as well as pdf .
I am using ng-pdfviewer to achieve this . My controller code is ::
venueApp.controller('venueController',['$scope',PDFViewerService',function($scope,pdf){
$scope.viewer = pdf.Instance("viewer");
$scope.pageLoaded = function(curPage, totalPages) {
$scope.currentPage = curPage;
$scope.totalPages = totalPages;
};
$scope.nextPage = function() {
$scope.viewer.nextPage();
};
$scope.prevPage = function() {
$scope.viewer.prevPage();
};
}]);
and my html code is ::
<a id="image_{[ menu.id ]}" ng-if="menu.filename.indexOf('.pdf') > -1">
<button ng-click="prevPage()"><</button>
<button ng-click="nextPage()">></button>
<br>
<span>{[currentPage]}/{[totalPages]}</span>
<br>
<pdfviewer src="{[menu.menu_url]}" on-page-load='pageLoaded(page,total)' id="viewer"></pdfviewer>
</a>
I am using {[]} for expression evalutaion because i configured it to . Now in my console , the plugin is outputting the correct messages i guess
Printed in console by this plugin
src attribute changed, new value is https://d1hpn7r5i0azx7.cloudfront.net/uploads/menu/18/ankush.pdf
loadPDF https://d1hpn7r5i0azx7.cloudfront.net/uploads/menu/18/ankush.pdf
Warning: Deprecated API usage: getDocument is called with pdfDataRangeTransport, passwordCallback or progressCallback argument -- printed by pdf.js
But the pdf is not being painted . My DOM element for the padf viewer tag is ::
<pdfviewer src="https://d1hpn7r5i0azx7.cloudfront.net/uploads/menu/18/ankush.pdf" on-page-load="pageLoaded(page,total)" id="viewer" class="ng-isolate-scope"><canvas></canvas></pdfviewer>
I dont understand what is the issue . Maybe it is with the pdf file as chrome also does not display it , instead just downloads it . the link for the sample pdf is ::
https://d1hpn7r5i0azx7.cloudfront.net/uploads/menu/18/ankush.pdf
Also i am posting this question in SO instead of just posting it in the github plugin page because i seriously think it has to do something with the pdf file instead od the plugin .
P.S it is not my CV , just took one from the pool of applicants in our company :P
I have used http://viewerjs.org/ for offline pdf with angular. But here it seems you have online pdf path . So why are you not trying google document viewer ? It is best for online documents.
Please look at following link:
https://docs.google.com/gview?url=http://infolab.stanford.edu/pub/papers/google.pdf
you need to change url parameter with your path.
Also you can use this link in your website with iframe as following:
<iframe src="http://docs.google.com/gview?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>
Related
I have a PDF file stored in a directory within the application (assets/pdf/fileName.pdf). I need to display it on a new tab on a button click from a dialog.
Here is what I have, after looking at various answers:
In *.component.ts:
openPDF() {
this.myService.fetchPDF().subscribe(
res => {
let file = new window.Blob([res], {type: 'application/pdf'});
let fileURL = window.URL.createObjectURL(file);
window.open(fileURL, '_blank');
}
);
}
In *.service.ts:
fetchPDF(): any {
const path = 'assets/pdf/fileName.pdf';
return this.httpClient.get(PathResolver.resolveStatic(path),{responseType : 'blob'});
}
I already tried using responseType : 'arraybuffer', but it didn't work out either.
Here are the threads I have looked at:
How to Display blob (.pdf) in an AngularJS app
Angular 2 download PDF from API and Display it in View
PDF Blob - Pop up window not showing content
Failed to load PDF document - Angular JS - BLOB
I am not sure why are you using httpClient. The outcome that you want could be simply achieved by the following code
In *.service.ts:
fetchPDF(): any {
const path = 'assets/pdf/fileName.pdf'
return path;
}
In *.component.ts:
openPDF() {
window.open(this.myService.fetchPDF(), '_blank');
}
You will either need to use the html embed tag (most likely also using a safe pipe), a PDF viewer (like Google PDF Viewer) or you can open the PDF in a new tab (this is the more common approach I see). It depends on your preference.
I have a JSON array of objects that is a result of a function in nodejs. I use json2xls to convert that to an excel file, and it downloads to the server (not in a public folder, and is formatted correctly in Excel).
I would like to send a response to the frontend with the json results (to display as a preview) and show a button they can click to download the xlsx file OR display the JSON results and automatically download the file.
But I can't get it, and I've tried so many things I'm going crazy.
My controller code (the part that creates the xls file):
var xls = json2xls(results,{});
var today = (new Date()).toDateString('yyyy-mm-dd');
var str = today.replace(/\s/g, '');
var fileName = "RumbleExport_"+ str +".xlsx";
var file = fs.writeFileSync(fileName,xls,'binary');
res.download('/home/ubuntu/workspace/'+file);
The frontend controller:
vm.exportData = function(day, event, division) {
console.log('Export registrations button pressed.', vm.export);
//send the search parameters to the backend to run checks
$http.post('/api/exportData', vm.export).then(function(response){
vm.results = response.data;
console.log("Results",response);
vm.exportMessage = "Found " + vm.results.length + " registrations.";
})
.catch(function(error){
vm.exportError = error.data;
});
};
The view:
//display a button to download the export file
<a target="_self" file="{{vm.results}}" download="{{vm.results}}">Download Export File</a>
Someone please put me out of my misery. All the classes I've taken and none have covered this.
I FINALLY got it! And since I searched forever trying to make something work, I'll share the answer:
On the backend:
//save the file to the public/exports folder
var file = fs.writeFileSync('./public/exports/'+fileName,xls,'binary');
//send the results to the frontend
res.json(200).json({results:results, fileName: fileName});
On the frontend, use HTML to download a link to the file:
<a href="exports/{{fileName}}" download>Save File</a>
I come here because I use the CameraPreview class from ionic-native in my ionic 2 project to take a picture, and I actually struggle with the path of the picture which is something like : assets-library://asset/asset.JPG?id=...
That type of URL is obviously impossible to render in the DOM, and I want to know how to convert it into a supported URL for the img or ion-img tag.
I tried to convert it using File.readAsDataURL() as it is suggested in the following links, but the promise return an empty string.
https://www.npmjs.com/package/cordova-camera-preview
http://ionicframework.com/docs/v2/native/file/
You can load it via http as a Blob and then set that as the src for an img.
Example below:
this.http.get(fileURI, new RequestOptions({responseType:ResponseContentType.Blob}))
.subscribe(
data => {
var blob = data.blob();
this.previewImage = this.sanitize(URL.createObjectURL(blob));
this.cd.detectChanges();
});
Make note of the sanitize function. This is required to bypass default browser security - see https://stackoverflow.com/a/37432961/3446442
In this example the img tag is bound to the previewImage variable:
<div [style.width.px]="cameraSize" [style.height.px]="cameraSize">
<img id="preview" [src]="previewImage">
</div>
I have been using the following awesome plugin 'angularAudioRecorder' to build a simple voice recorder app in AngularJS/Ionic. Been messing with CordovaMedia and ngCordova media plugins for days, then this dropped in and worked a treat.
My issue now is that I can't seem to reference to the recorded blob in my apps controller.
See below for the snippet of the html which works a charm.
<ng-audio-recorder id='audioInput' audio-model='recordedInput' time-limit='2' on-record-complete="finished()">
<!-- Start controls, exposed via recorder-->
<div ng-if="recorder.isAvailable">
<a ng-click="recorder.status.isRecording ? recorder.stopRecord() : recorder.startRecord()" id="recordBarK-button10" style="color:#F5AA2C;" class="button button-light button-large button-block button-outline" ng-class="{'btn-primary': !recorder.status.isRecording, 'btn-danger': recorder.status.isRecording}">{{recorder.status.isRecording ? 'Stop' : 'Start'}} Recording</a>
</div>
</ng-audio-recorder>
And here is my controller for the template:
.controller('recordBarKCtrl', function($scope, $state, $ionicLoading) {
$scope.finished = function() {
alert("im done recording now");
alert($scope.audioInput.size);
//$state.go('previewBarK');
}
})
The finished function gets called fine, but the issue is I can't seem to reference the audio recording, which is I believe supposed to be available vie the 'audio-model' I defined as recordedInput. I am probably getting something very basic wrong here but I hope someone help me out of the dark.
plugin docs are here: http://logbon72.github.io/angular-recorder/
I tried to check out the demo. But it didn't work.
And I found this:
As per new chrome update (From Google Chrome 47), getUserMedia() is no longer supported in chrome browser over http:// (Unsecure Origin) , It will work on https:// (Secure Origin)
It means you need https to be able to make this thing working. There are a number of WebRTC solutions. But I guess now, they also need HTTPS.
pass the recorder object to your function like following :
<ng-audio-recorder id='audioInput_<% audio_to_client_id %>' audio-model='recordedInput'
on-conversion-complete="finished(recorder)"
on-record-start="clearPrevRecord()">
and in your controller do the following :
$scope.audio_blob = null
$scope.record_object = null
$scope.finished = function(record) {
$scope.audio_blob = record.audioModel
$scope.record_object = record
}
then you are able to get the blob object the record object in your controller.
I need to create site with video which have autoplay and depend on profile which user selected. So in angular i created template popupVideo:
<video id="example_video_1" class="video-js vjs-default-skin"
controls autoplay preload="auto" height="100%" width="100%">
<source ng-repeat="vidObj in fullScreenVideoUrl" src="{{vidObj.url}}" type="{{vidObj.type}}"/>
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video>
Then in controller i have code:
function showPopupVideo() {
$scope.fullScreenVideoUrl = [];
var webm = {};
webm.url = $scope.currentProfile.video_full + ".webm";
webm.type = "video/webm";
$scope.fullScreenVideoUrl.push(webm);
var mp4 = {};
mp4.url = $scope.currentProfile.video_full + ".mp4";
mp4.type = "video/mp4";
$scope.fullScreenVideoUrl.push(mp4);
var ogg = {};
ogg.url = $scope.currentProfile.video_full + ".ogv";
ogg.type = "video/ogg";
$scope.fullScreenVideoUrl.push(ogg);
ngDialog.open({
template: 'scripts/contents/template/popupVideo.html',
className: 'popup-fullscreen',
scope: $scope
});
}
So all work fine in Chrome and IE, window opens video starts and playing.
But in FF all going wrong, when window opened first time, it started to download (according to network monitor) but NO autoplay, also in console i could see:
Specified "type" attribute of "{{vidObj.type}}" is not supported. Load of media resource {{vidObj.url}} failed. localhost:3000
All candidate resources failed to load. Media load paused. localhost:3000
All candidate resources failed to load. Media load paused.
However! If i press play it start playing video!
Then if i close this window and open again, it show in console same text about not supported, BUT now it started to play video and in same time show on it text that "No video with supported format and MIME type found" how is it possible??? It cant find and it playing it in same time...
Probably too late but what you need to do is use ng-src="{{vidObj.url}}" instead of src="{{vidObj.url}}"