个人总结
这里使用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/