Skip to content

H
hg-smart
Commit 43ecb29c by 宋祥
Options

1.文件预览页面，单个文件可直接预览

parent c6adb2a7
Showing with 385 additions and 321 deletions
src/main/webapp/HG/WD/HGWD002.js
......@@ -168,12 +168,14 @@ $(function () {
field: "operator",
title: "操作",
template: function (model) {
let param = "'" + model.fileId + "', '" + model.docId + "'";
let param = "'" + model.fileId + "', '" + model.docId + "', '" + model.docType + "'";
let template = '';
// template += '<a style="cursor: pointer;display: inline-flex;justify-content: center;margin:auto 5px" '
// + 'onclick="showQueryRecord(' + param + ')" >预览记录</a>';
// template += '<a style="cursor: pointer;display: inline-flex;justify-content: center;margin:auto 5px" '
// + 'onclick="showDownloadRecord(' + param + ')" >下载记录</a>';
template += '<a style="cursor: pointer;display: inline-flex;justify-content: center;margin:auto 5px" '
+ 'onclick="showQueryRecord(' + param + ')" >预览记录</a>';
template += '<a style="cursor: pointer;display: inline-flex;justify-content: center;margin:auto 5px" '
+ 'onclick="showDownloadRecord(' + param + ')" >下载记录</a>';
+ 'onclick="showPreview(' + param + ')" >预览</a>';
return template;
}
}, {
......@@ -334,7 +336,7 @@ let setTreeNodeValue = function (nodeData) {
let showAuthButton = function () {
let leafType = IPLATUI.EFTree.docTree.selectTreeNode.leafLevel;
// C:目录
if (leafType && leafType >0) {
if (leafType && leafType > 0) {
$("#PREVIEW").attr("disabled", false);
$("#DOWNLOAD").attr("disabled", false);
} else {
......@@ -342,3 +344,20 @@ let showAuthButton = function () {
$("#DOWNLOAD").attr("disabled", true);
}
}
/**
* 预览
*
* @param fileId
* @param docId
* @param docType
*/
let showPreview = function (fileId, docId, docType) {
if (isBlank(docId)) {
message("文件类型或ID不能为空");
return;
}
$("#previewFile").data("kendoWindow").center();
$("#previewFile").data("kendoWindow").open();
addRecord(fileId, docId, docType);
}
src/main/webapp/HG/WD/HGWD002.jsp
......@@ -5,6 +5,12 @@
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<script src="${ctx}/common/docxjs/jszip.min.js"></script>
<script src="${ctx}/common/docxjs/docx-preview.js"></script>
<script src="${ctx}/common/js/xlsx.full.min.js"></script>
<script src="${ctx}/HG/WD/HGWD002A1.js"></script>
<link rel="stylesheet" href="${ctx}/HG/WD/HGWD002A.css">
<EF:EFPage title="文档浏览">
<div id="splitter" class="i-fit-height">
<div id="left-pane" class="i-fit-height">
......@@ -43,9 +49,9 @@
sort="setted" checkMode="row">
<EF:EFColumn ename="id" cname="ID" hidden="true"/>
<EF:EFColumn ename="fileId" cname="ID" hidden="true"/>
<EF:EFColumn ename="docId" cname="文件ID" enable="false" width="200" align="center" sort="false"
<EF:EFColumn ename="docId" cname="文件ID" enable="false" width="120" align="center" sort="false"
hidden="true"/>
<EF:EFColumn ename="operator" cname="操作" enable="false" width="140" align="center" sort="false"/>
<EF:EFColumn ename="operator" cname="操作" enable="false" width="80" align="center" sort="false"/>
<EF:EFComboColumn ename="fileType" cname="文件分类" enable="false" width="90" align="center">
<EF:EFCodeOption codeName="hggp.hgwd.fileType"/>
</EF:EFComboColumn>
......@@ -63,3 +69,28 @@
</div>
</EF:EFPage>
<%-- 预览文件 --%>
<EF:EFWindow id="previewFile" title="文件预览" height="90%" width="90%">
<div id="descDiv" class="center-flex">
<span id="descSpan" style="font-weight: bold;font-size: 18px">文件预览区域...</span>
</div>
<%-- 文本预览 --%>
<div id="textContainer" class="left-flex">
<pre id="textSpan" class="textSpan"></pre>
</div>
<%-- docx文件预览--%>
<div id="docxContainer" style="display: none;"></div>
<%-- IMAGE文件预览--%>
<div id="imageContainer" class="left-flex" style="display: none;">
<%-- <div class="wide-div">--%>
<img id="image" src="" style="border: 1px solid gray;"/>
<%-- </div>--%>
<%-- <div class="narrow-div">--%>
<%-- <input type="range" id="zoom-slider" class="zoom-slider" min="10" max="300" value="100"--%>
<%-- oninput="zoomImage(this.value)">--%>
<%-- </div>--%>
</div>
<%-- other --%>
<iframe id="previewFrame" src="" style="display: none;"></iframe>
</EF:EFWindow>
src/main/webapp/HG/WD/HGWD002A.css 0 → 100644
.left-flex {
/*display: flex;*/
/*align-items: flex-start;*/
height: 100%;
width: 100%;
overflow: auto;
}
.center-flex {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
overflow: scroll;
}
iframe {
min-width: 100%;
min-height: 100%;
border: 0px;
}
img {
max-width: 100%;
max-height: 100%;
cursor: zoom-in;
transition: transform 0.1s;
}
img:hover {
cursor: zoom-out;
}
.textSpan {
font-size: 16px;
}
.textSpan table {
border: 1px solid black;
}
.textSpan table td {
border: 1px solid black;
}
src/main/webapp/HG/WD/HGWD002A.js
......@@ -101,277 +101,13 @@ function add(docId, leafType, docType) {
message("文件类型或ID不能为空");
return;
}
// 隐藏预览区域
hideHtml();
// 第一级目录
if (leafType === "C") {
otherDownload(true, null);
return;
}
IPLAT.progress($("body"), true);
let inInfo = new EiInfo();
inInfo.set("result-0-fileId", $("#inqu_status-0-fileId").val());
inInfo.set("result-0-docId", docId);
EiCommunicator.send('HGWD001B', 'add', inInfo, {
onSuccess: function (res) {
if (res.getStatus() >= 0) {
try {
preview(docId, docType);
} catch (e) {
}
} else {
message(res.getMsg());
}
IPLAT.progress($("body"), false);
},
onFail: function (res) {
NotificationUtil("操作失败，原因[" + res.getMsg() + "]", "error");
IPLAT.progress($("body"), false);
}
});
}
/**
* 新增记录后回调
*
* @param docId
* @param docType
*/
function preview(docId, docType) {
// 隐藏文本描述
$("#descDiv").css('display', 'none');
if (isText(docType)) {
previewText(docId);
} else if (isXml(docType)) {
previewXml(docId);
} else if (isExcel(docType)) {
previewExcel(docId);
} else if (isWord(docType)) {
previewDocx(docId);
} else if (isImage(docType)) {
previewFrame(docId);
} else if (isFrame(docType)) {
previewFrame(docId);
} else {
otherDownload(false, docId);
}
}
/**
* 隐藏显示区域
*/
function hideHtml() {
$("#textContainer").css('display', 'none');
$("#textSpan").html("");
$("#docxContainer").css('display', 'none');
$("#imageContainer").css('display', 'none');
$("#image").attr('src', "");
$("#previewFrame").css('display', 'none');
$("#previewFrame").attr("src", "");
}
/**
* 是否文本
*
* @param fileName
* @returns {boolean}
*/
function isText(docType) {
if (isBlank(docType)) {
return false;
}
const extensions = ['txt'];
return extensions.includes(docType.toLowerCase());
}
/**
* 文件预览
*
* @param docId
*/
function previewText(docId) {
fetch(downloadHref(docId, true)).then(res => {
return res.text();
}).then(data => {
let container = document.getElementById("textContainer");
container.style.display = 'block';
// 使用new TextDecoder()指定编码
// const utf8Decoder = new TextDecoder('UTF-8', {ignoreBOM: true});
// const decodedText = utf8Decoder.decode(arrayBuffer);
$("#textSpan").text(data);
});
}
/**
* 是否文本
*
* @param fileName
* @returns {boolean}
*/
function isXml(docType) {
if (isBlank(docType)) {
return false;
}
const extensions = ['xml'];
return extensions.includes(docType.toLowerCase());
}
/**
* xml文件预览
*
* @param docId
*/
function previewXml(docId) {
fetch(downloadHref(docId, true)).then(res => {
return res.text();
}).then(data => {
let container = document.getElementById("textContainer");
container.style.display = 'block';
$("#textSpan").text(data);
});
}
/**
* 是否excel
*
* @param fileName
* @returns {boolean}
*/
function isExcel(docType) {
if (isBlank(docType)) {
return false;
}
const extensions = ['xls', 'xlsx'];
return extensions.includes(docType.toLowerCase());
let fileId = $("#inqu_status-0-fileId").val()
addRecord(fileId, docId, docType);
}
/**
* 文件预览
*
* @param docId
*/
function previewExcel(docId) {
fetch(downloadHref(docId, true)).then(res => {
return res.blob();
}).then(blob => {
let container = document.getElementById("textContainer");
container.style.display = 'block';
// 使用new TextDecoder()指定编码
// const utf8Decoder = new TextDecoder('GBK', {ignoreBOM: true});
// const text = utf8Decoder.decode(arrayBuffer);
// $("#textSpan").html(text.replace(/\r\n?/g, '\n').replace(/\n/g, '<br/>'));
const reader = new FileReader();
reader.readAsArrayBuffer(blob);
reader.onload = function(e) {
let textSpan = document.getElementById('textSpan');
// 清空内容
textSpan.innerHTML = "";
let result = new Uint8Array(e.target.result);
let workbook = XLSX.read(result, {type: 'array'});
let sheetNames = workbook.SheetNames;
for (let i = 0; i < sheetNames.length; i++) {
// 假设我们只需要第一个工作表
var worksheet = workbook.Sheets[sheetNames[i]];
var data = XLSX.utils.sheet_to_html(worksheet);
// 在页面上显示JSON数据
textSpan.innerHTML += data + "<br/>";
}
};
});
}
/**
* 是否WORD
*
* @param fileName
* @returns {boolean}
*/
function isWord(docType) {
if (isBlank(docType)) {
return false;
}
const extensions = ['docx'];
return extensions.includes(docType.toLowerCase());
}
/**
* docx预览
*
* @param docId
*/
function previewDocx(docId) {
fetch(downloadHref(docId, true)).then(res => {
return res.arrayBuffer();
}).then(arrayBuffer => {
let container = document.getElementById("docxContainer");
container.style.display = 'block';
docx.renderAsync(arrayBuffer, container).then((x) => {
console.log("docx: finished")
});
});
}
/**
* 判断是否是图片
*
* @param fileName
* @returns {boolean}
*/
function isImage(docType) {
if (isBlank(docType)) {
return false;
}
const extensions = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'];
return extensions.includes(docType.toLowerCase());
}
/**
* image预览
*
* @param docId
*/
function previewImage(docId) {
$("#image").attr('src', downloadHref(docId, true));
$("#imageContainer").css('display', '');
}
/**
* 判断是否frame预览
*
* @param fileName
* @returns {boolean}
*/
function isFrame(docType) {
if (isBlank(docType)) {
return false;
}
const extensions = ['pdf'];
return extensions.includes(docType.toLowerCase());
}
/**
* frame预览
*
* @param docId
*/
function previewFrame(docId) {
$("#previewFrame").css('display', '');
$("#previewFrame").attr("src", downloadHref(docId, true));
}
/**
* 其他下载
*
* @param isRoot
* @param docId
*/
function otherDownload(isRoot, docId) {
$("#descDiv").css('display', '');
if (isRoot) {
$("#descSpan").html("文件预览区域...");
} else {
$("#descSpan").html("该文件暂不支持预览");
// $("#descSpan").html("该文件暂不支持预览，点击<a href='" + downloadHref(docId, false)
// + "' target='_blank'>下载</a>");
}
}
src/main/webapp/HG/WD/HGWD002A.jsp
......@@ -8,54 +8,8 @@
<script src="${ctx}/common/docxjs/jszip.min.js"></script>
<script src="${ctx}/common/docxjs/docx-preview.js"></script>
<script src="${ctx}/common/js/xlsx.full.min.js"></script>
<style>
.left-flex {
/*display: flex;*/
/*align-items: flex-start;*/
height: 100%;
width: 100%;
overflow: auto;
}
.center-flex {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
overflow: scroll;
}
iframe {
min-width: 100%;
min-height: 100%;
border: 0px;
}
img {
max-width: 100%;
max-height: 100%;
cursor: zoom-in;
transition: transform 0.1s;
}
img:hover {
cursor: zoom-out;
}
.textSpan {
font-size: 16px;
}
.textSpan table {
border: 1px solid black;
}
.textSpan table td {
border: 1px solid black;
}
</style>
<script src="${ctx}/HG/WD/HGWD002A1.js"></script>
<link rel="stylesheet" href="${ctx}/HG/WD/HGWD002A.css">
<EF:EFPage title="文件预览">
<div class="row" style="margin: 0 -10px;">
<div class="col-md-3">
......
src/main/webapp/HG/WD/HGWD002A1.js 0 → 100644
/**
* 新增预览记录
*
* @param fileId
* @param docId
* @param docType
*/
function addRecord(fileId, docId, docType){
// 隐藏预览区域
hideHtml();
IPLAT.progress($("body"), true);
let inInfo = new EiInfo();
inInfo.set("result-0-fileId", fileId);
inInfo.set("result-0-docId", docId);
EiCommunicator.send('HGWD001B', 'add', inInfo, {
onSuccess: function (res) {
if (res.getStatus() >= 0) {
try {
previewFile(docId, docType);
} catch (e) {
}
} else {
message(res.getMsg());
}
IPLAT.progress($("body"), false);
},
onFail: function (res) {
NotificationUtil("操作失败，原因[" + res.getMsg() + "]", "error");
IPLAT.progress($("body"), false);
}
});
}
/**
* 新增记录后回调
*
* @param docId
* @param docType
*/
function previewFile(docId, docType) {
// 隐藏文本描述
$("#descDiv").css('display', 'none');
if (isText(docType)) {
previewText(docId);
} else if (isXml(docType)) {
previewXml(docId);
} else if (isExcel(docType)) {
previewExcel(docId);
} else if (isWord(docType)) {
previewDocx(docId);
} else if (isImage(docType)) {
previewFrame(docId);
} else if (isFrame(docType)) {
previewFrame(docId);
} else {
otherDownload(false, docId);
}
}
/**
* 隐藏显示区域
*/
function hideHtml() {
$("#textContainer").css('display', 'none');
$("#textSpan").html("");
$("#docxContainer").css('display', 'none');
$("#imageContainer").css('display', 'none');
$("#image").attr('src', "");
$("#previewFrame").css('display', 'none');
$("#previewFrame").attr("src", "");
}
/**
* 是否文本
*
* @param fileName
* @returns {boolean}
*/
function isText(docType) {
if (isBlank(docType)) {
return false;
}
const extensions = ['txt'];
return extensions.includes(docType.toLowerCase());
}
/**
* 文件预览
*
* @param docId
*/
function previewText(docId) {
fetch(downloadHref(docId, true)).then(res => {
return res.text();
}).then(data => {
let container = document.getElementById("textContainer");
container.style.display = 'block';
// 使用new TextDecoder()指定编码
// const utf8Decoder = new TextDecoder('UTF-8', {ignoreBOM: true});
// const decodedText = utf8Decoder.decode(arrayBuffer);
$("#textSpan").text(data);
});
}
/**
* 是否文本
*
* @param fileName
* @returns {boolean}
*/
function isXml(docType) {
if (isBlank(docType)) {
return false;
}
const extensions = ['xml'];
return extensions.includes(docType.toLowerCase());
}
/**
* xml文件预览
*
* @param docId
*/
function previewXml(docId) {
fetch(downloadHref(docId, true)).then(res => {
return res.text();
}).then(data => {
let container = document.getElementById("textContainer");
container.style.display = 'block';
$("#textSpan").text(data);
});
}
/**
* 是否excel
*
* @param fileName
* @returns {boolean}
*/
function isExcel(docType) {
if (isBlank(docType)) {
return false;
}
const extensions = ['xls', 'xlsx'];
return extensions.includes(docType.toLowerCase());
}
/**
* 文件预览
*
* @param docId
*/
function previewExcel(docId) {
fetch(downloadHref(docId, true)).then(res => {
return res.blob();
}).then(blob => {
let container = document.getElementById("textContainer");
container.style.display = 'block';
// 使用new TextDecoder()指定编码
// const utf8Decoder = new TextDecoder('GBK', {ignoreBOM: true});
// const text = utf8Decoder.decode(arrayBuffer);
// $("#textSpan").html(text.replace(/\r\n?/g, '\n').replace(/\n/g, '<br/>'));
const reader = new FileReader();
reader.readAsArrayBuffer(blob);
reader.onload = function(e) {
let textSpan = document.getElementById('textSpan');
// 清空内容
textSpan.innerHTML = "";
let result = new Uint8Array(e.target.result);
let workbook = XLSX.read(result, {type: 'array'});
let sheetNames = workbook.SheetNames;
for (let i = 0; i < sheetNames.length; i++) {
// 假设我们只需要第一个工作表
var worksheet = workbook.Sheets[sheetNames[i]];
var data = XLSX.utils.sheet_to_html(worksheet);
// 在页面上显示JSON数据
textSpan.innerHTML += data + "<br/>";
}
};
});
}
/**
* 是否WORD
*
* @param fileName
* @returns {boolean}
*/
function isWord(docType) {
if (isBlank(docType)) {
return false;
}
const extensions = ['docx'];
return extensions.includes(docType.toLowerCase());
}
/**
* docx预览
*
* @param docId
*/
function previewDocx(docId) {
fetch(downloadHref(docId, true)).then(res => {
return res.arrayBuffer();
}).then(arrayBuffer => {
let container = document.getElementById("docxContainer");
container.style.display = 'block';
docx.renderAsync(arrayBuffer, container).then((x) => {
console.log("docx: finished")
});
});
}
/**
* 判断是否是图片
*
* @param fileName
* @returns {boolean}
*/
function isImage(docType) {
if (isBlank(docType)) {
return false;
}
const extensions = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'];
return extensions.includes(docType.toLowerCase());
}
/**
* image预览
*
* @param docId
*/
function previewImage(docId) {
$("#image").attr('src', downloadHref(docId, true));
$("#imageContainer").css('display', '');
}
/**
* 判断是否frame预览
*
* @param fileName
* @returns {boolean}
*/
function isFrame(docType) {
if (isBlank(docType)) {
return false;
}
const extensions = ['pdf'];
return extensions.includes(docType.toLowerCase());
}
/**
* frame预览
*
* @param docId
*/
function previewFrame(docId) {
$("#previewFrame").css('display', '');
$("#previewFrame").attr("src", downloadHref(docId, true));
}
/**
* 其他下载
*
* @param isRoot
* @param docId
*/
function otherDownload(isRoot, docId) {
// 隐藏预览区域
hideHtml();
$("#descDiv").css('display', '');
if (isRoot) {
$("#descSpan").html("文件预览区域...");
} else {
$("#descSpan").html("该文件暂不支持预览");
// $("#descSpan").html("该文件暂不支持预览，点击<a href='" + downloadHref(docId, false)
// + "' target='_blank'>下载</a>");
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment