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 相关文章推荐
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
Jquery EasyUI $.Parser
Jun 02 jQuery
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
jQuery上传插件webupload使用方法
Aug 01 jQuery
jquery实现楼层滚动效果
Jan 01 jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
jQuery Dom元素操作技巧
Feb 04 jQuery
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
JQuery事件委托原理与用法实例分析
May 13 jQuery
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 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
php 创建以UNIX时间戳命名的文件夹(示例代码)
2014/03/08 PHP
yii2使用ajax返回json的实现方法
2016/05/14 PHP
浅谈php和js中json的编码和解码
2016/10/24 PHP
ie 调试javascript的工具
2009/04/29 Javascript
JQuery1.6 使用方法三
2011/11/23 Javascript
浅析jQuery中常用的元素查找方法总结
2013/07/04 Javascript
Ajax提交与传统表单提交的区别说明
2014/02/07 Javascript
调用DOM对象的focus使文本框获得焦点
2014/02/19 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
2014/06/30 Javascript
推荐6款基于jQuery实现图片效果插件
2014/12/07 Javascript
jquery中radio checked问题
2015/03/16 Javascript
JavaScript实现广告的关闭与显示效果实例
2015/07/02 Javascript
jQuery简单实现两级下拉菜单效果代码
2015/09/15 Javascript
详解javascript实现瀑布流列式布局
2016/01/29 Javascript
js获取form表单所有数据的简单方法
2016/08/18 Javascript
什么是JavaScript中的结果值?
2016/10/08 Javascript
Es6 写的文件import 起来解决方案详解
2016/12/13 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
2017/09/19 Javascript
使用canvas实现一个vue弹幕组件功能
2018/11/30 Javascript
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
JavaScript检测是否开启了控制台(F12调试工具)
2020/10/02 Javascript
Python GAE、Django导出Excel的方法
2008/11/24 Python
Python实现的数据结构与算法之快速排序详解
2015/04/22 Python
Python实现配置文件备份的方法
2015/07/30 Python
Python实现的堆排序算法原理与用法实例分析
2017/11/22 Python
Python利用turtle库绘制彩虹代码示例
2017/12/20 Python
从请求到响应过程中django都做了哪些处理
2018/08/01 Python
Python读写zip压缩文件的方法
2018/08/29 Python
在PyCharm导航区中打开多个Project的关闭方法
2019/01/17 Python
如何在 Django 模板中输出 &quot;{{&quot;
2020/01/24 Python
艺术设计专业毕业生推荐信
2014/07/08 职场文书
实现中国梦思想汇报2014
2014/09/13 职场文书
乡镇党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
春季运动会开幕词
2015/01/28 职场文书
2016学校元旦晚会经典开场白台词
2015/12/03 职场文书
Vue3中的Refs和Ref详情
2021/11/11 Vue.js