Angularjs 指令示例_h5 angularjs pdf预览-优快云博客

本文介绍了一个用于预览PDF文件的自定义AngularJS指令。该指令能够根据提供的附件信息判断文件类型，并只对PDF文件进行预览。同时提供了一个示例性的调用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

pdf文件预览指令
1.指令定义

app.directive('embedPdf', function() {
    return {
        restrict: 'E',
        scope: {
            attachment: '=attachment'
        },
        template:'',
        link: function(scope, element, attrs) {
            function showAttachment(attachment) {
                if (!attachment) {
                    element.html('<div align="center">文件不存在。</div>');
                }else if(!(attachment.mimeType == 'application/pdf')){
                    element.html('<div align="center"><h3>文件不是PDF格式文件,无法预览。</h3></div>');
                }else if(attachment.mimeType == 'application/pdf'){
                    element.html('<embed width="850px" height="495px" src="' + app.contextPath + '/attachments/file/' + attachment.name + '" type="application/pdf"></embed>');
                }
            }
            scope.$watch('attachment', function(nv, ov) {
                showAttachment(nv);
            });
            showAttachment(scope.attachment);
        }
    };
});

2.js代码

 $scope.view = function(id){
         jddoclstRes.findAttach({'attId':id},{},function(r){
             $scope.attachment = r;
         });             
         $scope.viewDlg.visible = true;
     }