项目场景：

工作中我们常用会到 vue+element，其中预览组件难免会涉及到下载功能，或者其它扩展功能，但是el-image 支持的只是简单放大旋转功能，解决方法要么修改组件，要么通过 js动态渲染进去，接下来看操作

解决方法：

通过点击放大时，添加点击事件，然后通过append 添加按钮并且绑定事件，还是看下图吧，兄弟们，粘起来

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><!-- import CSS --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body><div id="app"><div class="demo-image__preview" @click="checkImage"><el-image style="width: 100px; height: 100px":src="url" :preview-src-list="srcList"></el-image></div></div>
</body><!-- import Vue before Element --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!-- import JavaScript --><script src="https://unpkg.com/element-ui/lib/index.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script><script>let vueEle=null;window.installImage=function(){console.log('下载')let srcUrl=document.querySelector('.el-image-viewer__img').src;vueEle.downloadIamge(srcUrl,'图片名字');}vueEle=new Vue({el: '#app',data: function() {return { url:         'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',srcList: ['https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg','https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg']}},methods:{checkImage(){//这个事件要绑定el-image父级盒子上console.log('点击事件');let a=document.querySelector('.el-image-viewer__actions__inner');$(a).append(`<i class="el-icon-download" onclick="installImage()"></i>`)},downloadIamge(imgsrc, name) {//下载图片地址和图片名let image = new Image();// 解决跨域 Canvas 污染问题image.setAttribute("crossOrigin", "anonymous");image.onload = function() {let canvas = document.createElement("canvas");canvas.width = image.width;canvas.height = image.height;let context = canvas.getContext("2d");context.drawImage(image, 0, 0, image.width, image.height);let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据let a = document.createElement("a"); // 生成一个a元素let event = new MouseEvent("click"); // 创建一个单击事件a.download = name || "photo"; // 设置图片名称a.href = url; // 将生成的URL设置为a.href属性a.dispatchEvent(event); // 触发a的单击事件};image.src = imgsrc;}}})</script>
</html>

效果如下

根据需求，还可以添加别的功能按钮。

总结：

感谢你的浏览，如果对你有帮助，请多点赞关注，后续会更新更多工作中遇到的问题以及解决方法。溜了溜了

使用element-ui的el-image图片预览功能支持图片下载相关推荐

带图片预览功能的图片上传
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
elementUi中的图片预览功能（图片放大、缩小）preview-src-list属性
一.图片有时候需要放大预览,放大后可支持放大缩小等功能,element中的preview-src-list属性可以实现. 二.主要代码: <el-form ref="verificat ...
vue+vant使用图片预览功能ImagePreview的问题
如果您搜到这篇文章的话,那员外估计您遇到跟我一样的问题了,即在打开图片预览功能后,如果不关闭预览的图片,同时改变路由的话,会发现即使路由改变了,预览的图片还在文档的最顶层显示,如图: 着实让员外百思不 ...
原生js实现ajax的文件异步提交功能、图片预览功能.实例
采用html5使得选择图片改变时,预览框中图片随之改变.input文件选择框美化.原生js完成文件异步提交效果图: 代码如下,可直接复制并保存为html文件打开查看效果 <html> & ...
【若依(ruoyi)】表格图片预览功能图片超宽、超高问题
前言若依(ruoyi): v4.3 360极速浏览器 12.0.1550.0 (正式版本) (32 位) 操作系统 Windows 10 OS Version 2004 (Build 19041.5 ...
html预览图片的功能,javascript实现的图片预览功能
本文实例讲述了javascript实现的图片预览功能.分享给大家供大家参考,具体如下: 1.将下面的代码复制到内 /* Thumbnail image viewer- ?Dynamic Drive ...
小程序自定义图片预览和多图下载的实现
小程序开发中图片列表的需求再常见不过了,通常都会配合大图预览和图片下载的功能但是微信又没有提供可自定义的图片预览功能,有时候会有需求在预览大图的时候收藏或者下载啥的用 wx.previewImage ...
微信小程序实现图片预览功能
小程序有提供预览图片的wx.previewImage方法先在页面上放上图片标签 <imagecatch:tap="preview"data-src = 'https://s ...
vue图片缩略图及图片预览功能
前言上次有个需求,是要给图片做个缩略图以及预览功能.其实用vue来实现是很简单的, 几句代码可以搞定,也不需要什么额外的插件. 效果如下: vue显示图片缩略图 vue显示图片预览功能核心代码两 ...

使用element-ui的el-image图片预览功能支持图片下载

项目场景：

解决方法：

总结：

使用element-ui的el-image图片预览功能支持图片下载相关推荐

最新文章

热门文章

使用element-ui的el-image图片预览功能 支持图片下载

项目场景：

解决方法：

总结：

使用element-ui的el-image图片预览功能 支持图片下载相关推荐

最新文章

热门文章

使用element-ui的el-image图片预览功能支持图片下载

使用element-ui的el-image图片预览功能支持图片下载相关推荐