实现pdf、jpg、png等预览

个人总结

这里使用object元素来实现pdf、图片等预览显示效果。

预览弹框html页

<div style="min-height:300px;">
    <div class="text-left" ng-hide="isHideToolBar" style="width:5%;float:left;"><span ng-click="overturnModal()" class="glyphicon glyphicon-repeat" style="font-size: 30px;margin: 10px;"></span></div>
    <div class="text-left" ng-hide="isHideToolBar" style="width:5%;float:left;"><span ng-click="magnifyModal()" class="glyphicon glyphicon-zoom-in" style="font-size: 30px;margin: 10px;"></span></div>
    <div class="text-left" ng-hide="isHideToolBar" style="width:5%;float:left;"><span ng-click="shrinkModal()" class="glyphicon glyphicon-zoom-out" style="font-size: 30px;margin: 10px;"></span></div>
    <div class="text-right" style="width:25%;float:right;"><span ng-click="closePdfModal()" class="glyphicon glyphicon-remove-circle" style="font-size: 30px;margin: 10px;"></span></div>
    <div id="previewModal" style="max-height:600px;width:100%;"><div ng-hide="content" style="text-align:center;font-size:25px;">正在努力请求文档内容，请稍后...</div>
    <div ng-show="content&&isHideToolBar" style="height: 47px;background-color: #525659; position: fixed;width: 110px; margin-left: 764px;top:51px;z-index:1"></div>
    <object id="overturn" standby="正在努力加载文档内容，请稍后..." ng-show="content" data="{{content}}" type="' + mediaTypes + '" style="width: 100%;' + heightStyle + '"></object></div>
</div>

补充：当前object元素的属性解释
	 standby：请求还在加载的时候显示的文字（text）
	 ng-show：这里不做讲解
	 data：定义引用对象数据的 URL。如果有需要对象处理的数据文件,要用 data 属性来指定这些数据文件。（url）
	 type：定义被规定在 data 属性中指定的文件中出现的数据的 MIME 类型。（MIME_type）当前元素的类型是"application/pdf"

封装的服务

(function () {
    var app = angular.module("app");
    app.factory("commonService", ['$http', '$sce', 'serverDomain', 'httpService', "$uibModal", function ($http, $sce, serverDomain, httpService, $uibModal) {
        var service = {};

        //预览打印pdf--模态框形式
        //url :生成文件流的接口
        //paramData：接口需要的参数
        //isHideToolBar：是否隐藏工具栏（禁用下载，打印等功能）
        //type:文件后缀名，可以带点，也可以不带点
        service.printPdfOnModal = function (url, paramData, isHideToolBar, type) {
            if (!url) {
                return;
            }
            if (!paramData) { paramData = {}; }

            var mediaTypes = "application/pdf";
            var heightStyle = "height:1000px;";

            var extensions = ["png", ".png", "jpg", ".jpg", "jpeg", ".jpeg"];
            if (extensions.indexOf(type) !== -1) {
                mediaTypes = "image/png";
                heightStyle = "";
                isHideToolBar = false;   // 如果是图片，那么导航条不需要显示
            }


            var uibModalOption = {
                template: '<div style="min-height:300px;"><div class="text-left" ng-hide="isHideToolBar" style="width:5%;float:left;"><span ng-click="overturnModal()" class="glyphicon glyphicon-repeat" style="font-size: 30px;margin: 10px;"></span></div><div class="text-left" ng-hide="isHideToolBar" style="width:5%;float:left;"><span ng-click="magnifyModal()" class="glyphicon glyphicon-zoom-in" style="font-size: 30px;margin: 10px;"></span></div><div class="text-left" ng-hide="isHideToolBar" style="width:5%;float:left;"><span ng-click="shrinkModal()" class="glyphicon glyphicon-zoom-out" style="font-size: 30px;margin: 10px;"></span></div><div class="text-right" style="width:25%;float:right;"><span ng-click="closePdfModal()" class="glyphicon glyphicon-remove-circle" style="font-size: 30px;margin: 10px;"></span></div><div id="previewModal" style="max-height:600px;width:100%;"><div ng-hide="content" style="text-align:center;font-size:25px;">正在努力请求文档内容，请稍后...</div><div ng-show="content&&isHideToolBar" style="height: 47px;background-color: #525659; position: fixed;width: 110px; margin-left: 764px;top:51px;z-index:1"></div><object id="overturn" standby="正在努力加载文档内容，请稍后..." ng-show="content" data="{{content}}" type="' + mediaTypes + '" style="width: 100%;' + heightStyle + '"></object></div></div>',
                size: "lg",
                backdrop: "static",
                controller: "app.common.openPdfInBrowser",
                resolve: {
                    url: function () { return url },
                    paramData: function () { return paramData },
                    isHideToolBar: function () { return isHideToolBar },
                    type: function () { return mediaTypes }
                }
            }
            var uibModalInstance = $uibModal.open(uibModalOption);
        }

        //预览打印pdf--在新的网页
        service.printPdfOnBlank = function (url, paramData) {
            if (!url) {
                return;
            }
            if (!paramData) { paramData = {}; }

            abp.ui.setBusy("#mianBody");

            $http.get(url,
                {
                    responseType: 'arraybuffer',
                    params: paramData,
                })
                .then(function (msg) {
                    abp.ui.clearBusy("#mianBody");
                    var file = new Blob([msg.data], { type: 'application/pdf' });
                    var fileURL = URL.createObjectURL(file);
                    var data = '<div><object data="' + fileURL + '" standby="正在努力加载内容，请稍后..." type="application/pdf" style="width: 100%; height: 1000px;"></object></div>';
                    var myWin = window.open("", "订单详情打印");
                    myWin.document.write(data);
                    myWin.focus();
                });
        }

        // 公共封装，pdf，jpg，png预览，其他文件下载
        // 参数file是传入的单个文件
        service.previewAndDownload = function (file) {
            if (file.type == ".pdf" || file.type == ".jpg" || file.type == ".png") {
                var url = serverDomain + "api/services/app/UploadFile/GetFileToStream";  // 预览
                var data = {
                    FileType: file.type,
                    AttacthmentStr: file.fileId
                };
                service.printPdfOnModal(url, data, true, file.type);
            } else {
                var url = serverDomain + "api/services/app/UploadFile/GetDownFile";   // 下载
                var param = { fileId: file.fileId };
                httpService.DownloadFile(url, param);
            }
        }

        return service;

    }]);
})();

对应的controller

(function () {
    var ctrlId = "app.common.openPdfInBrowser"
    app.controller(ctrlId, [
        '$scope', '$uibModalInstance', '$http', '$sce', 'serverDomain', 'httpService',
        function ($scope, $uibModalInstance, $http, $sce, serverDomain, httpService) {
            var url = $scope.$resolve.url;
            var data = $scope.$resolve.paramData;
            var type = $scope.$resolve.type;
            $scope.isHideToolBar = $scope.$resolve.isHideToolBar;//是否隐藏工具栏，true为隐藏，默认false，显示工具栏

            $http.get(url,
                {
                    responseType: 'arraybuffer',
                    params: data,
                })
                .then(function (msg) {
                    var file = new Blob([msg.data], { type: type });
                    var fileURL = URL.createObjectURL(file);
                    $scope.content = $sce.trustAsResourceUrl(fileURL);
                });

            var cont = 0;

            var size = 100;

            // 翻转
            $scope.overturnModal = function () {   // 翻转功能
                cont += 90;
                $("#overturn").css("transform", "rotate(" + cont + "deg)");
            }
            // 放大
            $scope.magnifyModal = function () {
                var overturnHeight = $("#overturn").height();  // 获取需要放大的容器高度
                size += 10;
                overturnHeight += 50;
                $("#previewModal").css("overflow", "auto");   // 点击放大的时候说明是图片，给图片容器的父元素加上滚动条样式
                $('#overturn').css("width", " " + size + "%");
                $('#overturn').css("height", " " + overturnHeight + "px");
            }
            // 放小
            $scope.shrinkModal = function () {
                var overturnHeight = $("#overturn").height();  // 获取需要放大的容器高度
                size -= 10;
                overturnHeight -= 50;
                $("#previewModal").css("overflow", "auto");
                $('#overturn').css("width", " " + size + "%");
                $('#overturn').css("height", " " + overturnHeight + "px");
            }

            //关闭pdf预览
            $scope.closePdfModal = function () {
                $uibModalInstance.dismiss("cancel");
            }
        }
    ]);

})();

调用方式

//打印-模态框形式
        $scope.previewClick = function (item, idx) {
            //console.log('eeeeeeeeeeeeeeeee-----', item);
            if (item.type == ".pdf" || item.type == ".jpg" || item.type == ".png") {
                var url = serverDomain + "api/services/app/UploadFile/GetFileToStream";  // 预览
                var data = {
                    FileType: item.type,
                    AttacthmentStr: item.fileId
                };
                commonService.printPdfOnModal(url, data, true, item.type);
            } else {
                var url = serverDomain + "api/services/app/UploadFile/GetDownFile";   // 下载
                var data = { fileId: item.fileId };
                httpService.DownloadFile(url, data);
            }
        }

object属性的详细讲解相关网址：https://blog.csdn.net/tanguang_honesty/article/details/8530731
https://segmentfault.com/q/1010000016964789/