pdf.js预览pdf文件,pdf文件在线预览,科蓝pe框架文件下载
pdf.js预览pdf文件,pdf文件在线预览,科蓝pe框架文件下载
在一个项目中特别是又大又老的项目,一般在改需求是尽量改动的地方不要太多,尽量不要动底层及底层配置,尽量不要动jar包,不要新加js包或jar包,因为新加jar包容易导致与老jar包冲突,对程序运行不稳定,一些大企业大项目及银行项目也不允许开发人员随意添加jar包及改动底层的;我这次接到的需求是在线预览pdf文件,我并没有用pdf.js,因为需要导入pdf.js所以我不用pdf.js;我这边的项目是前后端分离的项目,前端是科蓝的vx前端框架里面就是用Angularjs写的,后端是科蓝pe框架;
第一种方法:
第一种方法是我在后台将文件byte数据用Base64编码,然后给前端显示,前端用iframe框架显示;
iframe框架显示pdf文件的效果还可以:
页面上自带下载 打印 缩放 旋转;
不要用$("#Id").attr("src",pdfBase64) 进行数据绑定[没有作用];
注:此pdf文件在线预览方法只能在谷歌游览器中正常使用,IE没能显示出来;
pdf在线预览
@funcName pdf在线预览
@trsName pdf在线预览
@author sukai
@version 1.0
@remark
@fromPages
xxxxxAction
json,
科蓝pe框架文件下载
@funcName 文件下载
@trsName 文件下载
@author lmk
@version 1.0
@remark
@fromPages
xxxxxeAction
download,
pdf预览与文件下载用的同一个Action:
${sftpServerIp1}
${sftpServerPort1}
${sftpUserName1}
${sftpPassword1}
${sftpServerPath1}
${sftpUserProxy}
DownloadFileAction :
public class xxxxxxxxAction extends xxxxxxAction {
private String sftpServerIp;
private int sftpServerPort;
private String sftpServerPath;
private String sftpUserName;
private String sftpPassword;
private boolean sftpUserProxy;
private String sftpProxyHost;
private int sftpProxyPort;
@SuppressWarnings({ "unchecked", "unused" })
public void execute(Context context) throws PeException {
Map map=context.getDataMap();
try {
String fileName= context.getString("FileName");
String filePathName= context.getString("FilePath");
SFtpFileTransfer sftp = new SFtpFileTransfer();
sftp.setServerIp(sftpServerIp);
sftp.setServerPort(sftpServerPort);
sftp.setUserName(sftpUserName);
sftp.setPassword(sftpPassword);
sftp.setUserProxy(sftpUserProxy);
String sftpfilePath=filePathName.substring(0,filePathName.lastIndexOf("/")+1);
String sftpfileName=filePathName.substring(filePathName.lastIndexOf("/")+1);
sftp.setServerPath(sftpfilePath);
byte[] downBytes=sftp.download(sftpfileName);
//将pdf文件Base64Pdf编码后返回页面iframe 标签 [pdf在线预览]
if(fileName !=null && fileName.length()>0){
int indexOf = fileName.indexOf(".");
String substring = fileName.substring(indexOf+1,fileName.length());
if(substring != null && substring.length()>0){
if("pdf".equals(substring.trim())){
if(downBytes !=null && downBytes.length>0){
String encode = new BASE64Encoder().encode(downBytes);
encode.replaceAll("\r\n", "");//替换还行和空格
encode.replaceAll("\\+", "%2B");//对+号进行转义
context.setData("Base64Pdf", encode);
System.out.print(encode);
}
}
}
}
context.setData("DownloadFileName", new String(fileName.getBytes(),"ISO8859-1"));
context.setData("DownloadFileContent", downBytes);
// context.setData("_dynamicViewReferer", "download,");
} catch (Exception e) {
context.setData("Content", "下载失败");
e.printStackTrace();
}
}
public String getSftpServerIp() {
return sftpServerIp;
}
public void setSftpServerIp(String sftpServerIp) {
this.sftpServerIp = sftpServerIp;
}
public int getSftpServerPort() {
return sftpServerPort;
}
public void setSftpServerPort(int sftpServerPort) {
this.sftpServerPort = sftpServerPort;
}
public String getSftpServerPath() {
return sftpServerPath;
}
public void setSftpServerPath(String sftpServerPath) {
this.sftpServerPath = sftpServerPath;
}
public String getSftpUserName() {
return sftpUserName;
}
public void setSftpUserName(String sftpUserName) {
this.sftpUserName = sftpUserName;
}
public String getSftpPassword() {
return sftpPassword;
}
public void setSftpPassword(String sftpPassword) {
this.sftpPassword = sftpPassword;
}
public boolean isSftpUserProxy() {
return sftpUserProxy;
}
public void setSftpUserProxy(boolean sftpUserProxy) {
this.sftpUserProxy = sftpUserProxy;
}
public String getSftpProxyHost() {
return sftpProxyHost;
}
public void setSftpProxyHost(String sftpProxyHost) {
this.sftpProxyHost = sftpProxyHost;
}
public int getSftpProxyPort() {
return sftpProxyPort;
}
public void setSftpProxyPort(int sftpProxyPort) {
this.sftpProxyPort = sftpProxyPort;
}
}js:
EzgptContractAddCtrl.$inject = ["$scope", "$remote", "$session", '$modalServer', 'DateUtil', "$state", "$timeout", "$filter", "$FileUploader", "ngDialog", "$FileDownloader", "$fileService", "$sce"];
function EzgptContractAddCtrl($scope, $remote, $session, $modalServer, DateUtil, $state, $timeout, $filter, $FileUploader, ngDialog, $FileDownloader, $fileService, $sce) {
// 初始化
$scope.init = function () {
$scope.uploader = new $FileUploader({
url: '/eweb/eweb-intlsetxxxxx.Uploadxxxxxx.do',
alias: 'UploadFile',
removeAfterUpload: true,
});
$scope.uploader.onBeforeUploadItem = function (item) {
item.formData = [{
UpLoadSign: "OUTBILLS",
"PrdId": "EzgptContract",
"TransType": "EzgptContracts",
}];
if ($scope.ContractSeqV2) {
item.formData[0].TrsJnl = $scope.ContractSeqV2;
}
};
$scope.uploader.onAfterAddingAll = function (items) {
$scope.fileItem = items;
if ($scope.fileItem != null && $scope.fileItem.length > 1) {
var num = 0
for (var i = 0; i < $scope.fileItem.length; i++) {
num++;
}
$("#file").val((num + "个文件"));
} else if ($scope.fileItem != null && $scope.fileItem.length == 1) {
$("#file").val($scope.fileItem[0]._file.name);
}
};
$scope.uploader.onCompleteAll = function () {
$("#file").val('');
$scope.refresh();
$scope.myorderChange(this, "FileDate");
$scope.myorderChange(this, "FileDate");
$scope.ngAlert("上传成功！");
};
$scope.uploader.onSuccessItem = function (item, response, status, headers) {
if (response && response.jsonError) {
$scope.ngAlert(response.jsonError[0]._exceptionMessage);
return;
} else if (response && ((response._RejCode == undefined) || (response._RejCode == "000000"))) {
$scope.reData = response;
$scope.ContractSeqV2 = response.TrsJnl;
}
};
}
//提交数据
$scope.goRes = function () {
var params = {
"xxxxe": $scope.xxxxxName,
"xxxxt": $scope.xxxxxxxount + '',
"xxxxxunt": $scope.xxxxAmount + '',
"xxxxUnit": $scope.xxxxxtUnit,
"xxxxo": $scope.xxxxxxxeeAcNo,
"xxxxme": $scope.xxxeeName,
"xxxxate": $scope.xxxate,
"xxxxte": $scope.xxxate
};
if ($scope.ContractSeqV2) {
params.ContractSeq = $scope.ContractSeqV2;//文件上传后得到的文件码,用这个文件码可以查到这条数据对应的文件
}
params.AuthentxxxxType = $scope.AutxxxxxeType;
params.xxxxnxxxx = $scope._xxxxName;
if ($scope.getAuthModeValue(params)) {
$remote.post("eweb-intlsetxxxxxxx.Ezgptxxxxxxx.do", params, function (data) {
$scope.EzgptCxxxxInsert = data;
$scope.goto("#3");
});
}
};
//上传文件
$scope.goUpload = function () {
//多文件上传
if (!$scope.uploader.queue[$scope.uploader.queue.length - 1]) {
$scope.ngAlert("请选择要上传的文件");
return false;
}
for (var i = 0; i < $scope.uploader.queue.length; i++) {
if ($scope.uploader.queue[i].file.size > 2048000) {
$scope.ngAlert($scope.uploader.queue[i].file.name + "文件太大，请重新上传");
return false;
}
}
$scope.uploader.uploadAll();
//单文件上传
/* if(!$scope.uploader.queue[$scope.uploader.queue.length-1]){
$scope.ngAlert("请选择要上传的文件");
return false;
}
else if($scope.uploader.queue[$scope.uploader.queue.length-1].file.size > 2048000){
$scope.ngAlert("上传文件太大，请重新上传");
return false;
}
else{
var queue = $scope.uploader.queue;
var index = $scope.uploader.queue.length - 1;
$scope.uploader.queue[index].upload();
}*/
}
//查询文件
$scope.refresh = function () {
$scope.FileList = undefined;// 清空文件列表
$scope.imageList = undefined;// 清空图片列表
var parames = {
"PrdId": "EzgptContract"
};
if ($scope.ContractSeqV2) {
parames.TrsJnl = $scope.ContractSeqV2;
}
$remote.post("eweb-intlsettlement.xxxxxxQry.do", parames, function (data) {
$scope.FileList = data;
var imgeList = [];
if (data != null && data.List != null && data.List.length > 0) {
var list = data.List;
for (var i = 0; i < list.length; i++) {
var array = list[i].FILENAME.split(".");
if (/JPEG|jpeg|PNG|png|JPG|jpg|bmp|BMP/.test(array[1])) { //预览多张图片
imgeList.push(list[i]);
}
}
}
$scope.imageList = imgeList;
});
};
//下载文件
$scope.goDown = function (row) {
var url = "eweb-intlsetxxxxx.xxxxxxTrs.do";
var params = {
"FileName": row.FILENAME,
"FilePath": row.FILEPATH
};
$FileDownloader.prototype.download(url, params, function () {
});
};
//删除文件
$scope.goDeleteV2 = function (row) {
var params = {
"PrdId": "EzgptContract",
"TrsJnl": row.TRSJNL,
"FileSeq": row.FILESEQ
};
$scope.ngConfirm("你确定要删除吗？", function () {
$remote.post("eweb-intlsexxxxxx.xxxxxxxOptTrsQry.do", params, function (data) {
$scope.ngAlert("删除成功！", function () {
$scope.refresh();
});
});
});
};
//选择文件时清空文件选择的缓存
$scope.fileDelete = function () {
$scope.uploader.clearQueue();
if ($("#file").val() == '') {
return;
} else {
$("#file").val('');
}
};
//预览所有图片
$scope.getAllView = function () {
if ($scope.imageList != null && $scope.imageList.length > 0) { //默认显示第一张
var params = {};
params.FileName = $scope.imageList[0].FILENAME;
params.FilePath = $scope.imageList[0].FILEPATH;
params.TRSJNL = $scope.imageList[0].TRSJNL;
params.FILESEQ = $scope.imageList[0].FILESEQ;
params.ShowOrHideViewButton = true;//显示预览上下一张图片按钮
params.imageList = $scope.imageList;
params.index = 0;
params.up = false;
if ($scope.imageList.length == 1) {
params.next = false;
} else {
params.next = true;
}
$scope.getViewPre(params, function (data) {
});
} else {
$scope.ngAlert("当前没有预览的图片,请刷新文件列表！！");
}
};
//预览pdf图片
$scope.getPdfView = function (row) {
var params = {};
params.FileName = row.FILENAME;
params.FilePath = row.FILEPATH;
var url = "eweb-intlsettlement.PdfPreview.do";
$remote.post(url, params, function (data) {
$scope.getPDFViewPre(data.Base64Pdf);
});
}
//---预览图片
$scope.getView = function (row) {
var params = {};
params.FileName = row.FILENAME;
params.FilePath = row.FILEPATH;
params.TRSJNL = row.TRSJNL;
params.FILESEQ = row.FILESEQ;
params.ShowOrHideViewButton = false;//隐藏预览上下一张图片按钮
$scope.getViewPre(params, function (data) {
});
};
//产生图片弹窗
$scope.getViewPre = function (params, callback) {
ngDialog.open({
template: 'htmls/Common/pictureView2.html',
className: '',
showClose: false,
disableAnimation: true,
closeByNavigation: true,
controller: ['$scope', '$remote', function ($scope, $remote) {
var url = "eweb-intlsettlement.DownloadFileOptTrs.do";
$scope.ShowOrHideViewButton = params.ShowOrHideViewButton;//显示或隐藏预览上下一张图片按钮
$scope.FileNameV2 = params.FileName;
$scope.FilePathV2 = params.FilePath;
$scope.imageList2 = params.imageList;
$scope.TRSJNL = params.TRSJNL;
$scope.FILESEQ = params.FILESEQ;
$scope.index = params.index;
$scope.up = params.up;
$scope.next = params.next;
$scope.url = window.location.protocol + "//" + window.location.host;
//预览上一张图片
$scope.getUpAllView = function () {
$scope.index--;
if ($scope.imageList2 != null && $scope.imageList2.length > 0) {
if ($scope.index <= 0) {
$scope.index = 0;
$scope.up = false;
} else {
$scope.up = true;
}
if ($scope.index < ($scope.imageList2.length - 1) && $scope.imageList2.length > 0) {
$scope.next = true;
}
$scope.FileNameV2 = $scope.imageList2[$scope.index].FILENAME;
$scope.FilePathV2 = $scope.imageList2[$scope.index].FILEPATH;
$scope.TRSJNL = $scope.imageList2[$scope.index].TRSJNL;
$scope.FILESEQ = $scope.imageList2[$scope.index].FILESEQ;
$("#pictureV2").attr("src", $scope.url + "/eweb/eweb-intlsetxxxxx.xxxxxTrs.do?FileName=" + $scope.FileNameV2 + "&FilePath=" + $scope.FilePathV2)
} else {
$scope.closeThisDialog();
}
};
//预览下一张图片
$scope.getNextAllView = function () {
$scope.index++;
if ($scope.imageList2 != null && $scope.imageList2.length > 0) {
if ($scope.index > ($scope.imageList2.length - 1)) {
$scope.index = $scope.imageList2.length - 1;
}
if ($scope.index < ($scope.imageList2.length - 1)) {
$scope.next = true;
} else {
$scope.next = false;
}
if ($scope.index > 0 && $scope.imageList2.length > 0) {
$scope.up = true;
}
$scope.FileNameV2 = $scope.imageList2[$scope.index].FILENAME;
$scope.FilePathV2 = $scope.imageList2[$scope.index].FILEPATH;
$scope.TRSJNL = $scope.imageList2[$scope.index].TRSJNL;
$scope.FILESEQ = $scope.imageList2[$scope.index].FILESEQ;
$("#pictureV2").attr("src", $scope.url + "/eweb/eweb-intlsetzzzzz.zzzzTrs.do?FileName=" + $scope.FileNameV2 + "&FilePath=" + $scope.FilePathV2)
} else {
$scope.closeThisDialog();
}
};
//下载文件
$scope.downFile = function () {
var url = "eweb-intlsetxxxxx.xxxxxxTrs.do";
var params = {
"FileName": $scope.FileNameV2,
"FilePath": $scope.FilePathV2
};
$FileDownloader.prototype.download(url, params, function (data) {
$scope.Base64Pdf = data.Base64Pdf;
});
};
//删除
$scope.deleteFile = function (flg) {
var params = {
"PrdId": "EzgptContract",
"TrsJnl": $scope.TRSJNL,
"FileSeq": $scope.FILESEQ
};
$scope.ngConfirm("你确定要删除吗？", function () {
$remote.post("eweb-intlsetxxxxx.xxxxxrsQry.do", params, function (data) {
if (flg) {//单张图片预览时删除图片
$scope.ngAlert("删除成功,请刷新文件列表！", function () {
$scope.closeThisDialog();
});
} else {//多张图片预览时删除图片
$scope.imageList2.splice($scope.index, 1);
if ($scope.imageList2.length <= 0) {
$scope.ngAlert("删除成功,请刷新文件列表！", function () {
$scope.closeThisDialog();
});
} else {
$scope.ngAlert("删除成功,请刷新文件列表！", function () {
$scope.index = 0;
$scope.getUpAllView();
});
}
}
});
});
};
$("#pictureV2").attr("src", $scope.url + "/eweb/eweb-intlsetxxxxx.xxxxxxTrs.do?FileName=" + $scope.FileNameV2 + "&FilePath=" + $scope.FilePathV2)
$scope.closeDialog = function () {
$scope.closeThisDialog();
};
}]
});
};
//pdf图片弹窗
$scope.getPDFViewPre = function (url) {
ngDialog.open({
template: 'htmls/Common/picturePDFView.html',
className: '',
showClose: false,
disableAnimation: true,
closeByNavigation: true,
controller: ['$scope', '$remote', function ($scope, $remote) {
var pdfUrl = "data:application/pdf;base64," + url;
$scope.pdfUrl = $sce.trustAsResourceUrl(pdfUrl);//将pdf编码数据放入$scope域中,页面通过{{pdfUrl}}}获取数据
$scope.closeDialog = function () {
$scope.closeThisDialog();
};
}]
});
}
//文件排序
$scope.myorderChange = function (e, flag) {
$(e.currentTarget).addClass('active').siblings().removeClass('active');
if (flag == $scope.myorderbySql) {
$scope.myorderbybool = !$scope.myorderbybool;
if ($scope.myorderbySql == 'FileDate') {
$scope.FileDateFlag = !$scope.FileDateFlag;
} else if ($scope.myorderbySql == 'OfirstAmt') {
$scope.PfirstAmtFlag = !$scope.PfirstAmtFlag;
} else if ($scope.myorderbySql == 'ModelFile') {
$scope.ModelFileFlag = !$scope.ModelFileFlag;
}
} else {
$scope.myorderbySql = flag;
if ($scope.myorderbySql == 'FileDate') {
$scope.myorderbybool = $scope.FileDateFlag;
} else if ($scope.myorderbySql == 'OfirstAmt') {
$scope.myorderbybool = $scope.PfirstAmtFlag;
} else if ($scope.myorderbySql == 'ModelFile') {
$scope.myorderbybool = $scope.ModelFileFlag;
}
}
$scope.orderByFun = function (obj) {
if ($scope.myorderbySql == 'FileDate') {
return parseFloat(obj.UPLOADDATE);
} else {
return parseFloat(obj[$scope.myorderbySql]);
}
}
};
}文件操作 页面html:
上传附件 文件路径：
弹出框:pdf 显示页面
picturePDFView.html
第二种方法是直接返回流
通过HttpServletResponse返回一个流,在科蓝pe框架的Action中很多新手都不知道Action中如何注入HttpServletResponse,如何用HttpServletResponse对象返回流到游览器中,其实科蓝pe框架中并不能注入HttpServletResponse, Action中只是写了一段代码逻辑,具体响应数据的工作有另一个类完成(继承这个CsiiView父类,的类),这个类的具体配置在web模块下的http.xml中,我们在transaction配置的返回值channels中进行引用,我们自己也可以在http.xml中自定义新的返回值;
在线预览pdf配置:
左边是http.xml配置 ,右边是transactione配置
打开这个代码 com.csii.pe.channel.http.servlet.DownloadView可以发现 里面有HttpServletResponse及HttpServletRequest;
js:
//10. pdf图片弹窗
$scope.getPDFViewPre = function (name,path) {
ngDialog.open({
template: 'htmls/Common/picturePDFView.html',
className: '',
showClose: false,
disableAnimation: true,
closeByNavigation: true,
controller: ['$scope', '$remote', function ($scope, $remote) {
$scope.url = window.location.protocol + "//" + window.location.host;
$scope.pdfUrl =$scope.url + "/eweb/eweb-intlsettlement.ShowFilePdf.do?FileName="+name+"&FilePath="+path+"&inline="+"true";
$scope.closeDialog = function () {
$scope.closeThisDialog();
};
}]
});
};picturePDFView.html
这样我们就完成了pdf在线预览的功能;
一般我们不需要在http.xml中自定义视图,因为框架中都有了自己配置下即可,是在需要自己写那就自己写写完配置上即可;
1.返回页面json数据
2.download 文件下载
http.xml
