搜索到
103
篇与
的结果
-
vue-pdf通过流的方式在线预览Pdf文件 简介vue-pdf是一个支持在线预览pdf的vue插件。网上较少的比较多的是直接打开一个pdf文件的uri链接。本文另辟蹊径，通过流的方式在线展示Pdf文件。vue-pdf安装安装命令npm install --save vue-pdf如果注册了淘宝源，也可以使用以下命令cnpm install --save vue-pdf使用组件<template> <el-dialog :visible.sync="viewPdf" :show-close="false" width="40%" height="100%" :modal="true" :close-on-click-modal="true" :close-on-press-escape="true" @close='closeDialog' class="el_dialog"> <div v-show="fileType === 'pdf'" class="pdf"> <pdf :src="src" ref="pdf" @progress="loadedRatio = $event" @num-pages="pageTotalNum=$event" :page="pageNum"> </pdf> <el-button-group style="text-align: center"> <el-button type="primary" icon="el-icon-arrow-left" size="mini" @click="prePage">上一页</el-button> <el-button type="primary" size="mini" @click="nextPage">下一页<i class="el-icon-arrow-right el-icon--right"></i> </el-button> </el-button-group> <div style="marginTop: 10px; color: #409EFF">{{ pageNum }} / {{ pageTotalNum }}</div> </div> </el-dialog> </template> <script> import pdf from 'vue-pdf' import { fileView } from '@/api/store/detection/test' export default { components: { pdf }, props: ['attachmentId', 'viewPdf'], data() { return { fileType: 'pdf', src: '', pageNum: 1, pageTotalNum: 1, // 总页数 loadedRatio: 0 //当前页面的加载进度，范围是0 - 1 ，等于1的时候代表当前页已经完全加载完成了 } }, mounted() { this.getNumPages() }, methods: { // 上一页 prePage() { let page = this.pageNum page = page > 1 ? page - 1 : this.pageTotalNum this.pageNum = page }, // 下一页 nextPage() { let page = this.pageNum page = page < this.pageTotalNum ? page + 1 : 1 this.pageNum = page }, getNumPages() { var _this = this fileView({ attachmentId: this.attachmentId }).then(response => { let reader = new window.FileReader() // 使用readAsArrayBuffer读取文件, result属性中将包含一个 ArrayBuffer 对象以表示所读取文件的数据 reader.readAsArrayBuffer(response) reader.onload = function(e) { const result = e.target.result const contentType = response.type // 生成blob图片,需要参数(字节数组, 文件类型) const blob = new Blob([result], { type: 'application/pdf' }) // 使用 Blob 创建一个指向类型化数组的URL, URL.createObjectURL是new Blob文件的方法,可以生成一个普通的url,可以直接使用,比如用在img.src上 if (window.createObjectURL != undefined) { // basic _this.src = window.createObjectURL(blob) } else if (window.webkitURL != undefined) { // webkit or chrome try { _this.src = window.webkitURL.createObjectURL(blob) } catch (error) { } } else if (window.URL != undefined) { // mozilla(firefox) try { _this.src = window.URL.createObjectURL(blob) } catch (error) { } } let loadingTask = pdf.createLoadingTask(this.src) loadingTask.promise.then(pdf => { _this.pageTotalNum = pdf.numPages }).catch(err => { console.error('pdf 加载失败', err) }) } }) }, closeDialog() { this.$emit('resetViewPdf') } } } </script> <style scoped> .el-dialog { position: relative; margin: 0 auto 0px; background: #FFFFFF; border-radius: 2px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); -webkit-box-sizing: border-box; box-sizing: border-box; width: 50%; height: 60%; } .el-dialog__body { border-top: 1px solid #dcdfe6; border-bottom: 1px solid #dcdfe6; max-height: 85% !important; min-height: 70%; overflow-y: auto; } -webkit-scrollbar { width: 2px; background-color: #ccc; } -webkit-scrollbar-thumb { background-color: #0ae; } -webkit-scrollbar-track { background-color: #ccc; } </style> apitest.js//查看附件 export function fileView(data) { return request({ url: '/store/detection/test/fileView/', method: 'get', responseType: 'blob', params: data }) } -
elementui input控件的按键事件的不起作用解决 使用el-input插件后直接使用keyup等 是不生效的，需要在@keyup等事件后加上native，即@keyup.enter.native='(方法)'。@keydown、@keypress都是类似的。<template> <div> <el-input @blur="click" @keyup.enter.native="click" v-model="input" placeholder="请输入内容"></el-input> <input @keyup.enter="click" v-model="input" placeholder="请输入内容"> </div> </template> <script> export default { name: '事件绑定与监听', data () { return { input: '' } }, methods: { click: function () { debugger this.$message({ message: '警告哦，这是一条警告', type: 'warning' }) } } } </script> <style scoped> </style>
-
Vue列表渲染及视图不刷新问题解决 Vue中列表渲染主要使用v-for指令，v-for指令根据接收到的数组，重复渲染v-for绑定到的DOM元素及内部子元素，并且可以通过设置别名的方式，获取数组内数据渲染到节点中。简单演示<template> <div> <el-steps :active="active" finish-status="success" style="text-align: left"> <el-step v-for="step in steps" :title="step.name" :key="step.index"></el-step> </el-steps> <el-button style="margin-top: 12px;" @click="next">下一步</el-button> <el-button style="margin-top: 12px;" @click="restSteps">重置列表</el-button> <el-button style="margin-top: 12px;" @click="changeStep">修改列表不刷新</el-button> <el-button style="margin-top: 12px;" @click="changeStepRefresh">修改列表刷新</el-button> </div> </template> <script> export default { name: '列表渲染', data () { return { active: 0, steps: [ { name: '步骤一', index: 1 }, { name: '步骤二', index: 2 }, { name: '步骤三', index: 3 } ] } }, methods: { next: function () { if (this.active++ > 2) { this.active = 0 } }, restSteps: function () { }, changeStep: function () { }, changeStepRefresh: function () { } } } </script> <style scoped> </style> 列表元素修改重新渲染一般情况下，改变数组时，能自动触发视图更新，但是一下两种情况除外：通过索引直接修改数组元素直接修改数组的长度。俗话活得好，上帝给你关上一扇门，肯定会给你留下一扇窗。针对以上两种情况，我们都有办法对应解决：<template> <div> <el-steps :active="active" finish-status="success" style="text-align: left"> <el-step v-for="step in steps" :title="step.name" :key="step.index"></el-step> </el-steps> <el-button style="margin-top: 12px;" @click="next">下一步</el-button> <el-button style="margin-top: 12px;" @click="restSteps">重置列表不更新</el-button> <el-button style="margin-top: 12px;" @click="restStepsRefresh">重置列表更新</el-button> <el-button style="margin-top: 12px;" @click="changeStep">修改列表不刷新</el-button> <el-button style="margin-top: 12px;" @click="changeStepRefresh">修改列表刷新</el-button> </div> </template> <script> export default { name: '列表渲染', data () { return { active: 0, steps: [ { name: '步骤一', index: 1 }, { name: '步骤二', index: 2 }, { name: '步骤三', index: 3 } ] } }, methods: { next: function () { if (this.active++ > 2) { this.active = 0 } }, restSteps: function () { this.steps.length = 0 }, restStepsRefresh: function () { this.steps.splice(0, 3) }, changeStep: function () { this.steps[2] = { name: '步骤三山', index: 3 } }, changeStepRefresh: function () { this.$set(this.steps, 2, { name: '步骤三山', index: 3 }) } } } </script> <style scoped> </style>
-
jquery ias流式分页插件添加 下载ias插件下载地址：https://github.com/webcreate/Infinite-Ajax-Scroll引入js插件<div class="content"> <#if articles?exists> <!--这里的#if是freemarker语法，用来判断是否有数据，然后进行循环展示--> <#list articles as article> <article class="excerpt excerpt-1"><a class="focus" href="/article/${article.contentId}.html" title=""> <img class="thumb" data-original="${article.imgurl}" src="${article.imgurl}" alt=""></a> <header><a class="cat" href="/category/${article.categoryId}.html">${article.categoryValue}<i></i></a> <h2><a href="/article/${article.contentId}.html" title="">${article.title}</a></h2> </header> <p class="meta"> <time class="time"><i class="glyphicon glyphicon-time"></i> ${article.createDate}</time> <span class="views"><i class="glyphicon glyphicon-eye-open"></i> 共${article.click}人围观</span> <a class="comment" href="article.html#comment"> <i class="glyphicon glyphicon-comment"></i> ${article.comment}个评论</a></p> <p class="note">${article.abstr} ... </p> </article> </#list> </#if> <nav class="pagination" style="display: none;"> <ul> <li class="prev-page"></li> <#if nextPage?exists> <li class="next-page"><a href="/page/${nextPage}">下一页</a></li> </#if> <li><span>共 ${pageNum} 页</span></li> </ul> </nav> </div> 温馨提示需要注意的是container，item，pagination，next，必须要一一对应//无限滚动反翻页 jQuery.ias({ history: false, container: '.content', item: '.excerpt', pagination: '.pagination', next: '.next-page a', trigger: '查看更多', loader: '<div class="pagination-loading"><img src="/images/loading.gif" /></div>', triggerPageThreshold: 5, onRenderComplete: function () { $('.excerpt .thumb').lazyload({ placeholder: '/images/occupying.png', threshold: 400 }); $('.excerpt img').attr('draggable', 'false'); $('.excerpt a').attr('draggable', 'false'); } });分页java代码@RequestMapping("/page/{num}") public String page(Model model, @PathVariable int num) { //获取点击量和评论量 List<Count> countList = countService.getCountList(); //获取最新发布的文章 List<Article> list = articleService.getArticleList(num, countList); model.addAttribute("articles", list); //总数 int count = articleService.getArticleSize(); //总页数 int pageNum = count / 5; model.addAttribute("pageNum", pageNum); if (pageNum > num) { model.addAttribute("nextPage", num + 1); } //今日推荐 List<Article> top2 = articleService.getTopArticleList("2"); model.addAttribute("now", top2.get(0)); return "homepage/index"; }
-
-
js检测flash代码 function flashChecker() { var hasFlash = 0; //是否安装了flash var flashVersion = 0; //flash版本 if (isIE()) { var swf = new ActiveXObject('ShockwaveFlash.ShockwaveFlash'); if (swf) { hasFlash = 0; VSwf = swf.GetVariable("$version"); flashVersion = parseInt(VSwf.split(" ")[1].split(",")[0]); if (flashVersion > 10) { hasFlash = 1; } } } else { if (navigator.plugins && navigator.plugins.length > 0) { var swf = navigator.plugins["Shockwave Flash"]; if (swf) { hasFlash = 1; var words = swf.description.split(" "); for (var i = 0; i < words.length; ++i) { if (isNaN(parseInt(words[i]))) continue; flashVersion = parseInt(words[i]); } } } } return { f: hasFlash, v: flashVersion }; }
-
easyui tab关闭方法 easyui窗体关闭$("#id").tabs('close', 'title');或者$("#id").tabs('close', 'index');第一个方法，可以传递title，也就是页签的标题进行删除，第二个参数可以传递标签的index，也就是索引。通过title关闭标签通过title的方式关闭还是非常简单的。window.parent.$("#mainTab").tabs('close', '影像待办'); 通过index关闭页签我们首先获取到当前的页签，通过页签获取到index，然后通过index进行关闭。var tab = window.parent.$('#mainTab').tabs('getSelected');//获取当前选中tabs var index = window.parent.$('#mainTab').tabs('getTabIndex', tab);//获取当前选中tabs的index window.parent.$('#mainTab').tabs('close', index);//关闭对应index的tabs
-
jQuery post打开窗口并传递数据 有时候，在项目中，我们为了隐藏URL，可以通过post的方式打开一个新的窗口，并将数据post到新的网页。以下代码通过一个隐藏的form标签，实现post打开新窗体功能。function openBlank(action,data,n){ var form = $("<form/>").attr('action',action).attr('method','post'); if(n) form.attr('target','_blank'); var input = ''; $.each(data, function(i,n){ input += '<input type="hidden" name="'+ i +'" value="'+ n +'" />'; }); form.append(input).appendTo("body").css('display','none').submit(); }使用方法：openBlank('/member/succeed.html',{id:'6',describe:'添加控制器, 包括前台与后台',money:$('.money:first').text()});
-
JavaScript结合.Net实现base64加、解密 主要解决问题，客户端通过utf8进行base64加密后，将加密后的信息传送到服务端，服务端对加密后的信息进行解密，获取明文。JavaScript加密、解密代码function Base64() { // private property _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz+/="; // public method for encoding this.encode = function(input) { var output = ""; var chr1, chr2, chr3, enc1, enc2, enc3, enc4; var i = 0; input = _utf8_encode(input); while (i < input.length) { chr1 = input.charCodeAt(i++); chr2 = input.charCodeAt(i++); chr3 = input.charCodeAt(i++); enc1 = chr1 >> 2; enc2 = ((chr1 & 3) << 4) | (chr2 >> 4); enc3 = ((chr2 & 15) << 2) | (chr3 >> 6); enc4 = chr3 & 63; if (isNaN(chr2)) { enc3 = enc4 = 64; } else if (isNaN(chr3)) { enc4 = 64; } output = output + _keyStr.charAt(enc1) + _keyStr.charAt(enc2) + _keyStr.charAt(enc3) + _keyStr.charAt(enc4); } return output; } // public method for decoding this.decode = function(input) { var output = ""; var chr1, chr2, chr3; var enc1, enc2, enc3, enc4; var i = 0; input = input.replace(/[^A-Za-z0-9\+\/\=]/g, ""); while (i < input.length) { enc1 = _keyStr.indexOf(input.charAt(i++)); enc2 = _keyStr.indexOf(input.charAt(i++)); enc3 = _keyStr.indexOf(input.charAt(i++)); enc4 = _keyStr.indexOf(input.charAt(i++)); chr1 = (enc1 << 2) | (enc2 >> 4); chr2 = ((enc2 & 15) << 4) | (enc3 >> 2); chr3 = ((enc3 & 3) << 6) | enc4; output = output + String.fromCharCode(chr1); if (enc3 != 64) { output = output + String.fromCharCode(chr2); } if (enc4 != 64) { output = output + String.fromCharCode(chr3); } } output = _utf8_decode(output); return output; } // private method for UTF-8 encoding _utf8_encode = function(string) { string = string.replace(/\r\n/g, "\n"); var utftext = ""; for (var n = 0; n < string.length; n++) { var c = string.charCodeAt(n); if (c < 128) { utftext += String.fromCharCode(c); } else if ((c > 127) && (c < 2048)) { utftext += String.fromCharCode((c >> 6) | 192); utftext += String.fromCharCode((c & 63) | 128); } else { utftext += String.fromCharCode((c >> 12) | 224); utftext += String.fromCharCode(((c >> 6) & 63) | 128); utftext += String.fromCharCode((c & 63) | 128); } } return utftext; } // private method for UTF-8 decoding _utf8_decode = function(utftext) { var string = ""; var i = 0; var c = c1 = c2 = 0; while (i < utftext.length) { c = utftext.charCodeAt(i); if (c < 128) { string += String.fromCharCode(c); i++; } else if ((c > 191) && (c < 224)) { c2 = utftext.charCodeAt(i + 1); string += String.fromCharCode(((c & 31) << 6) | (c2 & 63)); i += 2; } else { c2 = utftext.charCodeAt(i + 1); c3 = utftext.charCodeAt(i + 2); string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63)); i += 3; } } return string; } }通过Ajax将密文传送到服务端，服务端对密文进行解密.net代码#region 5.0 Base64加密 需指定编码 + static string Base64Encrypt(string source, Encoding encode) /// <summary> /// 5.0 Base64加密 需指定编码 /// </summary> /// <param name="strData"></param> /// <param name="encod"></param> /// <returns></returns> public static string Base64EncryptByEncode(string source, Encoding encode) { return Convert.ToBase64String(encode.GetBytes(source)); } #endregion #region 5.1 Base64解密 需指定编码 + static string Base64Decrypt(string source, Encoding encode) /// <summary> /// 5.1 Base64加密 需指定编码 /// </summary> /// <param name="strData"></param> /// <param name="encod"></param> /// <returns></returns> public static string Base64DecryptByEncode(string source, Encoding encode) { return encode.GetString(Convert.FromBase64String(source)); } #endregion #region 5.2 Base64加密(默认UTF8编码) + static string Base64Encrypt(string source) /// <summary> /// 5.2 Base64加密 /// </summary> /// <param name="strData"></param> /// <returns></returns> public static string Base64Encrypt(string source) { return Convert.ToBase64String(Encoding.UTF8.GetBytes(source)); } #endregion #region 5.3 Base64解密 + static string Base64Decrypt(string source) /// <summary> /// 5.3 Base64加密(默认UTF8编码) /// </summary> /// <param name="strData"></param> /// <param name="encod"></param> /// <returns></returns> public static string Base64Decrypt(string source) { return Encoding.UTF8.GetString(Convert.FromBase64String(source)); } #endregion
-
ckeditor上传图片去掉默认的高度宽度 在使用CKEditor插件上传图片时，插件默认会给予图片宽度高度的大小,而项目需求不需要默认图片的宽高大小样式，这就需要更改CKEditor的配置文件了。网上找了很多解决方案,都无法解决问题，唯一未测试是否可行的是加disallowedContent属性,disallowedContent属性只有在CKEditor 4.4以上的版本才有，而项目使用的是4.2版本，所以如果有使用4.4以上版本的可以尝试使用disallowedContent属性解决。4.2版本解决方法如下：打开目录ckeditor\plugins\image\dialogs中的image.js文件；搜索E.setValue(C.$.height)对应的宽度的是E.setValue(C.$.width)将其值设置为null便可以了。例如E.setValue(null)。设置成功后浏览器记得清除缓存，亲测可行。对应的CKEditor 4.7版本的代码如下：if ("true" == c.getCustomData("isReady")) { var d = a.getContentElement("info", "txtWidth"), f = a.getContentElement("info", "txtHeight"), g; b ? c = g = 0 : (g = c.$.width, c = c.$.height); d && d.setValue(g); f && f.setValue(c) }对应的将setValue的值设置为Null应该就可以了。注：CKEditor 4.7版本的修改方法未测试。有问题可留言探讨。
-
Jquery.cookie的使用 在原始的JavaScript中，我们可以通过document.cookie的方式获取cookie，但是由于cookie是字符串，所以当有多个值时，我们需要通过split方法进行截取。除此之外，我们可以通过正则表达式的方式通过名称获取cookie，但是正则表达式不容易阅读，起码我是这么认为的。为了方便读取或者设置cookie，我们可以引用jQuery.cookie插件。安装插件jQuery.cookie的下载地址，大家可以直接去网上下载，引用方法也非常简单，直接引用一个js即可，如下<script src="~/lib/jquery-cookie/jquery.cookie.js" type="text/javascript"></script>使用jQuery.cookie获取cookieif ($.cookie("UserName") != undefined) { $("#RememberMe").attr('checked', 'checked'); } 设置cookie$.cookie("UserName", $("#UserName").val());
-
解决Safari浏览器select无法设置选中项问题 今天项目上，一个下拉框选择币种的功能，通过链式在Safari下可以直接设置默认选中项，如下代码，完全没有问题$("#CURRENCY-E-BT").empty().append(options).find("option[text='人民币']").attr("selected", "selected");但是如果获取select，然后调用find方法，就不能用了，如下代码，如法正常设置$("#CURRENCY-E-BT").find("option[text='人民币']").attr("selected", "selected");解决办法通过prop属性而不是attr设置选中项即可$("#CURRENCY-E-BT").find("option[text='人民币']").prop("selected", "selected");
