最近在做项目,需要从页面的表格中导出excel,一般导出excel有两种方法:一.习惯上是建模版从后台服务程序中导出:二.根据页面table中导出:综合考虑其中利弊选择二.根据页面table中导出excel,前段有用table的也有用vue的,结佣file-saver和xlsx插件进行导出excel. 没有做封装,直接改的源码 /* generate workbook object from table */ var defaultCellStyle = { font: { name: 'Tim…
 jsp内容忽略,仅写个出发按钮:          <button style="width: 100px" onclick="expertExcel()" >JS导出Excel</button>           <button style="width: 100px" onclick="expertWord()" >JS导出Word</button>           …
js导出excel资料很少,网上也找了很多,基本都不能用,要么只能是IE用,还必须要权限,这是非常不好的.后来到github上找到table2excel.js,虽然可以用,但仍然对IE支持不够,也算不错的东西. 导出的excel文件是xlsx,也可以改为xls打开.注意的是,要对每个table做个标记,加上div框架如代码: <div class="table-responsive table2excel" data-tableName="Test Table 1&qu…
来自:http://www.imooc.com/article/13374 //html代码<!DOCTYPE HTML> <html> <head> <title>Adminstratior Platform</title> <meta content="text/html;charset=utf-8" http-equiv="content-type"> <link rel="…
最近在做项目,前端进行处理数据,导出excel中,还是遇到不少问题,这里将其进行总结一下,博主是vue框架开发,借用file-saver和xlsx插件进行导出excel,我们来看下代码和效果.地址链接如下:https://www.npmjs.com/package/js-xlsx 博主自己封装了一个方法xlsx.js,然后在vue中进行调用就行,如下: import fs from 'file-saver' import XLSX from 'xlsx' export default (json…
前言:在实际开发中经常需要将数据库的数据导出成excel文件,poi方式则是其中一种较为常用的导出框架.简单读取excel文件在之前的一篇有说明 本项目实现需求:user发出一个导出student信息的请求,直接下载包含所有student信息的excel文件到本机.只贴出关键代码,未贴出的很简单,自行脑补 整体流程(服务器端):接收请求------>取出数据库数据------>将数据存成excel临时文件------>通过响应头让浏览器下载此临时文件------>删除临时文件 项目…
本文链接:https://www.cnblogs.com/tujia/p/11358096.html 说明:简单好用的导出助手,轻松导出数据到 excel !! 使用示例: Example: ExcelHelper::export(['用户编号', '用户名'], [[1, '张三'], [2, '李四']], 'demo1.xls'); $bigTitle = 'This is Demo2'; $titles = [ 'userCode' => '用户编号', 'userName' => '…
Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断重试直到程序完成.这允许上传到本地或服务器的网络连接丢失后能够自动恢复上传. 此外,它允许用户暂停,恢复,甚至恢复上传不失状态,因为只有目前上传块将被中止,而不是整个上传.Resumable.js 除了 HTML5 文件 API 意外,没有任何外部依赖.目前,这意味着支持仅限于 Firefox 4+…
先上代码   <script type="text/javascript" language="javascript">   var idTmr;       function getExplorer() {   var explorer = window.navigator.userAgent;   //ie   if (explorer.indexOf("MSIE") >= 0) {   return 'ie';   }  …
之前讲了很多关于项目工程化.前端架构.前端构建等方面的技术,这次说说怎么写一个完美的第三方库. 1. 选择合适的规范来写代码 js 模块化的发展大致有这样一个过程 iife => commonjs/amd => es6,而在这几个规范中: iife: js 原生支持,但一般不会直接使用这种规范写代码 amd: requirejs 定义的加载规范,但随着构建工具的出现,便一般不会用这种规范写代码 commonjs: node 的模块加载规范,一般会用这种规范写 node 程序 es6: ECMA…
转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014年2月开源的一个前端开发库,通过简洁的 API 提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在 GitHub上已经有5000+的star.本文将从各方面对Vue.js做一个深入的介绍. 开发初衷 2013年末,我还在Google Creativ…
原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org…
园子,github,stackoverflow 关于前端下载的文章不少 园子里大部分都是 利用ActiveXObject对象来实现,可他有个缺点安全等级,还有必须安装excel…… github,stackoverflow  有点高大上了,几乎全是英文……无奈只能看看代码了,还好找到了一个比较好的方法 直接上代码:还是看原文好 https://github.com/rainabba/jquery-table2excel http://stackoverflow.com/questions/171…
无聊写了一个JS下拉加载插件,有需要的可以下载. // 使用 // new ManDownLoad("#ul","json/load.json",function(data,obj){ // var str = ""; // data.data.forEach(function(item,index){ // str += "<li>" + item.title + "</li>";…
以前写前台的时候需要用哪些效果从来都是有现成的东西拿来就用的,因为自己真的是有些懒,毫无探索精神,只重视结果,不追求过程. 这个ScrollableGridPlugin.js是从网上找到的一个具有固定表头效果的插件,使用起来灰常的简便,而且效果也是看着不错的.不过毕竟不是量身定做的,所以有的地方在自己的项目中还是要进行一点点小改动,因为实在是太喜欢这个插件了,所以第一次进到里面,看看原作者的思路和写法,然后才能知道如何去改成适合自己项目. 对于js我完全是一个非常业余的选手,下面根据自己的现状对…
今天给大家分享一款基于Ascensor.js全屏切换页面插件,这款实例 适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="general"> <div id="content"> <!--Contenu1--> <div> <div class="contenu&…
接着上一篇纯js移动端日期选择插件,话说今天同事又来咨询省市县联动的效果在移动端中如何实现,还是老样子,百度上一搜,诶~又全是基于jquery.zepto的,更加可恨的是大多数都是PC版的,三个select标签!!!这在移动端上的体验太low了,我想以我的脾气肯定是要自己做的,正好之前做了日期选择,那就依葫芦画瓢自己再做一个吧,来来来,先上效果图: 用法 在html页面中引入input标签,写法如下: <input id="demo1" type="text"…
jquery.validate.js校验select2解决方案 Jquery插件select2校验解决方案 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年9月15日 11:25:26 星期二 http…
xwPop.js弹出消息对话框插件是一款含有多种情景模式的原生模态消息对话框代码,可用于替代浏览器默认的alert弹出对话框,它提供各种参数和方法,功能非常强大.目前已经在项目中有应用到xwpop开发实例. 调用js库<script src="js/jquery-2.1.1.min.js"></script><script src="xwpop/xwpop.js"></script> 方法调用: 部分代码片段: 插件运…
weixinShare.js / 极简微信分享插件 / 版本:0.1 这是一个很简单.很实用的微信分享插件,无需jQuery,只需要在网页里加入一行JS代码,即可自动识别微信浏览器并启动微信分享的提示,效果可见本页右上方 使用方式: 在</body>之前调用以下js文件: <script src='https://publib.qinco.net/weixinShare/js.min.js'></script> 其他: 源代码:https://publib.qinco.…
轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非插件形式实现的效果,后来才改成了封装成插件的形式. 首先要明白轮播图的实现原理和基本布局,大概就是外面有一个容器包裹着(通常是div),容器设置宽高,以及overflow为hidden,超出宽高部分隐藏, 容器里面又包含着另一个容器,包裹着所有的图片,宽为所有图片的总宽度,ul的position为a…
fullPage.js和fullPage都能实现全屏滚动,二者区别是:fullPage.js需依赖于JQuery库,而fullPage不需要依赖任何一个js库,可以单独使用. (代码演示效果并且可以下载查看http://www.dowebok.com/77.html) 一.fullPage.js实现全屏 fullPage.js是开源的JQuery插件库,其Github地址:https://github.com/alvarotrigo/fullPage.js 1.基本演示 1.1 引入文件 <!-…
Mockjs能做什么? 基于 数据模板 生成模拟数据. 基于 HTML模板 生成模拟数据. 拦截并模拟 ajax 请求. 能解决的问题 开发时,前后端进度不同步,后端还没完成数据输出,前端只好写静态模拟数据. 数据太长了,将数据写在js文件里,完成后挨个改url. 某些逻辑复杂的代码,加入或去除模拟数据时得小心翼翼. 想要尽可能还原真实的数据,要么编写更多代码,要么手动修改模拟数据. 特殊的格式,例如IP,随机数,图片,地址,需要去收集. 超烂的破网速… 现在只要前后端沟通好数据格式没前段就可以…
1.vue  过度动画 1.过度 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.Vue 提供了内置的过渡封装组件,该组件用于包裹要实现过渡效果的组件. 语法格式: <transition name = "nameoftransition"> <div></div> </transition> 例如: <div id="databinding"> <button v-on:c…
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="js/jquery/jquery-1…
node.js delete directory & file system delete a not empty directory https://nodejs.org/api/fs.htm fs.rmdir(path[, options], callback) fs.rmdirSync(path[, options]) recursive: true In a Node.js application, you can use the fs.rmdir() method to delete…
原文:js清空input file的值 在做选择本地图片上传的功能时遇到一个问题,第一次点file按钮选择图片完成会触发onchange事件,获取文件后动态在界面上创建img标签展示,但把创建的img元素节点删除后,再点file按钮选择同一个文件后发现图片并没有被重新创建出来. 分析了原因: 因为上一次选择的文件与本次选择的是同一个文件,两次的路径值相同,值没有改变所以导致file不会触发onchange事件,因此需要每次创建完img后重置file的value或者重置file的dom来解决这个问…
前言 今日正式发布一款基于Vue.js的Web视频播放器插件.可配置,操作灵活.跟我一起来体验吧! 线上地址体验 基于vue3.0和vue-vam-video,我开发了一款在线视频播放器. 网址: https://www.maomin.club/site/videoplayer/ 源代码: https://github.com/maomincoding/videoplayer 插件一览 界面简约 可配置 流畅播放 支持Vue2和Vue3 支持m3u8格式 支持多种事件 NPM地址 https:/…
今天在做项目的时候,遇到了前端下载Excel的功能,结果原先的代码,如下: function generate_excel(tableid) {        var table = document.getElementById(tableid);         var html = table.outerHTML;         window.open('data:application/vnd.ms-excel;base64,' + base64_encode(html)); } 此种…
一.element-ui 1.安装依赖Element组件库中的el-table表格导出需要的主要是两个依赖:(xlsx 和 file-saver) npm install --save xlsx file-saver 2.页面 <el-tooltip content="导出数据" placement="top"> <el-button type="warning" plain @click="exportExcel()…