如果我有一个PDF文件的BLOB表示,我在我的角度控制器中,我以下列方式暴露在我的
HTML页面中：
//controller
function (data) {
var fileBack = new Blob([(data)],{ type: 'application/pdf' });
var fileURL = URL.createObjectURL(fileBack);
$scope.content = $sce.trustAsResourceUrl(fileURL);
}
//html
<object ng-show="content" data="{{content}}" type="application/pdf" style="width: 100%; height: 400px;"></object>
如果我想在浏览器中显示文档时屏蔽文档的部分内容,我有什么选择？这样的情况包括我可以想到(只是想证明这是可能的btw)：
- Hiding the 2nd page of a document - Overlapping a image to hide some Width x Height space
关于如何实现这些任何想法的任何想法？如果不是从BLOB格式是可能的吗？我将会遇到什么要求来完成这样的任务.
解决方法
您可以使用此
https://github.com/akrennmair/ng-pdfviewer和
https://github.com/mozilla/pdf.js.以前,我对该指令进行了一些更改,并完成了此任务.我不会深入,但我为你做了榜样.创建的Plunker,但不知何故不能运行它
https://plnkr.co/edit/xOIYGvTFJ2bU2rawg9Wc?p=preview.这是完整的例子
https://drive.google.com/open?id=0Bzls0-jRP-7GMHFnQWJwUUxRYWs.只需在你的服务器上运行它.
angular.module('ngPDFViewer',[]).
directive('pdfviewer',['$parse',function ($parse) {
var canvas = null;
var instance_id = null;
var excludedPages = [];
return {
restrict : "E",template : "<div class='make-scrollable'></div>",scope : {
onPageLoad : '&',loadProgress : '&',src : '@',id : '=',excludedPages : '='
},controller : ['$scope',function ($scope) {
$scope.pageNum = 1;
$scope.pdfDoc = null;
$scope.scale = 1.0;
$scope.documentProgress = function (progressData) {
if ($scope.loadProgress) {
$scope.loadProgress({
state : "loading",loaded : progressData.loaded,total : progressData.total
});
}
};
$scope.loadPDF = function (path) {
console.log('loadPDF ',path);
PDFJS.getDocument(path,null,$scope.documentProgress).then(function (_pdfDoc) {
$scope.pdfDoc = _pdfDoc;
$scope.renderPages($scope.pageNum,function (success) {
if ($scope.loadProgress) {
$scope.loadProgress({
state : "finished",loaded : 0,total : 0
});
}
});
},function (message,exception) {
console.log("PDF load error: " + message);
if ($scope.loadProgress) {
$scope.loadProgress({
state : "error",total : 0
});
}
});
};
$scope.renderPages = function (num,callback) {
$scope.$apply(function () {
$scope.onPageLoad({
page : $scope.pageNum,total : $scope.pdfDoc.numPages
});
});
for (var num = 1; num <= $scope.pdfDoc.numPages; num++){
var exist = $.inArray(num,excludedPages);
if(exist===-1){
$scope.pdfDoc.getPage(num).then(function(page) {
$scope.renderPage(page,num)
})
}
}
};
$scope.renderPage = function(page,num) {
var viewport = page.getViewport($scope.scale);
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
$('.make-scrollable').append(canvas);
$('.make-scrollable').height(viewport.height - 100);
page.render({ canvasContext: ctx,viewport: viewport }).promise.then(
function() {
console.log("Rendered");
}
)
}
$scope.$on('pdfviewer.nextPage',function (evt,id) {
if (id !== instance_id) {
return;
}
if ($scope.pageNum < $scope.pdfDoc.numPages) {
$scope.pageNum++;
$scope.renderPage($scope.pageNum);
}
});
$scope.$on('pdfviewer.prevPage',id) {
if (id !== instance_id) {
return;
}
if ($scope.pageNum > 1) {
$scope.pageNum--;
$scope.renderPage($scope.pageNum);
}
});
$scope.$on('pdfviewer.gotoPage',id,page) {
if (id !== instance_id) {
return;
}
if (page >= 1 && page <= $scope.pdfDoc.numPages) {
$scope.pageNum = page;
$scope.renderPage($scope.pageNum);
}
});
}
],link : function (scope,iElement,iAttr) {
canvas = iElement.find('canvas')[0];
instance_id = iAttr.id;
excludedPages = scope.$parent.excludePages;
iAttr.$observe('src',function (v) {
console.log('src attribute changed,new value is',v);
if (v !== undefined && v !== null && v !== '') {
scope.pageNum = 1;
scope.loadPDF(scope.src);
}
});
}
};
}
]).
service("PDFViewerService",['$rootScope',function ($rootScope) {
var svc = {};
svc.nextPage = function () {
$rootScope.$broadcast('pdfviewer.nextPage');
};
svc.prevPage = function () {
$rootScope.$broadcast('pdfviewer.prevPage');
};
svc.Instance = function (id) {
var instance_id = id;
return {
prevPage : function () {
$rootScope.$broadcast('pdfviewer.prevPage',instance_id);
},nextPage : function () {
$rootScope.$broadcast('pdfviewer.nextPage',gotoPage : function (page) {
$rootScope.$broadcast('pdfviewer.gotoPage',instance_id,page);
}
};
};
return svc;
}
]);
