jQuery实现图片下载代码


Posted in jQuery onJuly 18, 2019

jQuery 实现图片下载代码,供大家参考,具体内容如下

function downloadImage(src) {
 var $a = $("<a></a>").attr("href", src).attr("download", "meitu.png");
 $a[0].click();
}

关键调用downloadImage函数代码

onclick=downloadImage(url)

完整 js 代码

$(function () {
 $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['zh-CN'])
 var searchText = $('.search').find('input').val()
 
 var columns = []
 
 columns.push({
 title: '分类',
 field: 'category',
 align: 'center',
 valign: 'middle',
 formatter: function (value, row, index) {
  return value
 }
 }, {
 title: '美图',
 field: 'url',
 align: 'center',
 valign: 'middle',
 formatter: function (value, row, index) {
  return "![](" + value + ")"
 }
 }, {
 title: ' 操作',
 field: 'id',
 align: 'center',
 formatter: function (value, row, index) {
  var html = ""
  html += "<div οnclick='addFavorite(" + value + ")' name='addFavorite' id='addFavorite" + value + "' class='btn btn-default'>收藏</div><p>"
  html += "<div οnclick='deleteById(" + value + ")' name='delete' id='delete" + value + "' class='btn btn-default'>删除</div>"
  return html
 }
 })
 
 $('#meituTable').bootstrapTable({
 url: 'meituSearchJson',
 sidePagination: "server",
 queryParamsType: 'page,size',
 contentType: "application/x-www-form-urlencoded",
 method: 'get',
 striped: false, //是否显示行间隔色
 cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
 pagination: true, //是否显示分页(*)
 paginationLoop: true,
 paginationHAlign: 'right', //right, left
 paginationVAlign: 'bottom', //bottom, top, both
 paginationDetailHAlign: 'left', //right, left
 paginationPreText: ' 上一页',
 paginationNextText: '下一页',
 search: true,
 searchText: searchText,
 searchTimeOut: 500,
 searchAlign: 'right',
 searchOnEnterKey: false,
 trimOnSearch: true,
 sortable: true, //是否启用排序
 sortOrder: "desc", //排序方式
 sortName: "id",
 pageNumber: 0, //初始化加载第一页,默认第一页
 pageSize: 10, //每页的记录行数(*)
 pageList: [5, 10, 20, 50, 100], // 可选的每页数据
 totalField: 'totalPages',
 dataField: 'content', //后端 json 对应的表格数据 key
 columns: columns,
 queryParams: function (params) {
  return {
  size: params.pageSize,
  page: params.pageNumber,
  sortName: params.sortName,
  sortOrder: params.sortOrder,
  searchText: params.searchText
  }
 },
 classes: 'table table-responsive full-width',
 })
 
 
 $(document).on('keydown', function (event) {
 // 键盘翻页事件
 var e = event || window.event || arguments.callee.caller.arguments[0];
 if (e && e.keyCode == 38 || e && e.keyCode == 37) {//上,左
  // 上一页
  $('.page-pre').click()
 }
 if (e && e.keyCode == 40 || e && e.keyCode == 39) {//下,右
  // 下一页
  $('.page-next').click()
 }
 
 })
 
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
jquery.pager.js分页实现详解
Jul 29 jQuery
jquery分页优化操作实例分析
Aug 23 jQuery
jquery图片预览插件实现方法详解
Jul 18 #jQuery
jquery实现垂直无限轮播的方法分析
Jul 16 #jQuery
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 #jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 #jQuery
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 #jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 #jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 #jQuery
You might like
解析wamp5下虚拟机配置文档
2013/06/27 PHP
golang实现php里的serialize()和unserialize()序列和反序列方法详解
2018/10/30 PHP
小程序微信支付功能配置方法示例详解【基于thinkPHP】
2019/05/05 PHP
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
2009/08/09 Javascript
JavaScript Eval 函数使用
2010/03/23 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
2013/02/04 Javascript
验证手机号码的JS方法分享
2013/09/10 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
2013/10/16 Javascript
js+html5实现canvas绘制椭圆形图案的方法
2016/05/21 Javascript
JS仿百度自动下拉框模糊匹配提示
2016/07/25 Javascript
利用Bootstrap实现表格复选框checkbox全选
2016/12/21 Javascript
Js实现中国公民身份证号码有效性验证实例代码
2017/05/03 Javascript
移动端手指放大缩小插件与js源码
2017/05/22 Javascript
详解升级react-router 4 踩坑指南
2017/08/14 Javascript
浅谈angular.js跨域post解决方案
2017/08/30 Javascript
vue组件编写之todolist组件实例详解
2018/01/22 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
2018/08/08 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
2018/11/08 Javascript
bootstrap与pagehelper实现分页效果
2018/12/29 Javascript
使用pm2自动化部署node项目的方法步骤
2019/01/28 Javascript
关于JSON解析的实现过程解析
2019/10/08 Javascript
Postman动态获取返回值过程详解
2020/06/30 Javascript
使用python实现knn算法
2017/12/20 Python
利用python修改json文件的value方法
2018/12/31 Python
python pandas库的安装和创建
2019/01/10 Python
Pycharm新建模板默认添加个人信息的实例
2019/07/15 Python
Django 数据库同步操作技巧详解
2019/07/19 Python
Python socket模块方法实现详解
2019/11/05 Python
python实现拼图小游戏
2020/02/22 Python
考博专家推荐信
2014/05/10 职场文书
质量负责人任命书
2014/06/06 职场文书
学校关爱留守儿童活动方案
2014/08/27 职场文书
2016党员发展对象培训心得体会
2016/01/08 职场文书
初二英语教学反思
2016/02/15 职场文书
MySQL索引知识的一些小妙招总结
2021/05/10 MySQL