Vueで画像ダウンロードを実現
フロントエンドは画像をダウンロードし、バックエンドは URL アドレスを返し、フロントエンドはローカルへのダウンロードを処理します。複数の画像が返された場合、それらは圧縮パッケージにダウンロードされます。
カスタム保存パスは一番下にあります
くだらない話をしないで、コードを直接アップロードしてください。理解できない場合はプライベート メッセージを送信できます。間違っている場合はプライベート メッセージを送信することもできます。
<template>
<span style="color:RGB(24,144,255); cursor: pointer;" @click="handleTp(record)">{
{
getValue(record) }}</span>
</template>
<script>
import JSZip from 'jszip'
import FileSaver from "file-saver"
import axios from 'axios'
export default {
name: "GxwhList",
data() {
return {
imgArr: [],
exportLoading: false,
}
},
methods: {
//单张图片下载方法
downloadIamge(imgsrc, name) {
let image = new Image();
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");
let a = document.createElement("a");
let event = new MouseEvent("click");
a.download = name ? name : "photo";
a.href = url;
a.dispatchEvent(event);
};
image.src = imgsrc;
},
// 多张调用方法
getFile(url) {
return new Promise((resolve, reject) => {
axios({
method: 'get',
url: url,
responseType: 'blob'
}).then(response => {
resolve(response.data)
}).catch(error => {
reject(error.toString())
})
})
},
handleTp(record) {
// 此处返回的url是连在一起的，所以处理成数组字符串
let pics = record.imgurl.replaceAll("60.165.49.10", "192.168.2.78");
let picArr = pics.split(",")
// let picArr=[{name:1,url:'',pName:'',pStep:''}]//只有一条数据
//此处arr1为测试图片地址，后端返回正确图片url后直接注释掉arr1，并释放下面picArr的for循环中 第一个value同事注释掉第二个value
var arr1 = [
"https://img0.baidu.com/it/u=4162443464,2854908495&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
"https://img1.baidu.com/it/u=1960110688,1786190632&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281",
"https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
"https://img0.baidu.com/it/u=4162443464,2854908495&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
];
if (picArr.length <= 0) {
//无图片
return this.$message.warning("无可导出图片");
} else {
//有图片
console.log("picArr.length:" + picArr.length);
for (let i = 0; i < picArr.length; i++) {
// let value = {name:i+1,url:picArr[i],pName:this.title,pStep:record.cname};
let value = {
name: i + 1, url: arr1[i] ? arr1[i] : '', pName: this.title, pStep: record.cname };
this.imgArr[i] = value;
console.log("this.imgArr[i]:" + JSON.stringify(value))
}
if (this.imgArr.length < 2) {
//有且只有一张图片
//一张图片直接下载
this.downloadIamge(this.imgArr[0].url, this.imgArr[0].name)
} else if (this.imgArr.length >= 2) {
//图片数量>1则下载成压缩包
this.exportLoading = true
let zip = new JSZip()
let _this = this
let promises = []
let cache = {
}
let promise
console.log("2222222222")
for (let item = 0; item < this.imgArr.length; item++) {
console.log("55555555555", this.imgArr[item].url);
promise = this.getFile(this.imgArr[item].url).then(data => {
// 下载文件, 并存成ArrayBuffer对象
console.log("33333333333", data);
// let file_name = item.realName // 获取文件名
zip.file(this.imgArr[item].name + '.jpg', data, {
binary: true }) // 逐个添加文件，需要加后缀".png"
cache[this.imgArr[item].name] = data
})
}
promises.push(promise)
Promise.all(promises).then(() => {
zip.generateAsync({
type: 'blob' }).then(res => {
// 生成二进制流
FileSaver.saveAs(res, this.imgArr[0].pName + this.imgArr[0].pStep) // 利用file-saver保存文件 自定义文件名
_this.$notification.success({
message: '文件正在压缩下载，请稍等!'
})
})
_this.exportLoading = false
}).catch(res => {
_this.$notification.warning({
message: '文件下载失败，请刷新页面重新下载!'
})
_this.exportLoading = false
})
}
}
},
}
}
</script>
カスタム保存パス
カスタム保存パスに接続するには、下をクリックしてください