pengjunjie/document-server-integration
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/document-server-integration.git synced 2026-02-10 18:05:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(java-spring): convert button

Browse Source
This commit is contained in:
sshakndr
2024-10-25 14:52:21 +07:00
parent 55b709f87c
commit 3fda69efc8
8 changed files with 349 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -3,6 +3,7 @@
- csharp: converting function on index page
- csharp-mvc: converting function on index page
- java: converting function on index page
- java-spring: converting function on index page
- editing by default
- change reference source
- filename in editor page title

17
web/documentserver-example/java-spring/src/main/java/com/onlyoffice/integration/controllers/FileController.java
View File

@ -25,6 +25,7 @@ import com.onlyoffice.integration.documentserver.managers.history.HistoryManager
import com.onlyoffice.integration.documentserver.storage.FileStorageMutator;
import com.onlyoffice.integration.documentserver.storage.FileStoragePathBuilder;
import com.onlyoffice.integration.dto.Converter;
import com.onlyoffice.integration.dto.FormatsList;
import com.onlyoffice.integration.dto.Reference;
import com.onlyoffice.integration.dto.Rename;
import com.onlyoffice.integration.dto.Restore;
@ -133,7 +134,7 @@ public class FileController {
storageMutator.createMeta(fullFileName, // create meta information with the user ID and name specified
String.valueOf(user.getId()), user.getName());
}
return "{ \"filename\": \"" + fullFileName + "\", \"documentType\": \"" + documentType + "\" }";
return "{ \"filename\": \"" + fullFileName + "\", \"documentType\": \"" + documentType + "\",\"percent\":100}";
}
// download data from the specified file
@ -237,10 +238,11 @@ public class FileController {
String filePass = body.getFilePass() != null ? body.getFilePass() : null;
// get an auto-conversion extension from the request body or set it to the ooxml extension
String conversionExtension = body.getFileExt() != null ? body.getFileExt() : "ooxml";
Boolean keepOriginal = body.getKeepOriginal() != null ? body.getKeepOriginal() : false;
try {
// check if the file with such an extension can be converted
if (documentManager.getDefaultConvertExtension(fileName) != null) {
if (documentManager.getDefaultConvertExtension(fileName) != null || body.getFileExt() != null) {
ConvertRequest convertRequest = ConvertRequest.builder()
.password(filePass)
.outputtype(conversionExtension)
@ -257,6 +259,13 @@ public class FileController {
String newFileUri = convertResponse.getFileUrl();
String newFileType = convertResponse.getFileType();
if (!new FormatsList(documentManager.getFormats()).getFormats().stream().anyMatch(
f -> newFileType.equals(f.getName()) && f.getType() != null)
) {
return "{ \"percent\" : \"100\", \"filename\" : \"" + newFileUri
+ "\", \"error\":\"FileTypeIsNotSupported\"}";
}
/* get a file name of an internal file extension with an index if the file
with such a name already exists */
final String oldFileName = fileName;
@ -274,7 +283,9 @@ public class FileController {
// remove source file
storageMutator.deleteFile(oldFileName);
if (!keepOriginal) {
storageMutator.deleteFile(oldFileName);
}
// create the converted file with input stream
storageMutator.createFile(Path.of(storagePathBuilder.getFileLocation(correctedName)), stream);

2
web/documentserver-example/java-spring/src/main/java/com/onlyoffice/integration/dto/Converter.java
View File

@ -27,6 +27,8 @@ import lombok.Setter;
@Setter
@NoArgsConstructor
public class Converter {
@JsonProperty("keepOriginal")
private Boolean keepOriginal;
@JsonProperty("filename")
private String fileName;
@JsonProperty("filePass")

4
web/documentserver-example/java-spring/src/main/resources/static/css/img/convert.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.4285 13C14.4102 13 14 13 14 13.5V15H6C5.44772 15 5 15.4477 5 16V17C5 17.5523 5.44771 18 6 18H14V19.5C14 20 14.3816 20 14.4285 20C14.6359 20 15.0099 19.9113 15.2172 19.7363L18.6207 17.0833C19.1264 16.6566 19.1264 16.3434 18.6207 15.9167L15.2172 13.2637C15.0099 13.0887 14.6359 13 14.4285 13Z" fill="#444444"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.5715 4C9.58984 4 10 4 10 4.50002V6H18C18.5523 6 19 6.44772 19 7V8C19 8.55228 18.5523 9 18 9H10V10.5C10 11 9.61841 11 9.57151 11C9.36409 11 8.99012 10.9113 8.78279 10.7363L5.37934 8.08333C4.87356 7.65662 4.87356 7.34338 5.37934 6.91667L8.78279 4.26366C8.99012 4.08874 9.36409 4 9.5715 4Z" fill="#444444"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 821 B

75
web/documentserver-example/java-spring/src/main/resources/static/css/media.css
View File

@ -24,10 +24,14 @@
}
.tableHeaderCellViewers {
width: 29%;
width: 18%;
text-align: right;
}
.tableHeaderCellAction {
width: 23%;
}
.tableHeaderCellDownload {
width: 21%;
padding-right: 18px;
@ -211,7 +215,7 @@
}
.tableHeaderCellFileName {
width: 16%;
width: 9%;
}
.tableHeaderCellEditors {
@ -220,7 +224,12 @@
.tableHeaderCellViewers {
text-align: right;
width: 37%;
width: 9%;
}
.tableHeaderCellAction{
width: 11%;
padding-right: 82px;
}
.tableHeaderCellDownload {
@ -234,19 +243,24 @@
}
.tableHeaderCellEditors {
width: 26%;
width: 15%;
text-align: left;
}
.tableHeaderCellFileName {
width: 17%;
width: 28%;
}
.tableHeaderCellViewers {
width: 27%;
width: 6%;
text-align: right;
}
.tableHeaderCellAction{
width: 18%;
padding-right: 54px;
}
.tableHeaderCellDownload {
padding-right: 18px;
width: 20%;
@ -267,12 +281,17 @@
.tableRow td:first-child {
flex-grow: 0;
width: 15%;
width: 25%;
margin-right: auto;
}
.contentCells-icon {
width: 3%;
}
.firstContentCellViewers {
margin-left: 0;
}
}
@media (max-width: 890px) and (min-width: 769px ) {
@ -280,7 +299,7 @@
width: 100%;
}
.contentCells-shift {
padding-right: 28px;
padding-right: 27px;
}
.main-panel {
@ -313,11 +332,16 @@
.tableHeaderCellEditors {
text-align: left;
width: 31%;
width: 1%;
}
.tableHeaderCellViewers {
width: 18%;
width: 19%;
}
.tableHeaderCellAction {
width: 19%;
padding-right: 45px;
}
}
@ -416,8 +440,8 @@
.downloadContentCellShift {
max-width: 7%;
margin-right: -11px;
margin-left: auto;
margin-right: 24px;
margin-left: 0;
}
.contentCells-icon {
@ -425,13 +449,13 @@
}
.tableRow td:last-child {
width: 12%;
padding-right: 40px;
width: 7%;
padding-right: 0px;
border: none;
}
.contentCells-shift {
padding-right: 35px;
padding-right: 0px;
}
.downloadContentCellShift:after {
@ -517,6 +541,15 @@
height: 56px;
margin-bottom: 24px !important;
}
.button.hoar{
width: 18%;
height: 27px;
margin-bottom: 7px !important;
}
.button.converting{
width: 126px;
margin-top: 0;
}
}
@media (max-width: 560px) and (min-width: 510px) {
@ -525,7 +558,7 @@
}
.downloadContentCellShift {
padding-right: 45px;
padding-right: 16px;
max-width: 4%;
}
}
@ -545,7 +578,7 @@
.downloadContentCellShift {
max-width: 6%;
padding-right: 37px;
padding-right: 6px;
}
.firstContentCellShift {
@ -571,12 +604,12 @@
.downloadContentCellShift {
max-width: 3%;
padding-right: 37px;
padding-right: 0px;
padding-left: 0;
}
.firstContentCellShift {
margin-left: 1px;
margin-left: 2px;
flex-basis: 14%;
}
@ -606,7 +639,7 @@
.downloadContentCellShift {
max-width: 4%;
margin-right: -18px;
margin-right: 18px;
margin-left: -1px;
}
@ -615,7 +648,7 @@
}
.contentCells-icon{
width: 10%;
width: 12%;
}
footer table td {
margin: 0;

117
web/documentserver-example/java-spring/src/main/resources/static/css/stylesheet.css
View File

@ -238,6 +238,52 @@ label .checkbox {
color: #FF6F3D;
}
.button.converting {
margin-top: -20px;
padding: 16px 16px;
}
.button.converting.wide {
padding: 16px 29px;
}
.button.hoar {
background: #EFEFEF;
border: 1px solid #EFEFEF;
margin-right: 7px;
margin-bottom: 7px;
width: 13%;
padding-left: 0;
padding-right: 0;
font-size: 11px;
}
.button.hoar.disable {
opacity: 30%;
cursor: default;
}
.button.hoar:not(.disable):hover {
background: #FF6F3D;
border: 1px solid #FF6F3D;
color: #FFFFFF;
}
.button.hoar.orange {
background: #FF6F3D;
border: 1px solid #FF6F3D;
color: #FFFFFF;
cursor: default;
}
.button.hoar.orange.disable {
background: #444444;
border: 1px solid #444444;
color: #FFFFFF;
cursor: default;
opacity: 100%;
}
.button.file-type {
font-size: 11px;
color: #FFFFFF;
@ -380,6 +426,32 @@ label .checkbox {
display: none;
}
#convertingProgress {
color: #333333;
display: none;
font-size: 12px;
margin: 30px 35px;
}
#convertingProgress .convertFileName{
background-position: left center;
background-repeat: no-repeat;
display: block;
font-size: 14px;
line-height: 160%;
overflow: hidden;
padding-left: 28px;
margin-bottom: 16px;
text-overflow: ellipsis;
white-space: nowrap;
}
#convertingProgress .describeUpload {
line-height: 150%;
letter-spacing: -0.02em;
padding: 16px 0;
}
.error-message {
background: url(img/error.svg) no-repeat scroll 4px 10px;
color: #CB0000;
@ -401,6 +473,10 @@ label .checkbox {
padding-left: 35px;
}
.waiting {
opacity: 30%;
}
.current {
background-image: url("img/loader16.gif");
}
@ -413,6 +489,12 @@ label .checkbox {
background-image: url("img/notdone.svg");
}
.convertPercent {
color: #FF6F3D;
font-weight: 700;
display: inline;
}
.step-descr {
display: block;
margin-left: 35px;
@ -420,6 +502,10 @@ label .checkbox {
line-height: 188%;
}
.step-descr.disable {
display: none;
}
.progress-descr {
letter-spacing: -0.02em;
line-height: 150%;
@ -524,21 +610,25 @@ footer table tr td:first-child {
white-space: nowrap;
}
.convertFileName.word,
.stored-edit.word,
.uploadFileName.word {
background-image: url("img/icon_docx.svg");
}
.convertFileName.cell,
.stored-edit.cell,
.uploadFileName.cell {
background-image: url("img/icon_xlsx.svg");
}
.convertFileName.slide,
.stored-edit.slide,
.uploadFileName.slide {
background-image: url("img/icon_pptx.svg");
}
.convertFileName.pdf,
.stored-edit.pdf,
.uploadFileName.pdf {
background-image: url("img/icon_pdf.svg");
@ -595,6 +685,11 @@ footer table tr td:first-child {
visibility: hidden;
}
.convertTable {
margin-top: 10px;
margin-left: 35px;
}
.tableRow {
background: transparent;
-moz-transition: all 0.2s ease-in-out;
@ -641,6 +736,12 @@ footer table tr td:first-child {
width: 11%;
}
.tableHeaderCellAction{
width: 13%;
text-align: right;
padding-right: 88px;
}
.tableHeaderCellDownload{
width: 13%;
text-align: right;
@ -665,7 +766,7 @@ footer table tr td:first-child {
}
.contentCells-shift {
padding-right: 44px;
padding-right: 43px;
}
.contentCells-icon {
@ -729,7 +830,7 @@ footer table tr td:first-child {
width: 100%;
}
.icon-delete {
.icon-action {
cursor: pointer;
}
@ -811,6 +912,14 @@ html {
position: relative;
}
.typeButtonsRow {
width: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: row;
position: relative;
}
.tableRow td:first-child {
display: flex;
flex-grow: 1;
@ -818,11 +927,11 @@ html {
}
.tableHeaderCellFileName {
width: 30%;
width: 20%;
}
.tableHeaderCellEditors {
width: 28%;
width: 20%;
}
.tableHeaderCellViewers {

128
web/documentserver-example/java-spring/src/main/resources/static/scripts/jscript.js
View File

@ -284,6 +284,134 @@ if (typeof jQuery !== "undefined") {
jq("#embeddedView").attr("src", url);
});
jq(document).on("click", "#beginEditConverted:not(.disable)", function () {
var fileId = encodeURIComponent(jq('#hiddenFileName').attr("data"));
var url = UrlEditor + "?action=edit&fileName=" + fileId;
window.open(url, "_blank");
jq('#hiddenFileName').val("");
jq.unblockUI();
document.location.reload();
});
jq(document).on("click", "#beginViewConverted:not(.disable)", function () {
var fileId = encodeURIComponent(jq('#hiddenFileName').attr("data"));
var url = UrlEditor + "?action=view&fileName=" + fileId;
window.open(url, "_blank");
jq('#hiddenFileName').val("");
jq.unblockUI();
document.location.reload();
});
jq(document).on("click", "#downloadConverted:not(.disable)", function () {
var fileId = jq('#hiddenFileName').attr("data");
if (jq("#downloadConverted").attr("data") == "fromConverter") window.location.assign(fileId);
else window.open("/download?fileName=" + encodeURIComponent(fileId), "_blank");
});
jq(document).on("click", ".convert-file", function () {
const currentElement = jq(this);
var fileName = currentElement.attr("data");
var type = currentElement.attr("data-type");
jq.blockUI({
theme: true,
title: "Converting file" + "<div class=\"dialog-close\"></div>",
message: jq("#convertingProgress"),
overlayCSS: { "background-color": "#aaa" },
themedCSS: { width: "539px", top: "20%", left: "50%", marginLeft: "-269px" }
});
jq("#convertFileName").text(decodeURIComponent(fileName));
jq("#convertFileName").removeClass("word slide cell");
jq("#convertFileName").addClass(type);
jq("#convTypes").empty();
let format = formatManager.findByExtension(fileName.split('.').pop());
if (format) {
format.convert.forEach(ext => {
jq("#convTypes").append(jq(`<td name="convertingTypeButton" id="wordTo${ext}" class="button hoar" data="${ext}">${ext}</td>`));
});
}
jq("#hiddenFileName").val(fileName);
jq("#convertStep1").addClass("done");
jq("#convertStep2").addClass("waiting");
});
jq(document).on("click", "td[name='convertingTypeButton']:not(.disable, .orange)", function () {
const currentElement = jq(this);
let id = currentElement[0].id;
let fileExt = jq(`#${id}`).attr("data");
jq(`#${id}`).addClass("orange");
jq("td[name='convertingTypeButton']").addClass("disable");
jq("#convertStep2").removeClass("waiting").removeClass("done").addClass("current");
jq("#convertStep2").text('2. File conversion');
jq("#convert-descr").removeClass("disable");
jq("#convertPercent").text("0 %");
jq("#hiddenFileName").attr("placeholder",fileExt);
jq("#downloadConverted").addClass("disable");
jq("#beginEditConverted").addClass("disable");
jq("#beginViewConverted").addClass("disable");
mustReload = true;
convertFile();
});
function convertFile (filePass) {
let fileName = decodeURIComponent(jq("#hiddenFileName").val());
let fileExt = jq("#hiddenFileName").attr("placeholder");
filePass = filePass ? filePass : null;
if (timer != null) {
clearTimeout(timer);
}
timer = setTimeout(function () {
jq.ajax({
async: true,
contentType: "application/json",
type: "post",
dataType: "json",
data: JSON.stringify({filename: fileName, filePass: filePass, fileExt: fileExt, keepOriginal: true}),
url: UrlConverter,
complete: function (data) {
try {
var response = jq.parseJSON(data.responseText);
} catch (e) {
response = { error: e };
}
if (!response.filename && !response.percent && response.error) {
jq("#convertStep2").removeClass("current").addClass("error");
jq("#convertStep2").text(`2. File conversion to ${fileExt}`);
jq("#convert-error").removeClass("hidden");
jq("#convert-error").text(`${response.error}`);
jq("td[name='convertingTypeButton']").removeClass("disable orange");
return;
}
if (response.percent != undefined && response.percent != 100) {
jq("#convertPercent").text(`${response.percent} %`);
convertFile();
} else {
jq("#convertPercent").text(`${response.percent} %`);
jq("#convertStep2").removeClass("current").addClass("done");
jq("#convertStep2").text(`2. File conversion to ${fileExt}`);
jq("#downloadConverted").removeClass("disable");
if (response.error !== "FileTypeIsNotSupported") {
jq("#hiddenFileName").attr("data",response.filename);
jq("#beginEditConverted").removeClass("disable");
jq("#beginViewConverted").removeClass("disable");
jq("#downloadConverted").attr("data","fromStorage");
} else {
let newFilename = fileName.split('.').slice(0,-1).join('.')
jq("#hiddenFileName").attr("data",response.filename.split("&filename=download").join(`&filename=${newFilename}`));
jq("#downloadConverted").attr("data","fromConverter");
}
jq("td[name='convertingTypeButton']").removeClass("disable orange");
}
}
});
}, 1000);
}
jq(document).on("click", "#cancelEdit, .dialog-close", function () {
jq('#hiddenFileName').val("");
jq("#embeddedView").attr("src", "");

37
web/documentserver-example/java-spring/src/main/resources/templates/index.html
View File

@ -154,8 +154,7 @@
<td class="tableHeaderCell tableHeaderCellFileName">Filename</td>
<td class="tableHeaderCell tableHeaderCellEditors contentCells-shift">Editors</td>
<td class="tableHeaderCell tableHeaderCellViewers">Viewers</td>
<td class="tableHeaderCell tableHeaderCellDownload">Download</td>
<td class="tableHeaderCell tableHeaderCellRemove">Remove</td>
<td class="tableHeaderCell tableHeaderCellAction">Action</td>
</tr>
</thead>
</table>
@ -271,14 +270,18 @@
<img src="css/img/embeded.svg" alt="Open in embedded mode" title="Open in embedded mode"/>
</a>
</td>
<td class="contentCells contentCells-icon contentCells-shift downloadContentCellShift">
<td class="contentCells contentCells-icon">
<a class="convert-file" th:data="${files[iState.index].getName()}" th:data-type="${docTypes[iState.index]}">
<img class="icon-action" src="css/img/convert.svg" alt="Convert" title="Convert" /></a>
</td>
<td class="contentCells contentCells-icon downloadContentCellShift">
<a th:href="@{/download(fileName=${files[iState.index].getName()})}" target="_blank">
<img class="icon-download" src="css/img/download.svg" alt="Download" title="Download" />
</a>
</td>
<td class="contentCells contentCells-icon contentCells-shift">
<a class="delete-file" th:attr="data-filename=${files[iState.index].getName()}">
<img class="icon-delete" src="css/img/delete.svg" alt="Delete" title="Delete" />
<img class="icon-action" src="css/img/delete.svg" alt="Delete" title="Delete" />
</a>
</td>
</tr>
@ -346,6 +349,32 @@
</div>
</div>
<div id="convertingProgress">
<div id="convertingSteps">
<span id="convertFileName" class="convertFileName"></span>
<span id="convertStep1" class="step">1. Select a format file to convert</span>
<span class="step-descr">The converting speed depends on file size and additional elements it contains.</span>
<table cellspacing="0" cellpadding="0" width="100%" class="convertTable">
<tbody>
<tr class="typeButtonsRow" id="convTypes"></tr>
</tbody>
</table>
<br />
<span id="convertStep2" class="step">2. File conversion</span>
<span class="step-descr disable" id="convert-descr">The file is converted <div class="convertPercent" id="convertPercent">0 %</div></span>
<span class="step-error hidden" id="convert-error"></span>
<div class="describeUpload">Note the speed of all operations depends on your connection quality and server location.</div>
<input type="hidden" name="hiddenFileName" id="hiddenFileName" />
</div>
<br />
<div class="buttonsMobile">
<div id="downloadConverted" class="button converting orange disable">DOWNLOAD</div>
<div id="beginViewConverted" class="button converting wide gray disable">VIEW</div>
<div id="beginEditConverted" class="button converting wide gray disable">EDIT</div>
<div id="cancelEdit" class="button converting gray">CANCEL</div>
</div>
</div>
<span id="loadScripts" th:attr="data-docs=${datadocs}"></span>
<footer>