element图片预览添加下载图片功能.
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
- 前言
- 一、element自带的大图预览,没有提供下载功能的api,而实际使用中总是有一些需求需要用到这个功能,所以只有自己对elment的组件进行改造!
- 二、改造步骤
-
- 1.修改代码
- 2.组件使用
-
- 2.1注册为全局组件
- 2.1在项目中使用
- 2.最终效果
- 总结
前言
提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。
提示：以下是本篇文章正文内容，下面案例可供参考
一、element自带的大图预览,没有提供下载功能的api,而实际使用中总是有一些需求需要用到这个功能,所以只有自己对elment的组件进行改造!
二、改造步骤
1.修改代码
代码如下（示例）：
<template>
<transition name="viewer-fade">
<div
tabindex="-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">
<span
class="el-image-viewer__btn el-image-viewer__prev"
:class="{ 'is-disabled': !infinite && isFirst }"
@click="prev"
>
<i class="el-icon-arrow-left" />
</span>
<span
class="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>
<i
class="el-icon-refresh-left"
@click="handleActions('anticlocelise')"
></i>
<i
class="el-icon-refresh-right"
@click="handleActions('clocelise')"
></i>
</div>
</div>
<!-- CANVAS -->
<div class="el-image-viewer__canvas">
<img
v-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) {
// ESC
case 27:
this.hide();
break;
// SPACE
case 32:
this.toggleMode();
break;
// LEFT_ARROW
case 37:
this.prev();
break;
// UP_ARROW
case 38:
this.handleActions("zoomIn");
break;
// RIGHT_ARROW
case 39:
this.next();
break;
// DOWN_ARROW
case 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 underneath
this.$refs["el-image-viewer__wrapper"].focus();
},
};
</script>
2.组件使用
2.1注册为全局组件
2.1在项目中使用
2.最终效果
总结
element没有自带下载aip,需要自己封装一个按钮和方法!! 希望官方早日出api吧!