chenx221/yii2-netdisk
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

实现PDF预览功能(需要现代浏览器支持)

Browse Source
This commit is contained in:
Chenx221 2024-02-21 11:58:27 +08:00
parent 0ba291a24a
commit f6ec6e2522
Signed by: chenx221
GPG Key ID: D7A9EC07024C3021
2 changed files with 34 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
views/home/index.php
View File

@ -22,7 +22,6 @@ use yii\helpers\Url;
use yii\web\JqueryAsset; use yii\web\JqueryAsset;
use yii\web\View; use yii\web\View;
$this->title = '文件管理'; $this->title = '文件管理';
$this->params['breadcrumbs'][] = $this->title; $this->params['breadcrumbs'][] = $this->title;
FontAwesomeAsset::register($this); FontAwesomeAsset::register($this);
@ -156,6 +155,8 @@ $this->registerCssFile('@web/css/home_style.css');
<?= Html::a($item['name'], ['home/download', 'relativePath' => $relativePath, 'type' => $item['rawType']], ['class' => 'file_name', 'onclick' => 'textEdit(this, event)']) ?> <?= Html::a($item['name'], ['home/download', 'relativePath' => $relativePath, 'type' => $item['rawType']], ['class' => 'file_name', 'onclick' => 'textEdit(this, event)']) ?>
<?php elseif ($item['type'] === 'fa-regular fa-file-audio'): ?> <?php elseif ($item['type'] === 'fa-regular fa-file-audio'): ?>
<?= Html::a($item['name'], ['home/download', 'relativePath' => $relativePath, 'type' => $item['rawType']], ['class' => 'file_name', 'onclick' => 'previewAudio(this, event)']) ?> <?= Html::a($item['name'], ['home/download', 'relativePath' => $relativePath, 'type' => $item['rawType']], ['class' => 'file_name', 'onclick' => 'previewAudio(this, event)']) ?>
<?php elseif ($item['type'] === 'fa-regular fa-file-pdf'): ?>
<?= Html::a($item['name'], ['home/preview', 'relativePath' => $relativePath, 'type' => $item['rawType']], ['class' => 'file_name', 'onclick' => 'previewPdf(this, event)']) ?>
<?php else: ?> <?php else: ?>
<?= Html::a($item['name'], ['home/download', 'relativePath' => $relativePath], ['class' => 'file_name']) ?> <?= Html::a($item['name'], ['home/download', 'relativePath' => $relativePath], ['class' => 'file_name']) ?>
<?php endif; ?> <?php endif; ?>
@ -310,11 +311,19 @@ Modal::begin([
'size' => 'modal-lg', 'size' => 'modal-lg',
]); ]);
echo'<div class="alert alert-success" role="alert" id="ed-alert-success">保存成功</div><div class="alert alert-danger" role="alert" id="ed-alert-fail">保存失败</div>'; echo '<div class="alert alert-success" role="alert" id="ed-alert-success">保存成功</div><div class="alert alert-danger" role="alert" id="ed-alert-fail">保存失败</div>';
echo '<button id="saveButton" class="btn btn-outline-primary" style="margin-bottom: 16px"><i class="fa-regular fa-floppy-disk"></i> 保存文件</button>'; echo '<button id="saveButton" class="btn btn-outline-primary" style="margin-bottom: 16px"><i class="fa-regular fa-floppy-disk"></i> 保存文件</button>';
echo '<input type="hidden" id="edFilename" value="">'; echo '<input type="hidden" id="edFilename" value="">';
echo '<div id="editor" style="width: 100%; height: 500px;"></div>'; echo '<div id="editor" style="width: 100%; height: 500px;"></div>';
Modal::end();
Modal::begin([
'title' => '<h4>PDF预览</h4>',
'id' => 'pdfModal',
'size' => 'modal-xl',
]);
//echo '<object id="pdfObject" type="application/pdf" style="width:100%;height:500px;"></object>';
Modal::end(); Modal::end();
$this->registerJsFile('@web/js/home_script.js', ['depends' => [JqueryAsset::class], 'position' => View::POS_END]); $this->registerJsFile('@web/js/home_script.js', ['depends' => [JqueryAsset::class], 'position' => View::POS_END]);
?> ?>

23
web/js/home_script.js
View File

@ -506,3 +506,26 @@ $('#saveButton').on('click', function () {
} }
}); });
}); });
//pdf preview
var pdfModal = $('#pdfModal');
function previewPdf(element, event) {
event.preventDefault();
var pdfUrl = element.href;
var pdfObject = document.createElement('object');
pdfObject.id = 'pdfObject';
pdfObject.type = 'application/pdf';
pdfObject.style.width = '100%';
pdfObject.style.height = '500px';
pdfObject.data = pdfUrl;
pdfModal.find('.modal-body').append(pdfObject);
pdfModal.modal('show');
}
pdfModal.on('hidden.bs.modal', function () {
var pdfObject = document.getElementById('pdfObject');
if (pdfObject) {
pdfObject.remove();
}
});