基于jeesite框架如何使用pdf.js实现图片和pdf文件的预览？

dongfangzhaoyue / 2023-05-05 / 原文

1.先添加预览按钮，jeesite提供了回调函数：

function fileuploadCallback(id, act, $this, fileUploadId, fileUrl, fileName, fileUpload) {
    if (act == 'addFile') {
        html = '<td class="thisBox">' +
            '<input type="button" onclick="previewFile(\''+ fileUrl +'\')" value="预览"/>' +
            '</td>';
        $('[fileuploadid="' + fileUploadId + '"]').parent().prev().prev().prev().prev().before(html)
    }
}
2.对按钮的绑定事件进行设计，主要包含弹窗大小的限制，以及图片还是pdf格式的判断：

function previewFile(fileUrl){
    var suffix = fileUrl.substring(fileUrl.lastIndexOf('.'), fileUrl.length);
    var iWidth = 1300;                          //弹出窗口的宽度;
    var iHeight = 800;                         //弹出窗口的高度;
    var iTop = (screen.availHeight-800)/2;
    var iLeft = (screen.availWidth-1300)/2;
    if ('.pdf' == suffix) {
        window.open("${ctxStatic}/pdf/web/viewer.html?file=" + fileUrl,'','width='+iWidth+',height='+iHeight+',top='+iTop+',left='+iLeft+',toolbar=no,menubar=no,location=no,status=yes');
    } else{
        var myWindow = window.open('','','width='+iWidth+',height='+iHeight+',top='+iTop+',left='+iLeft+',toolbar=no,menubar=no,location=no,status=yes');
        myWindow.document.write('<div style="display: flex;width: 500px;height: 200px;border: 0px;">' +
            '<div style="margin: auto;width: 10px;height: 50px;border: 0px;">' +
            '<embed src="'+ fileUrl +'" style="margin: auto;width: 800px;height: 600px;"></embed></div></div>');
    }
};
（主要讲解：${ctxStatic}/pdf/web/viewer.html?file=" + fileUrl 前边的路径是你引入的pdf.js框架存放的项目位置，后面的是pdf文件的路径，
pdf.js在初次下载完后，需要改一下viewer.js里的defaultOptions.defaultUrl，把默认的测试pdf文件置空