Acá les mando el código y la imagen para que se den una idea.
Código HTML:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>PEM</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/style.css"> <style> *{box-sizing: border-box;} .wrapper {margin: 0 auto; width: 960px; } .pdf-controls { width: 100%; display: block; background: #eee; padding: 1em;} .rotate0 {-webkit-transform: rotate(0deg); transform: rotate(0deg); } .rotate90 {-webkit-transform: rotate(90deg); transform: rotate(90deg); } .rotate180 {-webkit-transform: rotate(180deg); transform: rotate(180deg); } .rotate270 {-webkit-transform: rotate(270deg); transform: rotate(270deg); } .fixed { position: fixed; top: 0; left: calc(50% - 480px); z-index: 100; width: 100%; padding: 1em; background: rgba(238, 238, 238,.9); width: 960px; } </style> </head> <body ng-app="pem"> <div ng-controller="uploaderFile"> <button type="button" class="w-25 h-25" ngf-select ng-model="file" ngf-pattern="'.pdf'" ngf-accept="'.pdf'" ngf-max-size="200MB">Seleccione Archivo</button> <br> <button class="w-25 h-25" type="submit" ng-click="submit()">Subir</button> <ul> <li>Nombre del Archivo: {{file.name }}</li> <li>Tamaño del Archivo: {{file.size/1024|number:2 }} KB</li> <li>Tipo de Archivo: {{file.type.slice(file.type.lastIndexOf('/') + 1)}} </li> </ul> <div ng-show="isProcessing"> <img class="img-thumbnail" src="images/loader.gif" /> </div> <div style="margin:1%; color:red; position: relative; z-index:10000;" ng-show="showMsg"> <div class="alert alert-success"> {{msg}} </div> </div> <br> <input type="search" ng-model="search" placeholder="Filtrar Resultados"/> <ul> <li ng-repeat="file in files | filter:search as results" ><a ng-href="{{getSrc(file._name)}}" target="_blank">{{file._name}}</a></li> </ul> </div> <div ng-controller="pdfController"> <div class="container"> <div class="wrapper"> <ng-pdf template-url="assets/viewer.html" canvasid="pdf" scale="page-fit" page=1></ng-pdf> </div> </div> </div> <script src="js/angular.min.js"></script> <script src="js/ng-file-upload-shim.js"></script> <script src="js/ng-file-upload.js"></script> <script src="js/mainapp.js"></script> <script src="assets/pdf.js"></script> <script src="assets/angular-pdf.min.js"></script> </body> </html>
Código:
y el html que descargué para el visor:var app = angular.module('pem', ['ngFileUpload', 'pdf']);
app.controller('uploaderFile', ['$scope', 'Upload', '$http','$timeout', function ($scope, Upload, $http, $timeout) {
$scope.submit = function() {
if ($scope.file) {
$scope.upload($scope.file);
}
};
$scope.isProcessing = false;
$scope.upload = function (file) {
$scope.isProcessing = true;
Upload.upload({
url: 'upload.php',
data: {file}
}).then(function (resp) {
console.log('Success ' + resp.config.data.file.name + ' uploaded. Response: ' + resp.data);
$scope.read();
$scope.isProcessing = false;
$scope.msg = resp.data;
$scope.alert();
}, function (resp) {
console.log('Error status: ' + resp.status);
$scope.msg = error.data;
$scope.isProcessing = false;
$scope.alert();
}, function (evt) {
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
});
};
$scope.alert = function(){
$scope.showMsg = true;
$timeout(function() {
$scope.showMsg = false;
}, 6000);
}
$scope.read = function(){
var request = $http({
method : 'GET',
url : 'request.php',
});
request.then(function(response){
$scope.files = response.data;
var path = response.data;
console.log(path);
}, function(error){
alert(error.data);
});
}
$scope.getSrc = function(src) {
return 'files/' + src;
};
angular.element(document).ready(function(){
$scope.read();
});
}]);
app.controller('pdfController', function($scope) {
$scope.pdfUrl = 'assets/sample.pdf';
$scope.pdfName = 'Archivo';
$scope.scroll = 0;
$scope.loading = 'Cargando';
$scope.getNavStyle = function(scroll) {
if(scroll > 100) return 'pdf-controls fixed';
else return 'pdf-controls';
}
$scope.onError = function(error) {
console.log(error);
}
$scope.onLoad = function() {
$scope.loading = '';
}
$scope.onProgress = function (progressData) {
console.log(progressData);
};
});
Código HTML:
<!DOCTYPE html> <!-- Copyright 2012 Mozilla Foundation Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. Adobe CMap resources are covered by their own copyright but the same license: Copyright 1990-2015 Adobe Systems Incorporated. See https://github.com/adobe-type-tools/cmap-resources --> <html dir="ltr" mozdisallowselectionprint moznomarginboxes> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="google" content="notranslate"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>PDF.js viewer</title> <link rel="stylesheet" href="viewer.css"> <!-- This snippet is used in production (included from viewer.html) --> <link rel="resource" type="application/l10n" href="locale/locale.properties"> <script src="l10n.js"></script> <script src="../build/pdf.js"></script> <script src="viewer.js"></script> </head> <body tabindex="1" class="loadingInProgress"> <nav ng-class="getNavStyle(scroll)"> <button ng-click="goPrevious()"><span><</span></button> <button ng-click="goNext()"><span>></span></button> <button ng-click="zoomIn()"><span>+</span></button> <button ng-click="fit()"><span>100%</span></button> <button ng-click="zoomOut()"><span>-</span></button> <button ng-click="rotate()"><span>90</span></button> <span>Page: </span> <input type="text" min=1 ng-model="pageNum"> <span> / {{pageCount}}</span> <span>Document URL: </span> <input type="text" ng-model="pdfUrl"> </nav> <hr> {{loading}} <canvas id="pdf" class="rotate0"></canvas> </body> </html>
Desde ya les agradecería su ayuda, porque a he intentado todo lo que está a mi alcance. Gracias.
