Viewer.js的简单使用

前台页面要求图片的查看，是在表格中点击查看才弹出图片，网上发现用Viewer插件的挺多，就选用的这款插件，但是Viewer插件会产生缩略图，这里取巧了，将缩略图统一替换成了一个带有查看两字的小图片，这样就解决了表格中方缩略图空间不足的问题。

下载地址：http://www.jqhtml.com/6750.html

引用

<link rel="stylesheet" type="text/css" href="/plugins/viewer/css/viewer.min.css">
<script type="text/javascript" charset="utf-8" src="/plugins/viewer/js/viewer.min.js"></script>

我这里引用的是js版的，没有使用jquery版本的，刚开始也是用的jquery版的，出现了一些bug，在重新请求的时候页面刷新而导致点开查看的时候总是显示的是空白，换成js版的，在重新加载的时候清空下viewer就好使了，大家可以多看看上面的几个index的示例。

js代码

/**
 * 获取文件的图片
 * @param uuid
 */
var viewer;
var flag = false;
function getZFilePic(uuid) {
    $("#zPic").html("");
    $.ajax({
        url: "",
        type: "POST",
        data: {uuid: uuid},
        dataType: "json",
        success: function (data) {
            let status = data.status;
            if (status == 1) {
                let result = data.result;
                let html = "";
                for (let i = 0; i < result.length; i++) {
                    //这里是一段拼接页面的代码 省略了一部分
                   html+="<td><img data-original='****/****.do?uuid=" + result[i].id + "' src='static/ace/images/open.png' alt='查看'></td>";
                }
                $("#zPic").html(html);
                if (result.length > 0) {
                    if (flag) {
//这里做了一个开关，当已经加载过一次的时候，进行第二次加载时，把第一次的销毁掉，不然会出一些莫名其妙的问题
                        viewer.destroy();
                    }
                    viewer = new Viewer(document.getElementById('zPic'), {
                        url: 'data-original',
                        navbar: false//点开查看的时候不显示缩略图
                    });
                    flag = true;
                }
            } else {
                alert(data.message);
            }

        }
    });
}

主要页面代码

<td><img data-original='****/****.do?uuid=" + result[i].id + "' src='static/ace/images/open.png' alt='查看'></td>

data-original这里主要是我们要查看的图片的下载地址或者路径，都可以

src是img标签取巧的时候显示的查看的小图片路径

页面效果

查看图片效果（去掉了查看时候下方的缩略图）

最终的结果还是可以的，我这前台写的比较渣一些，多多见谅吧。

Viewer.js的简单使用

猜你喜欢