jmal
GitHub
commit
4c7f232a62
@ -6,12 +6,18 @@ RUN mkdir -p /etc/nginx/servers /var/www
|
||||
|
||||
RUN wget https://github.com/jgraph/drawio/releases/download/v24.4.10/draw.war -O /var/www/draw.war
|
||||
|
||||
RUN wget https://github.com/mozilla/pdf.js/releases/download/v4.3.136/pdfjs-4.3.136-dist.zip -O /var/www/pdfjs.zip
|
||||
|
||||
RUN unzip /var/www/draw.war -d /var/www/draw
|
||||
|
||||
RUN rm -rf /var/www/draw.war /var/www/draw/META-INF /var/www/draw/WEB-INF
|
||||
RUN unzip /var/www/pdfjs.zip -d /var/www/pdfjs
|
||||
|
||||
RUN rm -rf /var/www/pdfjs.zip /var/www/draw.war /var/www/draw/META-INF /var/www/draw/WEB-INF
|
||||
|
||||
RUN apt-get remove -y unzip wget && \
|
||||
apt-get autoremove -y && \
|
||||
apt-get clean
|
||||
|
||||
COPY docker/nginx-drawio/drawio.conf /etc/nginx/servers/drawio.conf
|
||||
|
||||
COPY docker/nginx-drawio/pdfjs.conf /etc/nginx/servers/pdfjs.conf
|
||||
|
||||
5
docker/nginx-drawio/pdfjs.conf
Normal file
5
docker/nginx-drawio/pdfjs.conf
Normal file
@ -0,0 +1,5 @@
|
||||
server {
|
||||
listen 8081;
|
||||
server_name localhost;
|
||||
root /var/www/pdfjs;
|
||||
}
|
||||
18
nginx.conf
18
nginx.conf
@ -195,6 +195,24 @@ http {
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Connection $connection_upgrade;
|
||||
}
|
||||
|
||||
location /pdf.js/ {
|
||||
proxy_pass http://localhost:8081/;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Real-PORT $remote_port;
|
||||
proxy_set_header X-Forwarded-Host $the_host//pdf.js;
|
||||
proxy_set_header X-Forwarded-Proto $the_scheme;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header Host $http_host;
|
||||
proxy_set_header Scheme $scheme;
|
||||
proxy_set_header Server-Protocol $server_protocol;
|
||||
proxy_set_header Server-Name $server_name;
|
||||
proxy_set_header Server-Addr $server_addr;
|
||||
proxy_set_header Server-Port $server_port;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Connection $connection_upgrade;
|
||||
}
|
||||
}
|
||||
|
||||
include servers/*;
|
||||
|
||||
282
public/resource/epubjs/epub.css
Normal file
282
public/resource/epubjs/epub.css
Normal file
@ -0,0 +1,282 @@
|
||||
body {
|
||||
margin: 0;
|
||||
background: #fafafa;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
color: #333;
|
||||
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
min-height: 800px;
|
||||
}
|
||||
|
||||
#title {
|
||||
width: 900px;
|
||||
min-height: 18px;
|
||||
margin: 10px auto;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
color: #E2E2E2;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
#title:hover {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
#viewer.spreads {
|
||||
width: 900px;
|
||||
height: 600px;
|
||||
box-shadow: 0 0 4px #ccc;
|
||||
border-radius: 5px;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
margin: 10px auto;
|
||||
background: white url('ajax-loader.gif') center center no-repeat;
|
||||
top: calc(50vh - 400px);
|
||||
}
|
||||
|
||||
#viewer.spreads .epub-view > iframe {
|
||||
background: white;
|
||||
}
|
||||
|
||||
#viewer.scrolled {
|
||||
overflow: hidden;
|
||||
width: 800px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
background: url('ajax-loader.gif') center center no-repeat;
|
||||
box-shadow: 0 0 4px #ccc;
|
||||
padding: 20px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
#viewer.scrolled .epub-view > iframe {
|
||||
background: white;
|
||||
}
|
||||
|
||||
#prev {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#next {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#toc {
|
||||
display: block;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
#viewer.spreads:after {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
border-right: 1px #000 solid;
|
||||
height: 90%;
|
||||
z-index: 1;
|
||||
left: 50%;
|
||||
margin-left: -1px;
|
||||
top: 5%;
|
||||
opacity: .15;
|
||||
box-shadow: -2px 0 15px rgba(0, 0, 0, 1);
|
||||
content: "";
|
||||
}
|
||||
|
||||
#viewer.spreads.single:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#prev {
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
#next {
|
||||
right: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.arrow {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
margin-top: -32px;
|
||||
font-size: 64px;
|
||||
color: #E2E2E2;
|
||||
font-family: arial, sans-serif;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.navlink {
|
||||
margin: 14px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.arrow:hover, .navlink:hover {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.arrow:active, .navlink:hover {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#book-wrapper {
|
||||
width: 480px;
|
||||
height: 640px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #ccc;
|
||||
margin: 28px auto;
|
||||
background: #fff;
|
||||
border-radius: 0 5px 5px 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#book-viewer {
|
||||
width: 480px;
|
||||
height: 660px;
|
||||
margin: -30px auto;
|
||||
-moz-box-shadow: inset 10px 0 20px rgba(0,0,0,.1);
|
||||
-webkit-box-shadow: inset 10px 0 20px rgba(0,0,0,.1);
|
||||
box-shadow: inset 10px 0 20px rgba(0,0,0,.1);
|
||||
}
|
||||
|
||||
#book-viewer iframe {
|
||||
padding: 40px 40px;
|
||||
}
|
||||
|
||||
#controls {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
left: 50%;
|
||||
width: 400px;
|
||||
margin-left: -200px;
|
||||
text-align: center;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#controls > input[type=range] {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
#navigation {
|
||||
width: 400px;
|
||||
height: 100vh;
|
||||
position: absolute;
|
||||
overflow: auto;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: #777;
|
||||
-webkit-transition: -webkit-transform .25s ease-out;
|
||||
-moz-transition: -moz-transform .25s ease-out;
|
||||
-ms-transition: -moz-transform .25s ease-out;
|
||||
transition: transform .25s ease-out;
|
||||
|
||||
}
|
||||
|
||||
#navigation.fixed {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
#navigation h1 {
|
||||
width: 200px;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
color: #fff;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#navigation h2 {
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
color: #B0B0B0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#navigation ul {
|
||||
padding-left: 36px;
|
||||
margin-left: 0;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
width: 340px;
|
||||
}
|
||||
|
||||
#navigation ul li {
|
||||
list-style: decimal;
|
||||
margin-bottom: 10px;
|
||||
color: #cccddd;
|
||||
font-size: 12px;
|
||||
padding-left: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
#navigation ul li a {
|
||||
color: #ccc;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#navigation ul li a:hover {
|
||||
color: #fff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#navigation ul li a.active {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#navigation #cover {
|
||||
display: block;
|
||||
margin: 24px auto;
|
||||
}
|
||||
|
||||
#navigation #closer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 12px;
|
||||
color: #cccddd;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
#navigation.closed {
|
||||
-webkit-transform: translate(-400px, 0);
|
||||
-moz-transform: translate(-400px, 0);
|
||||
-ms-transform: translate(-400px, 0);
|
||||
transform: translate(-400px, 0);
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.close-x {
|
||||
stroke: #cccddd;
|
||||
fill: transparent;
|
||||
stroke-linecap: round;
|
||||
stroke-width: 5;
|
||||
}
|
||||
|
||||
.close-x:hover {
|
||||
stroke: #fff;
|
||||
}
|
||||
|
||||
#opener {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 10px;
|
||||
stroke: #E2E2E2;
|
||||
fill: #E2E2E2;
|
||||
|
||||
}
|
||||
|
||||
#opener:hover {
|
||||
stroke: #777;
|
||||
fill: #777;
|
||||
}
|
||||
1
public/resource/epubjs/epubjs@0.3.88.min.js
vendored
Normal file
1
public/resource/epubjs/epubjs@0.3.88.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
13
public/resource/epubjs/jszip@3.10.1.min.js
vendored
Normal file
13
public/resource/epubjs/jszip@3.10.1.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
167
public/resource/epubjs/viewer.html
Normal file
167
public/resource/epubjs/viewer.html
Normal file
@ -0,0 +1,167 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>EPUB.js Spreads Example</title>
|
||||
|
||||
<script src="./jszip@3.10.1.min.js"></script>
|
||||
<script src="./epubjs@0.3.88.min.js"></script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="./epub.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!-- <div id="title"></div> -->
|
||||
<select id="toc"></select>
|
||||
<div id="viewer" class="spreads"></div>
|
||||
<a id="prev" href="#prev" class="arrow">‹</a>
|
||||
<a id="next" href="#next" class="arrow">›</a>
|
||||
|
||||
<script>
|
||||
var params =
|
||||
URLSearchParams &&
|
||||
new URLSearchParams(document.location.search.substring(1))
|
||||
var url =
|
||||
params && params.get("url") && decodeURIComponent(params.get("url"))
|
||||
var currentSectionIndex =
|
||||
params && params.get("loc") ? params.get("loc") : undefined
|
||||
let blob = fetch(url).then((res) => res.blob())
|
||||
var book = ePub(
|
||||
blob.then((blob) => blob.arrayBuffer()),
|
||||
{
|
||||
restore: true,
|
||||
reload: true,
|
||||
spreads: true,
|
||||
}
|
||||
)
|
||||
var rendition = book.renderTo("viewer", {
|
||||
width: "100%",
|
||||
height: 600,
|
||||
spread: "always",
|
||||
})
|
||||
|
||||
rendition.display(currentSectionIndex);
|
||||
|
||||
book.ready.then(function() {
|
||||
|
||||
var next = document.getElementById("next");
|
||||
|
||||
next.addEventListener("click", function(e){
|
||||
book.package.metadata.direction === "rtl" ? rendition.prev() : rendition.next();
|
||||
e.preventDefault();
|
||||
}, false);
|
||||
|
||||
var prev = document.getElementById("prev");
|
||||
prev.addEventListener("click", function(e){
|
||||
book.package.metadata.direction === "rtl" ? rendition.next() : rendition.prev();
|
||||
e.preventDefault();
|
||||
}, false);
|
||||
|
||||
var keyListener = function(e){
|
||||
|
||||
// Left Key
|
||||
if ((e.keyCode || e.which) == 37) {
|
||||
book.package.metadata.direction === "rtl" ? rendition.next() : rendition.prev();
|
||||
}
|
||||
|
||||
// Right Key
|
||||
if ((e.keyCode || e.which) == 39) {
|
||||
book.package.metadata.direction === "rtl" ? rendition.prev() : rendition.next();
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
rendition.on("keyup", keyListener);
|
||||
document.addEventListener("keyup", keyListener, false);
|
||||
|
||||
})
|
||||
|
||||
var title = document.getElementById("title");
|
||||
|
||||
rendition.on("rendered", function(section){
|
||||
var current = book.navigation && book.navigation.get(section.href);
|
||||
|
||||
if (current) {
|
||||
var $select = document.getElementById("toc");
|
||||
var $selected = $select.querySelector("option[selected]");
|
||||
if ($selected) {
|
||||
$selected.removeAttribute("selected");
|
||||
}
|
||||
|
||||
var $options = $select.querySelectorAll("option");
|
||||
for (var i = 0; i < $options.length; ++i) {
|
||||
let selected = $options[i].getAttribute("ref") === current.href;
|
||||
if (selected) {
|
||||
$options[i].setAttribute("selected", "");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
rendition.on("relocated", function(location){
|
||||
console.log(location);
|
||||
|
||||
var next = book.package.metadata.direction === "rtl" ? document.getElementById("prev") : document.getElementById("next");
|
||||
var prev = book.package.metadata.direction === "rtl" ? document.getElementById("next") : document.getElementById("prev");
|
||||
|
||||
if (location.atEnd) {
|
||||
next.style.visibility = "hidden";
|
||||
} else {
|
||||
next.style.visibility = "visible";
|
||||
}
|
||||
|
||||
if (location.atStart) {
|
||||
prev.style.visibility = "hidden";
|
||||
} else {
|
||||
prev.style.visibility = "visible";
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
rendition.on("layout", function(layout) {
|
||||
let viewer = document.getElementById("viewer");
|
||||
|
||||
if (layout.spread) {
|
||||
viewer.classList.remove('single');
|
||||
} else {
|
||||
viewer.classList.add('single');
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener("unload", function () {
|
||||
console.log("unloading");
|
||||
this.book.destroy();
|
||||
});
|
||||
|
||||
book.loaded.navigation.then(function(toc){
|
||||
var $select = document.getElementById("toc"),
|
||||
docfrag = document.createDocumentFragment();
|
||||
|
||||
toc.forEach(function(chapter) {
|
||||
var option = document.createElement("option");
|
||||
option.textContent = chapter.label;
|
||||
option.setAttribute("ref", chapter.href);
|
||||
|
||||
docfrag.appendChild(option);
|
||||
});
|
||||
|
||||
$select.appendChild(docfrag);
|
||||
|
||||
$select.onchange = function(){
|
||||
var index = $select.selectedIndex,
|
||||
url = $select.options[index].getAttribute("ref");
|
||||
rendition.display(url);
|
||||
return false;
|
||||
};
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,6 +1,20 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export default {
|
||||
getPreviewConfig(params) {
|
||||
return request({
|
||||
url: '/cloud/setting/preview/config',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
},
|
||||
updatePreviewConfig(data) {
|
||||
return request({
|
||||
url: '/cloud/setting/preview/config',
|
||||
method: 'put',
|
||||
data
|
||||
})
|
||||
},
|
||||
getTranscodeConfig(params) {
|
||||
return request({
|
||||
url: '/cloud/setting/transcode/config',
|
||||
|
||||
@ -658,10 +658,11 @@
|
||||
:file="videoPreviewRow"
|
||||
:status.sync="videoPreviewVisible"
|
||||
></video-preview>
|
||||
<office-preview
|
||||
:file="officePreviewRow"
|
||||
:status.sync="officePreviewVisible"
|
||||
></office-preview>
|
||||
<iframe-preview
|
||||
:file="iframePreviewRow"
|
||||
:fileHandler="fileHandler"
|
||||
:status.sync="iframePreviewVisible"
|
||||
></iframe-preview>
|
||||
|
||||
<file-details :audio-cover-url="audioCoverUrl" :image-url="imageUrl" :row-context-data="rowContextData" :visible.sync="drawer"></file-details>
|
||||
|
||||
@ -835,7 +836,7 @@ import '@/utils/directives.js'
|
||||
|
||||
import fileConfig from '@/utils/file-config'
|
||||
import EditElement from '@/views/markdown/EditElement'
|
||||
import OfficePreview from '@/components/preview/OfficePreview'
|
||||
import IframePreview from '@/components/preview/IframePreview.vue'
|
||||
import ShareDialog from '@/components/ShareDialog/index.vue'
|
||||
import Clipboard from 'clipboard'
|
||||
import TagDialog from '@/components/TagDialog/index.vue'
|
||||
@ -847,7 +848,7 @@ export default {
|
||||
FileDetails,
|
||||
TagDialog,
|
||||
ShareDialog,
|
||||
OfficePreview,
|
||||
IframePreview,
|
||||
EditElement,
|
||||
MessageDialog,
|
||||
AudioPreview,
|
||||
@ -1107,8 +1108,9 @@ export default {
|
||||
imagePreviewVisible: false,
|
||||
videoPreviewRow: {},
|
||||
videoPreviewVisible: false,
|
||||
officePreviewRow: {},
|
||||
officePreviewVisible: false,
|
||||
iframePreviewRow: {},
|
||||
fileHandler: {},
|
||||
iframePreviewVisible: false,
|
||||
audioPreviewRow: {},
|
||||
audioPreviewVisible: false,
|
||||
drawer: false,
|
||||
@ -2519,8 +2521,8 @@ export default {
|
||||
case 'docx':
|
||||
case 'xlsx':
|
||||
case 'pptx':
|
||||
this.officePreviewRow = res.data
|
||||
this.officePreviewVisible = true
|
||||
this.iframePreviewRow = res.data
|
||||
this.iframePreviewVisible = true
|
||||
break
|
||||
}
|
||||
const that = this
|
||||
@ -4234,6 +4236,14 @@ export default {
|
||||
this.$emit('selectedFile', selectFile)
|
||||
return
|
||||
}
|
||||
const fileHandler = this.hasIframePreview(row.suffix, this.$store.getters.iframePreviewConfig)
|
||||
if (fileHandler !== null) {
|
||||
// iframe 预览
|
||||
this.iframePreviewVisible = true
|
||||
this.iframePreviewRow = row
|
||||
this.fileHandler = fileHandler
|
||||
return
|
||||
}
|
||||
if (row.contentType.startsWith('image')) {
|
||||
// 图片
|
||||
this.imagePreviewVisible = true
|
||||
@ -4265,13 +4275,11 @@ export default {
|
||||
this.openCompressionVisible = true
|
||||
return
|
||||
}
|
||||
if (
|
||||
row.contentType.indexOf('office') > -1 ||
|
||||
['pdf', 'csv', 'drawio', 'mind', 'glb', 'gltf', 'glTF'].includes(row.suffix)
|
||||
) {
|
||||
// office文件
|
||||
this.officePreviewVisible = true
|
||||
this.officePreviewRow = row
|
||||
if (row.contentType.indexOf('office') > -1 || ['pdf', 'csv', 'drawio', 'mind', 'glb', 'gltf'].includes(row.suffix)) {
|
||||
// iframe 预览
|
||||
this.iframePreviewVisible = true
|
||||
this.iframePreviewRow = row
|
||||
this.fileHandler = {}
|
||||
return
|
||||
}
|
||||
if (row.contentType.indexOf('utf-8') > -1) {
|
||||
@ -4283,6 +4291,15 @@ export default {
|
||||
this.notPreviewDialogVisible = true
|
||||
}
|
||||
},
|
||||
hasIframePreview(suffix, fileHandlers) {
|
||||
for (let key in fileHandlers) {
|
||||
const extensions = key.split(',')
|
||||
if (extensions.includes(suffix)) {
|
||||
return fileHandlers[key]
|
||||
}
|
||||
}
|
||||
return null
|
||||
},
|
||||
determineDownload(file) {
|
||||
this.download(file)
|
||||
this.notPreviewDialogVisible = false
|
||||
|
||||
@ -103,10 +103,18 @@ export default {
|
||||
if (!id) {
|
||||
return
|
||||
}
|
||||
settingApi.getOfficeConfig().then(res => {
|
||||
this.officeServerConfig = res.data
|
||||
this.loadOfficeApi()
|
||||
})
|
||||
|
||||
if (window.shareId) {
|
||||
settingApi.getPublicOfficeConfig({shareId: window.shareId, shareToken: this.$store.getters.shareToken}).then(res => {
|
||||
this.officeServerConfig = res.data
|
||||
this.loadOfficeApi()
|
||||
})
|
||||
} else {
|
||||
settingApi.getOfficeConfig().then(res => {
|
||||
this.officeServerConfig = res.data
|
||||
this.loadOfficeApi()
|
||||
})
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
|
||||
168
src/components/preview/IframeContentPreview.vue
Normal file
168
src/components/preview/IframeContentPreview.vue
Normal file
@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="top-bar">
|
||||
<div class="top-left"></div>
|
||||
<div class="top-center">{{file.name}}</div>
|
||||
<div class="top-right">
|
||||
<div class="top-right-option">
|
||||
<el-select v-if="services.length > 1" size="medium" v-model="url" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in services"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-button size="medium" type="primary" @click="openUrl"><svg-icon icon-class="wailian"/></el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="iframe-content">
|
||||
<iframe ref="iframeContent" name="Iframe Content Preview" :title="file.name" :src="url" sandbox="allow-scripts allow-forms allow-same-origin allow-popups"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "IframeContentPreview",
|
||||
props: {
|
||||
fileUrl: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
file: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
fileHandler: {
|
||||
type: Object,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
url: undefined,
|
||||
services: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.iframeLoad()
|
||||
},
|
||||
methods: {
|
||||
iframeLoad() {
|
||||
if (this.fileHandler) {
|
||||
for (let service in this.fileHandler) {
|
||||
const urlTemplate = this.fileHandler[service]
|
||||
if (!urlTemplate) {
|
||||
continue
|
||||
}
|
||||
const url = decodeURI(this.fileUrl)
|
||||
if (urlTemplate.indexOf('$e_url') > 0) {
|
||||
this.url = urlTemplate.replace('$e_url', encodeURIComponent(url))
|
||||
this.services.push({label: service, value: this.url})
|
||||
}
|
||||
if (urlTemplate.indexOf('$eb_url') > 0) {
|
||||
this.url = urlTemplate.replace('$eb_url', encodeURIComponent(this.base64EncodeUnicode(url)))
|
||||
this.services.push({label: service, value: this.url})
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.url = undefined
|
||||
this.services = []
|
||||
}
|
||||
const iframe = this.$refs.iframeContent;
|
||||
if (iframe.attachEvent) {
|
||||
iframe.attachEvent('onload', () => {
|
||||
this.onReady()
|
||||
})
|
||||
} else {
|
||||
iframe.onload = () => {
|
||||
this.onReady()
|
||||
}
|
||||
}
|
||||
},
|
||||
base64EncodeUnicode(str) {
|
||||
// 首先，将字符串编码为 UTF-8
|
||||
const utf8Bytes = new TextEncoder().encode(str);
|
||||
// 然后，将 Uint8Array 转换为字符串
|
||||
const binaryStr = String.fromCharCode(...utf8Bytes);
|
||||
// 最后，使用 btoa 编码为 Base64
|
||||
return btoa(binaryStr);
|
||||
},
|
||||
onReady() {
|
||||
this.$emit('onReady')
|
||||
// this.url = 'http://192.168.0.233:8012/onlinePreview?url='+encodeURIComponent(this.base64EncodeUnicode('https://cloud.jmal.top/api/file/jmal/tewo/海印缤缤广场/冷机智能控制系统布线图.pdf'))
|
||||
//this.url = 'https://alist-org.github.io/pdf.js/web/viewer.html?file=' + encodeURIComponent('http://localhost:9528/api/file/jmal/jmal/share/滨滨广场冷冻侧采集箱布线图_副本 (1).pdf')
|
||||
if (!this.url) {
|
||||
this.$emit('loadFileFailed')
|
||||
}
|
||||
},
|
||||
openUrl() {
|
||||
window.open(this.url)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.top-bar {
|
||||
width: 100%;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
background: #fff;
|
||||
}
|
||||
.top-left {
|
||||
width: 25%;
|
||||
}
|
||||
.top-center {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
align-content: center;
|
||||
}
|
||||
.top-right {
|
||||
width: 25%;
|
||||
.svg-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
.top-right-option {
|
||||
float: right;
|
||||
margin-right: 3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
height: 2.5rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
>>> .el-select {
|
||||
width: 135px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.iframe-content {
|
||||
position: absolute;
|
||||
top: 2.5rem;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -16,11 +16,13 @@
|
||||
<svg-icon class="preview-close" icon-class="close"/>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div>{{fileType}}</div>
|
||||
<pdf-preview v-if="fileType === 'pdf'" :file="file" :shareId="shareId" :file-url="fileUrl" @onReady="onReady"></pdf-preview>
|
||||
<drawio v-else-if="fileType === 'drawio'" v-show="fileReday" :file="file" :shareId="shareId" :read-only="readOnly" @onEdit="onEdit" @onReady="onReady" @onClose="close"></drawio>
|
||||
<my-mind-editor v-else-if="fileType === 'mind'" :file="file" :shareId="shareId" :read-only="readOnly" @onEdit="onEdit" @onReady="onReady" @onClose="close"></my-mind-editor>
|
||||
<model-preview v-else-if="fileType === 'glTF/GLB'" :file="file" :file-url="fileUrl" :shareId="shareId" @onReady="onReady"></model-preview>
|
||||
<only-office-editor ref="officeEditor" v-else :file="file" :file-url="fileUrl" :shareId="shareId" :sharer="sharer" :read-only="readOnly" @onEdit="onEdit" @manualSave="manualSave" @onClose="close" @onReady="onReady"></only-office-editor>
|
||||
<only-office-editor ref="officeEditor" v-else-if="fileType === 'office'" :file="file" :file-url="fileUrl" :shareId="shareId" :sharer="sharer" :read-only="readOnly" @onEdit="onEdit" @manualSave="manualSave" @onClose="close" @onReady="onReady"></only-office-editor>
|
||||
<iframe-content-preview v-else :file="file" :fileHandler="fileHandler" :file-url="fileUrl" @onReady="onReady" @loadFileFailed="loadFileFailed"></iframe-content-preview>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -32,14 +34,15 @@
|
||||
import ModelPreview from '@/components/office/ModelPreview.vue'
|
||||
import OnlyOfficeEditor from "@/components/office/OnlyOfficeEditor";
|
||||
import MessageDialog from "@/components/message/MessageDialog";
|
||||
import IframeContentPreview from '@/components/preview/IframeContentPreview.vue'
|
||||
import fileConfig from "@/utils/file-config";
|
||||
import PdfPreview from "@/components/office/PdfPreview";
|
||||
import Drawio from "@/components/office/Drawio";
|
||||
import MyMindEditor from "@/components/Minder/minder"
|
||||
|
||||
export default {
|
||||
name: 'OfficePreview',
|
||||
components: { ModelPreview, Drawio, PdfPreview, MessageDialog, OnlyOfficeEditor, MyMindEditor},
|
||||
name: 'IframePreview',
|
||||
components: { IframeContentPreview, ModelPreview, Drawio, PdfPreview, MessageDialog, OnlyOfficeEditor, MyMindEditor},
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
@ -53,6 +56,10 @@ export default {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
fileHandler: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
shareId: {
|
||||
type: String,
|
||||
default: undefined
|
||||
@ -120,6 +127,12 @@ export default {
|
||||
}
|
||||
},
|
||||
getType(suffix) {
|
||||
if (Object.keys(this.fileHandler).length > 0) {
|
||||
return 'other'
|
||||
}
|
||||
if (this.file.contentType.indexOf('office') > -1) {
|
||||
return 'office'
|
||||
}
|
||||
switch (suffix) {
|
||||
case 'drawio':
|
||||
return 'drawio'
|
||||
@ -130,8 +143,11 @@ export default {
|
||||
case 'gltf':
|
||||
case 'glb':
|
||||
return 'glTF/GLB'
|
||||
default:
|
||||
case 'office':
|
||||
case 'csv':
|
||||
return 'office'
|
||||
default:
|
||||
return 'other'
|
||||
}
|
||||
},
|
||||
/**
|
||||
@ -7,6 +7,7 @@ const getters = {
|
||||
name: state => state.user.name,
|
||||
showName: state => state.user.showName,
|
||||
newVersion: state => state.user.newVersion,
|
||||
iframePreviewConfig: state => state.user.iframePreviewConfig,
|
||||
userId: state => state.user.userId,
|
||||
userInfo: state => state.user.userInfo,
|
||||
menuList: state => state.user.menuList,
|
||||
|
||||
@ -33,7 +33,8 @@ const getDefaultState = () => {
|
||||
menuList: [],
|
||||
netdiskName: '',
|
||||
netdiskLogo: '',
|
||||
newVersion: ''
|
||||
newVersion: '',
|
||||
iframePreviewConfig: {}
|
||||
}
|
||||
}
|
||||
|
||||
@ -75,6 +76,9 @@ const mutations = {
|
||||
},
|
||||
SET_NEW_VERSION:(state,newVersion) => {
|
||||
state.newVersion = newVersion;
|
||||
},
|
||||
SET_IFRAME_PREVIEW:(state, iframePreviewConfig) => {
|
||||
state.iframePreviewConfig = iframePreviewConfig;
|
||||
}
|
||||
}
|
||||
|
||||
@ -147,7 +151,7 @@ const actions = {
|
||||
// reject('Verification failed, please Login again.')
|
||||
}
|
||||
|
||||
const { id, username, showName, avatar, netdiskName, netdiskLogo, newVersion} = data
|
||||
const { id, username, showName, avatar, netdiskName, netdiskLogo, newVersion, iframe} = data
|
||||
|
||||
commit('SET_NAME', username)
|
||||
commit('SET_SHOW_NAME', showName)
|
||||
@ -156,6 +160,11 @@ const actions = {
|
||||
commit('SET_USER_INFO', data)
|
||||
commit('SET_NETDISK_NAME', netdiskName)
|
||||
commit('SET_NETDISK_LOGO', netdiskLogo)
|
||||
if (iframe) {
|
||||
commit('SET_IFRAME_PREVIEW', JSON.parse(iframe))
|
||||
} else {
|
||||
commit('SET_IFRAME_PREVIEW', {})
|
||||
}
|
||||
if (newVersion) {
|
||||
commit('SET_NEW_VERSION', newVersion)
|
||||
} else {
|
||||
|
||||
@ -285,7 +285,7 @@
|
||||
}
|
||||
|
||||
>>> .van-grid {
|
||||
padding: 0;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
>>> .van-grid-item__content .svg-icon{
|
||||
|
||||
@ -268,7 +268,7 @@
|
||||
<sim-text-preview :file.sync="textPreviewRow" :status.sync="textPreviewVisible"></sim-text-preview>
|
||||
<image-viewer :fileList="fileList" :file="imagePreviewRow" :status.sync="imagePreviewVisible"></image-viewer>
|
||||
<video-preview :file="videoPreviewRow" :status.sync="videoPreviewVisible"></video-preview>
|
||||
<office-preview :file="officePreviewRow" :status.sync="officePreviewVisible"></office-preview>
|
||||
<iframe-preview :file="officePreviewRow" :status.sync="officePreviewVisible"></iframe-preview>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@ -283,12 +283,12 @@ import ImageViewer from "@/components/preview/ImageViewer";
|
||||
import VideoPreview from "@/components/preview/VideoPreview";
|
||||
import SimTextPreview from "@/components/preview/SimTextPreview";
|
||||
import {suffix} from "@/utils/file-type";
|
||||
import OfficePreview from "@/components/preview/OfficePreview";
|
||||
import IframePreview from "@/components/preview/IframePreview.vue";
|
||||
import Clipboard from "clipboard";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
OfficePreview,
|
||||
IframePreview,
|
||||
SimTextPreview,
|
||||
VideoPreview,
|
||||
ImageViewer, IconFile,
|
||||
|
||||
@ -255,7 +255,7 @@
|
||||
<image-viewer :fileList="fileList" :shareId="shareId" :file="imagePreviewRow"
|
||||
:status.sync="imagePreviewVisible"></image-viewer>
|
||||
<video-preview :file="videoPreviewRow" :shareId="shareId" :status.sync="videoPreviewVisible"></video-preview>
|
||||
<office-preview :file="officePreviewRow" :shareId="shareId" :sharer="sharerUsername" :status.sync="officePreviewVisible"></office-preview>
|
||||
<iframe-preview :file="officePreviewRow" :shareId="shareId" :sharer="sharerUsername" :status.sync="officePreviewVisible"></iframe-preview>
|
||||
<el-divider v-if="!linkFailed && !showShareCode" class="grid-divider" content-position="center"><i
|
||||
class="el-icon-folder-opened"></i> {{ summaries }}
|
||||
</el-divider>
|
||||
@ -290,7 +290,7 @@ import VideoPreview from "@/components/preview/VideoPreview";
|
||||
import AudioPreview from "@/components/preview/AudioPreview";
|
||||
import fileConfig from "@/utils/file-config";
|
||||
import Clipboard from "clipboard";
|
||||
import OfficePreview from "@/components/preview/OfficePreview";
|
||||
import IframePreview from "@/components/preview/IframePreview.vue";
|
||||
import Logo from "@/components/Logo";
|
||||
import store from "@/store";
|
||||
import FileTree from "@/components/FileTree";
|
||||
@ -299,7 +299,7 @@ export default {
|
||||
components: {
|
||||
FileTree,
|
||||
Logo,
|
||||
OfficePreview, IconFile, BreadcrumbFilePath, AlLoading,
|
||||
IframePreview, IconFile, BreadcrumbFilePath, AlLoading,
|
||||
AudioPreview, VideoPreview, ImageViewer, SimTextPreview
|
||||
},
|
||||
data() {
|
||||
|
||||
@ -75,8 +75,13 @@
|
||||
<transcode-config></transcode-config>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="LDAP认证" name="4" class="setting-tab-panel">
|
||||
<el-tab-pane label="预览配置" name="4" class="setting-tab-panel">
|
||||
<div v-if="activeName === '4'">
|
||||
<preview-config></preview-config>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="LDAP认证" name="5" class="setting-tab-panel">
|
||||
<div v-if="activeName === '5'">
|
||||
<ldap-config></ldap-config>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
@ -93,6 +98,7 @@ import settingApi, { getSetting } from "@/api/setting-api";
|
||||
import Logo from "@/components/Logo";
|
||||
import getPageTitle from "@/utils/get-page-title";
|
||||
import UploadImageInput from "@/components/input/UploadImageInput.vue";
|
||||
import PreviewConfig from '@/views/setting/cloudSetting/previewConfig.vue'
|
||||
import {mapGetters, mapState} from "vuex";
|
||||
import store from "@/store";
|
||||
import TaskProgress from "@/components/TaskProgress/index.vue";
|
||||
@ -101,7 +107,7 @@ import TranscodeConfig from "@/views/setting/cloudSetting/transcodeConfig.vue";
|
||||
import OfficeConfig from "@/views/setting/cloudSetting/officeConfig.vue";
|
||||
|
||||
export default {
|
||||
components: {OfficeConfig, TranscodeConfig, LdapConfig, TaskProgress, UploadImageInput, Logo},
|
||||
components: { PreviewConfig, OfficeConfig, TranscodeConfig, LdapConfig, TaskProgress, UploadImageInput, Logo},
|
||||
data() {
|
||||
return {
|
||||
activeName: '1',
|
||||
|
||||
107
src/views/setting/cloudSetting/previewConfig.vue
Normal file
107
src/views/setting/cloudSetting/previewConfig.vue
Normal file
@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<el-form :rules="rules" ref="previewConfigForm" :model="configFormData" label-width="120px" size="small"
|
||||
style="width: 860px" autocomplete="off">
|
||||
<el-form-item label="iframe 预览" prop="iframe">
|
||||
<span class="form-instruction"><a href="https://alist.nn.ci/zh/config/preview.html#iframe-%E9%A2%84%E8%A7%88" target="_blank"><svg-icon icon-class="wailian"/>参考Alist的iframe预览 </a> </span>
|
||||
<el-input
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 2}"
|
||||
:placeholder="defaultIframeConfig"
|
||||
v-model="configFormData.iframe">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" v-loading="saveConfigLoading" @click="submitForm">保存配置</el-button>
|
||||
<el-button type="warning" @click="resetConfig">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import settingApi from '@/api/setting-api'
|
||||
|
||||
export default {
|
||||
name: 'PreviewConfig',
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
},
|
||||
computed: {},
|
||||
data() {
|
||||
const validateIframeFormat = async (rule, value, callback) => {
|
||||
if (!value) {
|
||||
callback()
|
||||
} else {
|
||||
try {
|
||||
this.configFormData.iframe = JSON.stringify(JSON.parse(value), null, 4)
|
||||
} catch (e) {
|
||||
callback(new Error('json格式错误'))
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}
|
||||
return {
|
||||
saveConfigLoading: false,
|
||||
defaultIframeConfig: '{\n' +
|
||||
' "pdf": {\n' +
|
||||
' "PDF.js": "/pdf.js/web/viewer.html?file=$e_url"\n' +
|
||||
' },\n' +
|
||||
' "epub": {\n' +
|
||||
' "epub.js": "/resource/epubjs/viewer.html?url=$e_url"\n' +
|
||||
' }\n' +
|
||||
'}',
|
||||
configFormData: {
|
||||
iframe: '',
|
||||
},
|
||||
rules: {
|
||||
iframe: [
|
||||
{ required: false, validator: validateIframeFormat, trigger: 'submit'}
|
||||
],
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getPreviewConfig()
|
||||
},
|
||||
methods: {
|
||||
getPreviewConfig() {
|
||||
settingApi.getPreviewConfig().then(res => {
|
||||
this.configFormData = res.data
|
||||
})
|
||||
},
|
||||
submitForm() {
|
||||
this.$refs.previewConfigForm.validate((valid) => {
|
||||
if (valid) {
|
||||
this.saveConfig()
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
});
|
||||
},
|
||||
resetConfig() {
|
||||
this.configFormData.iframe = this.defaultIframeConfig
|
||||
},
|
||||
saveConfig() {
|
||||
this.saveConfigLoading = true
|
||||
settingApi.updatePreviewConfig(this.configFormData).then(() => {
|
||||
this.saveConfigLoading = false
|
||||
this.$message.success('保存成功')
|
||||
this.$store.dispatch('user/getInfo')
|
||||
}).catch(() => {
|
||||
this.saveConfigLoading = false
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
padding: 0 !important;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user