在下面的代码中，我使用pdfjs实现了pdf的预览功能，但是这里的预览框并没有像浏览器内置预览框那样有打印、旋转、放大缩小等按钮。初步分析原因可能是因为没有pdfviewer库，这里要怎么集成呢？或者说是否是我的思路有误，可以用其他的实现方式呢？
// 函数：渲染PDF到Canvas
function renderPDF(url, canvasId) {
var loadingTask = pdfjsLib.getDocument(url);
loadingTask.promise.then(function(pdf) {
console.log('PDF loaded');
pdf.getPage(1).then(function(page) {
console.log('Page loaded');
var scale = 1.5;
var viewport = page.getViewport({scale: scale, rotation: 0});
var canvas = document.getElementById(canvasId);
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext).promise.then(function() {
console.log('Page rendered');
});
});
}, function(reason) {
console.error(reason);
});
}
//系统加载
$(document).ready(function () {
// 初始化加载菜单内容
var lm_html = '<div class="layui-collapse" lay-accordion="">' + leftSubMenu(convertMenuData(leftMenuData)) + '</div>';
$('.father-box').html(lm_html);
element.init();
// 将搜索按钮点击事件和搜索文本输入回车事件绑定到performSearch函数上
$('.search-button').on('click', performSearch);
$('.search-input').on('keypress', function (event) {
if (event.which === 13) {
performSearch();
element.init();
}
});
// 点击清空按钮时执行
$('.home-button').on('click', function () {
$('.search-input').val(''); // 清空搜索框内容
$('.father-box').html(lm_html);
$('.img-box').html('<div id="home" class="home">欢迎使用检验科外部文档库<br>LIS-DOC</div>');
element.init();
});
$('.search-input').focus();
});
//在右侧父元素father-box上绑定点击事件，事件委托到class为child-li的元素上。
$('.father-box').on('click', '.child-li', function () {
//当点击菜单项时，获取该元素的自定义属性data-id并替换其中的单引号为双引号。
var filesStr = $(this).data("id").replace(/'/g, '"');
//将获取到的文件信息的JSON字符串解析为JavaScript对象。
var files = JSON.parse(filesStr);
//定义一个变量_html，用于存储生成的HTML代码。
var _html = '';
//遍历文件数组，如果文件名包含'.pdf'，则生成一个包含pdf文件的embed元素的div，否则生成一个包含图片的img元素的div。
$.each(files, function (i, file) {
if (file.indexOf('.pdf') > -1) {
// _html += '<div class="d-box embed-d-box"><embed class="pdf-box" src="./files/' + file + '" /></div>';
_html += '<div class="d-box"><canvas id="pdf-canvas"></canvas></div>';
// 渲染PDF
renderPDF('./files/' + file, 'pdf-canvas');
} else if (file.indexOf('.mp4') > -1) {
_html += '<div class="d-box video-d-box"><video controls><source src="./files/' + file + '" type="video/mp4"></video></div>';
} else {
_html += '<div class="d-box"><img src="./files/' + file + '"></div>';
}
});
//将生成的HTML代码插入到class为img-box的元素中。
$('.img-box').html(_html);
//将class为embed-d-box的div的高度设置为浏览器窗口高度减去55。
$('div.embed-d-box').height($(window).height() - 55)
//函数提前返回，下面的代码不会执行。
return;
//获取点击元素在兄弟元素中的索引和在父元素layui-colla-item中的索引。
var childLiIndex = $(this).index();
var fatherIndex = $('.father-box').find('.layui-colla-item').index($(this).parent().parent()
.parent());
//遍历imgs对象，找到父元素对应的key。
for (var key in imgs) {
//根据key获取父元素对应的子元素对象。
if (key == fatherIndex) {
//遍历子元素对象，找到对应的子菜单项的key。
var fatheritem = imgs[fatherIndex];
//根据key获取子菜单项对应的文件名数组childimgArr。
for (var childkey in fatheritem) {
if (childkey == childLiIndex) {
var childimgArr = fatheritem[childkey];
var _html = '';
//遍历文件名数组，如果文件名包含'.pdf'，则生成一个包含pdf文件的embed元素的div，否则生成一个包含图片的img元素的div。
for (var i = 0; i < childimgArr.length; i++) {
if (childimgArr[i].indexOf('.pdf') > -1) {
_html += '<div class="d-box embed-d-box"><embed class="pdf-box" src="./files/' + childimgArr[
i] + '"></div>'
} else if (childimgArr[i].indexOf('.mp4') > -1) {
_html += '<div class="d-box video-d-box"><video controls><source src="./files/' + childimgArr[
i] + '" type="video/mp4"></video></div>'
} else {
_html += '<div class="d-box"><img src="./img/' + childimgArr[i] +
'"></div>'
}
}
//将生成的HTML代码插入到class为img-box的元素中。
$('.img-box').html(_html);
}
}
}
}
})
