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

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

View File

@ -22,7 +22,6 @@ use yii\helpers\Url;
use yii\web\JqueryAsset;
use yii\web\View;
$this->title = '文件管理';
$this->params['breadcrumbs'][] = $this->title;
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)']) ?>
<?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)']) ?>
<?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: ?>
<?= Html::a($item['name'], ['home/download', 'relativePath' => $relativePath], ['class' => 'file_name']) ?>
<?php endif; ?>
@ -315,6 +316,14 @@ echo '<button id="saveButton" class="btn btn-outline-primary" style="margin-bott
echo '<input type="hidden" id="edFilename" value="">';
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();
$this->registerJsFile('@web/js/home_script.js', ['depends' => [JqueryAsset::class], 'position' => View::POS_END]);
?>

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();
}
});