一.前端实现图片查看器（放大，缩小，旋转）——Viewer.js
【附参考链接：(14条消息) Viewer.js第一次点击图片无法显示解决方案(vue使用)_李墨瞳的博客-CSDN博客】
1.0 JS和Css文件的引入
<link href="/Scripts/Common/viewer.min.css" rel="stylesheet"><script src="/Scripts/Common/viewer.min.js"></script>
另：1.1 vue框架
【附参考链接：vue 图片放大和缩小的方式 - 搬砖滴 - 博客园 ()】
1.1.1 安装命令
npm install v-viewer --save
1.1.2 vue中全局引入
import Viewer from 'viewerjs'import 'viewerjs/dist/viewer.css'
完整代码：
<template><div><ul id="imgviewer"><div class="sq-content" v-for="(item,index) in cllist" :key="index" ><Col span="4" class="colstyle"><div class="sqdiv" style="display: inline-block;"><div>{{item.wjmc}}</div> <li > <img :data-original="Url .GSurl+ '/wjgl.do? method=viewAttachPage&zlid=' + item.zlid "@click="lookDetail(item)" :src="Url .GSurl+ '/wjgl.do?method=viewAttachPage&zlid=' + item.zlid" ></li> </div></Col></div></ul></div></template><script>import Url from "../../js/url";import Viewer from 'viewerjs'import 'viewerjs/dist/viewer.css'export default{data(){return{//存放查出来的材料资料idcllist:[]}}methods:{// viewer插件，对图片操作（放大 ，缩小 。旋转 ）lookDetail: function (item) {// var that=this;//（应该可以直接用this. 此处用that 指向this 该方法用来解决作用域的问题 ，此处不用this.$nextTick 没有任何影响）// that.$nextTick(function(){var viewPhoto = new Viewer(document.getElementById("imgviewer"),{url: 'data-original',navbar: false,fullscreen: false,title:false,hide:function(){ //在图片消失的时候销毁viewerviewPhoto.destroy()}});viewPhoto.show()// })},}}</script>
说明： img 标签 可以解析二进制流 ， src属性放的是获取图片二进制流的后端方法路径
2.1材料list详情,网络响应结果（this.cllist=clvds）
clvds[ {…}, {…}, {…}, {…}, {…}, {…} ]0Object {cllbbh: "0006", zlid: "bc7254b0-e720-4f25-be3b-1ce4899840bb", wjlx: "01", … }cllbbh"0006"zlid"bc7254b0-e720-4f25-be3b-1ce4899840bb"wjlx"01"wjmc"法定代表人居民身份证正面"1Object {cllbbh: "0006", zlid: "4716c4ca-768a-4d9d-9c80-061858ec77bb", wjlx: "02", … }cllbbh"0006"zlid"4716c4ca-768a-4d9d-9c80-061858ec77bb"wjlx"02"wjmc"法定代表人居民身份证反面"2Object {cllbbh: "0022", zlid: "975d7a34-8741-41da-a6db-ee93f89957a5", wjlx: "01", … }cllbbh"0022"zlid"975d7a34-8741-41da-a6db-ee93f89957a5"wjlx"01"wjmc"经办人居民身份证正面"3Object {cllbbh: "0022", zlid: "a5bf5c47-d76d-4d9e-ba62-52a9c3d9218f", wjlx: "02", … }cllbbh"0022"zlid"a5bf5c47-d76d-4d9e-ba62-52a9c3d9218f"wjlx"02"wjmc"经办人居民身份证反面"4Object {cllbbh: "0017", zlid: "8e84cd0b-1ded-4c64-8a6b-1113c375ac7f", wjmc: "营业执照", … }cllbbh"0017"zlid"8e84cd0b-1ded-4c64-8a6b-1113c375ac7f"wjlx""wjmc"营业执照"5Object {zlid: "18afd528-a52e-4e11-8d3d-6d696c9eabda", wjmc: "现场照片" }zlid"18afd528-a52e-4e11-8d3d-6d696c9eabda"wjmc"现场照片"
2.2 页面效果
说明：可以实现 ：滚轮放大缩小，幻灯片放映，旋转，镜像，复原，切换
