element图片预览添加下载图片功能.
2024-05-10 04:49:33
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
- 前言
- 一、element自带的大图预览,没有提供下载功能的api,而实际使用中总是有一些需求需要用到这个功能,所以只有自己对elment的组件进行改造!
- 二、改造步骤
- 1.修改代码
- 2.组件使用
- 2.1注册为全局组件
- 2.1在项目中使用
- 2.最终效果
- 总结
前言
提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。
提示：以下是本篇文章正文内容，下面案例可供参考
一、element自带的大图预览,没有提供下载功能的api,而实际使用中总是有一些需求需要用到这个功能,所以只有自己对elment的组件进行改造!
二、改造步骤
1.修改代码
代码如下（示例）：
<template><transition name="viewer-fade"><divtabindex="-1"ref="el-image-viewer__wrapper"class="el-image-viewer__wrapper":style="{ 'z-index': zIndex }"><div class="el-image-viewer__mask"></div><!-- CLOSE --><span class="el-image-viewer__btn el-image-viewer__close" @click="hide"><i class="el-icon-circle-close"></i></span><!-- ARROW --><template v-if="!isSingle"><spanclass="el-image-viewer__btn el-image-viewer__prev":class="{ 'is-disabled': !infinite && isFirst }"@click="prev"><i class="el-icon-arrow-left" /></span><spanclass="el-image-viewer__btn el-image-viewer__next":class="{ 'is-disabled': !infinite && isLast }"@click="next"><i class="el-icon-arrow-right" /></span></template><!-- ACTIONS --><div class="el-image-viewer__btn el-image-viewer__actions"><div class="el-image-viewer__actions__inner"><i class="el-icon-zoom-out" @click="handleActions('zoomOut')"></i><i class="el-icon-zoom-in" @click="handleActions('zoomIn')"></i><i class="el-image-viewer__actions__divider"></i><i :class="mode.icon" @click="toggleMode"></i><i class="el-image-viewer__actions__divider"></i><i class="el-icon-download" @click="download"></i><iclass="el-icon-refresh-left"@click="handleActions('anticlocelise')"></i><iclass="el-icon-refresh-right"@click="handleActions('clocelise')"></i></div></div><!-- CANVAS --><div class="el-image-viewer__canvas"><imgv-for="(url, i) in urlList"v-if="i === index"ref="img"class="el-image-viewer__img":key="url":src="currentImg":style="imgStyle"@load="handleImgLoad"@error="handleImgError"@mousedown="handleMouseDown"/></div></div></transition>
</template><script>
import { on, off } from "element-ui/src/utils/dom";
import { rafThrottle, isFirefox } from "element-ui/src/utils/util";const Mode = {CONTAIN: {name: "contain",icon: "el-icon-full-screen",},ORIGINAL: {name: "original",icon: "el-icon-c-scale-to-original",},
};const mousewheelEventName = isFirefox() ? "DOMMouseScroll" : "mousewheel";export default {name: "elImageViewer",props: {urlList: {type: Array,default: () => [],},zIndex: {type: Number,default: 2000,},onSwitch: {type: Function,default: () => {},},onClose: {type: Function,default: () => {},},initialIndex: {type: Number,default: 0,},},data() {return {index: this.initialIndex,isShow: false,infinite: true,loading: false,mode: Mode.CONTAIN,transform: {scale: 1,deg: 0,offsetX: 0,offsetY: 0,enableTransition: false,},};},computed: {isSingle() {return this.urlList.length <= 1;},isFirst() {return this.index === 0;},isLast() {return this.index === this.urlList.length - 1;},currentImg() {return this.urlList[this.index];},imgStyle() {const { scale, deg, offsetX, offsetY, enableTransition } = this.transform;const style = {transform: `scale(${scale}) rotate(${deg}deg)`,transition: enableTransition ? "transform .3s" : "","margin-left": `${offsetX}px`,"margin-top": `${offsetY}px`,};if (this.mode === Mode.CONTAIN) {style.maxWidth = style.maxHeight = "100%";}return style;},},watch: {index: {handler: function (val) {this.reset();this.onSwitch(val);},},currentImg(val) {this.$nextTick((_) => {const $img = this.$refs.img[0];if (!$img.complete) {this.loading = true;}});},},methods: {hide() {this.deviceSupportUninstall();this.$emit("close");},deviceSupportInstall() {this._keyDownHandler = rafThrottle((e) => {const keyCode = e.keyCode;switch (keyCode) {// ESCcase 27:this.hide();break;// SPACEcase 32:this.toggleMode();break;// LEFT_ARROWcase 37:this.prev();break;// UP_ARROWcase 38:this.handleActions("zoomIn");break;// RIGHT_ARROWcase 39:this.next();break;// DOWN_ARROWcase 40:this.handleActions("zoomOut");break;}});this._mouseWheelHandler = rafThrottle((e) => {const delta = e.wheelDelta ? e.wheelDelta : -e.detail;if (delta > 0) {this.handleActions("zoomIn", {zoomRate: 0.015,enableTransition: false,});} else {this.handleActions("zoomOut", {zoomRate: 0.015,enableTransition: false,});}});on(document, "keydown", this._keyDownHandler);on(document, mousewheelEventName, this._mouseWheelHandler);},deviceSupportUninstall() {off(document, "keydown", this._keyDownHandler);off(document, mousewheelEventName, this._mouseWheelHandler);this._keyDownHandler = null;this._mouseWheelHandler = null;},handleImgLoad(e) {this.loading = false;},handleImgError(e) {this.loading = false;e.target.alt = "加载失败";},handleMouseDown(e) {if (this.loading || e.button !== 0) return;const { offsetX, offsetY } = this.transform;const startX = e.pageX;const startY = e.pageY;this._dragHandler = rafThrottle((ev) => {this.transform.offsetX = offsetX + ev.pageX - startX;this.transform.offsetY = offsetY + ev.pageY - startY;});on(document, "mousemove", this._dragHandler);on(document, "mouseup", (ev) => {off(document, "mousemove", this._dragHandler);});e.preventDefault();},reset() {this.transform = {scale: 1,deg: 0,offsetX: 0,offsetY: 0,enableTransition: false,};},toggleMode() {if (this.loading) return;const modeNames = Object.keys(Mode);const modeValues = Object.values(Mode);const index = modeValues.indexOf(this.mode);const nextIndex = (index + 1) % modeNames.length;this.mode = Mode[modeNames[nextIndex]];this.reset();},prev() {if (this.isFirst && !this.infinite) return;const len = this.urlList.length;this.index = (this.index - 1 + len) % len;},next() {if (this.isLast && !this.infinite) return;const len = this.urlList.length;this.index = (this.index + 1) % len;},handleActions(action, options = {}) {if (this.loading) return;const { zoomRate, rotateDeg, enableTransition } = {zoomRate: 0.2,rotateDeg: 90,enableTransition: true,...options,};const { transform } = this;switch (action) {case "zoomOut":if (transform.scale > 0.2) {transform.scale = parseFloat((transform.scale - zoomRate).toFixed(3));}break;case "zoomIn":transform.scale = parseFloat((transform.scale + zoomRate).toFixed(3));break;case "clocelise":transform.deg += rotateDeg;break;case "anticlocelise":transform.deg -= rotateDeg;break;}transform.enableTransition = enableTransition;},// 下载当前图片download() {let url = this.urlList[this.initialIndex];let _date = new Date();this.downloadFile(url,`xxx ${_date.getFullYear()}-${_date.getMonth() + 1}-${_date.getDate()}`);},downloadFile(content, fileName) {fetch(content).then((res) =>res.blob().then((blob) => {var a = document.createElement("a");var url = window.URL.createObjectURL(blob);// var filename = "myfile.zip";a.href = url;a.download = fileName;a.click();window.URL.revokeObjectURL(url);}));// //下载base64图片// var base64ToBlob = function (code) {// debugger// let parts = code.split(";base64,");// let contentType = parts[0].split(":")[1];// let raw = window.atob(parts[1]);// let rawLength = raw.length;// let uInt8Array = new Uint8Array(rawLength);// for (let i = 0; i < rawLength; ++i) {// uInt8Array[i] = raw.charCodeAt(i);// }// return new Blob([uInt8Array], {// type: contentType,// });// };// let aLink = document.createElement("a");// let blob = base64ToBlob(content); //new Blob([content]);// let evt = document.createEvent("HTMLEvents");// evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错 事件类型，是否冒泡，是否阻止浏览器的默认行为// aLink.download = fileName;// aLink.href = URL.createObjectURL(blob);// aLink.click();},},mounted() {this.deviceSupportInstall();// add tabindex then wrapper can be focusable via Javascript// focus wrapper so arrow key can't cause inner scroll behavior underneaththis.$refs["el-image-viewer__wrapper"].focus();},
};
</script>
2.组件使用
2.1注册为全局组件
2.1在项目中使用
2.最终效果
总结
element没有自带下载aip,需要自己封装一个按钮和方法!! 希望官方早日出api吧!
element图片预览添加下载图片功能.相关推荐
- mui 图片预览（自定义）功能 - 案例篇
mui 图片预览(自定义)功能 - 案例篇 实现目标: 点击图片,弹出层遮盖,并放大显示刚才点击的图片: 图片对应的标题,也一并显示. 效果截图: 重要提示Tips: 使用前,务必设置图片的alt属性 ...
- 前端手把手教你js实现附件预览和下载得功能实现
在项目中,经常会遇到做项目关于实现附件预览和下载得功能,那么怎么来实现呢: 在学习之前,首先会应用到Blob相关得知识点: 那么blob到底是什么呢 先让我们看看官方关于blob得介绍 文章来自于Bl ...
- 微信开发php插件下载图片,微信开发之微信jsapi选择图片,上传图片,预览和下载图片方法...
参数描述 appId公众号的唯一标识 应用id timestamp生成签名的时间戳 nonceStr生成签名的随机串 signature签名 上述表格中的四个参数是初始化调用微信jsapi的凭证,咱们 ...
- canvas 实现图片预览和下载
最近接了个需要:要求点击一个按钮(预览分享图)生成一个图片实现预览,图片要求在服务器图片的基础上加上二维码和文字:点击保存相册按钮实现保存,具体需求如下: 思路: 1.先用qrcode生产二维码,获取 ...
- android 图片预览动画,Android图片上传实现预览效果
首先具体分析一下,实现的功能,其中需求分析是必不可少的,需求.逻辑清除之后,再上手写代码,思路会很清晰. 1.多图上传首先得选择图片(这里项目需求是既可以拍照上传也可以从相册中选择) 2.拍照上传很简 ...
- uniapp图片或文件的预览和下载，兼容ios+安卓+浏览器
一.前言 在uniapp的APP日常开发中,我们时常遇到一些兼容性问题,正如本文所提到的图片的预览和下载.在此功能的开发中,我常遇到以下四个问题: 图片预览功能实现,但是PDF,word,xls文件无 ...
- js实现移动端图片预览：手势缩放， 手势拖动，双击放大...
原文:js实现移动端图片预览:手势缩放, 手势拖动,双击放大... 前言 本文将介绍如何通过js实现移动端图片预览,包括图片的 预览模式,手势缩放,手势拖动,双击放大等基本功能: 扫码查看示例效果: ...
- html5 预览图片原理,html5实现图片预览和查看原图
html5提供了很多新的API,减轻了很多开发者的工作,比如这次要讲解的FileReader和naturalWidth,naturalHeight就能实现图片预览和查看原图功能 html5 从一开始就 ...
- vue移动端实现图片预览
接着上文的文件上传.下载.删除继续往下说,我们先说移动端的图片格式预览 上文说到了vue引用了vant插件,是一个很好用的移动端开发组件,它自带了上传文件的方法,当然也带了图片预览的方法 图片预览其实 ...
最新文章
- Java axis 配置host_Java AxisProperties类代码示例
- java web基础1Tomcat服务器基本知识
- css中光标的设置,CSS Cursors(光标)
- 饿了么超级会员数量暴增，外卖市场“去泡沫化”的先声？
- 题解 UVA10328 【Coin Toss】
- input中radio用法
- python实现随机乱序/洗牌
- 在Go中使用Protobuf
- centos启动提示unexpected inconsistency RUN fsck MANUALLY
- 设计模式之GOF23工厂模式02
- rabbitmq使用_RabbitMQ 简介以及使用场景
- 运维简历怎么写项目描述_简历中的项目描述
- 去掉你代码里的 document.write(script...
- FAST迅捷路由器设置
- 【抽象代数】环、子环、理想、商环、环的同态
- java jpress,JPress导入Eclipse
- 如何在ps中添加图片上的塑料布效果
- grbl源码解析——速度前瞻（2）
- ARP-attrack ARP内网毒化/欺骗攻击
- 用Power BI (Power query）高效做IPO上市项目账务梳理（财务总监CFO必看）