使用jstree中的文件浏览器实用程序查看pdf文件

时间:2014-07-10 06:48:01

标签: pdf jstree

我正在使用jstree来创建文件管理解决方案,到目前为止我能够实现所有要求,除了在点击pdf节点时查看pdf。任何人都可以使用随附的filebrowser实用程序指导我。 jstree。

代码段

.on('changed.jstree', function (e, data) {
                if(data && data.selected && data.selected.length) {
                    $.get('?operation=get_content&id=' + data.selected.join(':'), function (d) {
                        if(d && typeof d.type !== 'undefined') {
                            $('#data .content').hide();
                            switch(d.type) {
                                case 'text':
                                case 'txt':
                                case 'md':
                                case 'htaccess':
                                case 'log':
                                case 'sql':
                                case 'php':
                                case 'js':
                                case 'json':
                                case 'css':
                                case 'html':
                                    $('#data .code').show();
                                    $('#code').val(d.content);
                                    break;
                                case 'png':
                                case 'jpg':
                                case 'jpeg':
                                case 'bmp':
                                case 'gif':
                                    $('#data .image img').one('load', function () { $(this).css({'marginTop':'-' + $(this).height()/2 + 'px','marginLeft':'-' + $(this).width()/2 + 'px'}); }).attr('src',d.content);
                                    $('#data .image').show();
                                    break;
                                default:
                                    $('#data .default').html(d.content).show();
                                    break;
                            }
                        }
                    });
                }

1 个答案:

答案 0 :(得分:0)

使用https://github.com/pipwerks/PDFObject

DOM中的

<script type='text/javascript' src="bower_components/pdfobject/pdfobject.min.js"></script>
<div class="pdfviewer" id="pdfRenderer"></div>

并添加:

           case 'pdf':
            $('#data .pdfviewer').show();
            var pdf = new PDFObject({
                url: pdfUrl,
                id: "pdfRendered",
                pdfOpenParams: {
                    view: "FitH"
                }
            }).embed("pdfRenderer");
            break;

到你的树上;)

在没有选择pdf时隐藏元素:

$('#data .pdfviewer').hide();