- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章vue将文件/图片批量打包下载zip的教程由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.
vue将文件/图片批量打包下载 。
各种格式都可以,只要url能够打开或者下载文件即可. 。
1.通过文件的url,使用js的XMLHttpRequest获取blob 。
2.将blob压缩为zip 。
由于异步并行加载文件,速度还是蛮快的,我141个4M多的图片,1分左右加载完成,49个4M的图片4秒 。
添加依赖 。
//npm install jszip 。
//npm install file-saver 。
在页面的script中引入依赖 。
import JSZip from 'jszip' 。
import FileSaver from 'file-saver' 。
代码 。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
/**文件打包
* arrImages:文件list:[{fileUrl:文件url,renameFileName:文件名}]
* filename 压缩包名
* */
filesToRar(arrImages, filename) {
let _this =
this
;
let zip =
new
JSZip();
let cache = {};
let promises = [];
_this.title =
'正在加载压缩文件'
;
for
(let item of arrImages) {
const promise= _this.getImgArrayBuffer(item.fileUrl).then(data => {
// 下载文件, 并存成ArrayBuffer对象(blob)
zip.file(item.renameFileName, data, { binary:
true
});
// 逐个添加文件
cache[item.renameFileName] = data;
});
promises.push(promise);
}
Promise.all(promises).then(() => {
zip.generateAsync({ type:
"blob"
}).then(content => {
_this.title =
'正在压缩'
;
// 生成二进制流
FileSaver.saveAs(content, filename);
// 利用file-saver保存文件 自定义文件名
_this.title =
'压缩完成'
;
});
}).
catch
(res=>{
_this.$message.error(
'文件压缩失败'
);
});
},
//获取文件blob
getImgArrayBuffer(url){
let _this=
this
;
return
new
Promise((resolve, reject) => {
//通过请求获取文件blob格式
let xmlhttp =
new
XMLHttpRequest();
xmlhttp.open(
"GET"
, url,
true
);
xmlhttp.responseType =
"blob"
;
xmlhttp.onload =
function
() {
if
(
this
.status == 200) {
resolve(
this
.response);
}
else
{
reject(
this
.status);
}
}
xmlhttp.send();
});
},
|
补充知识:vue 生成二维码并且批量打包下载代码 。
我就废话不多说了,大家还是直接看代码吧~ 。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
|
<template>
<div>
<div v-show=
"codeId"
ref=
"QrcodePage"
style=
"z-index:-1111;position:absolute;left:-99999;width: 450px;height: 475px;background-size: cover;"
>
<div id=
"qrCode"
v-
if
=
"codeId"
>
<QrcodeVue :logoSrc=
"imageUrl"
:key=
"random"
:callback=
"texte"
:text=
"codeValue"
:logoScale=
"50"
:size=
"750"
></QrcodeVue>
<p style=
"text-align: center; font-size: 1.5625rem;"
>{{ codeNumber }}</p>
</div>
</div>
</div>
</template>
<script>
let loadingInstance =
''
;
import QrcodeVue from
'vue-qr'
;
import html2canvas from
'html2canvas'
;
import JSZip from
'jszip'
;
import FileSaver from
'file-saver'
;
export
default
{
name:
'qrcode'
,
components: {
QrcodeVue
},
data() {
return
{
random:
'1'
,
codeId:
''
,
qrcodeUrl:
''
,
imageUrl:
''
,
// imageUrl: 'https://shop.mmdddd.com/workShopWeb/static/img/72.png',//logo
qrContentImage:
''
,
codeValue:
''
,
initCodeVal:
'http://xcx.nmte.net/tips/index.html'
,
codeNumber:
''
,
arr: [],
qrcodeArr: [],
index: 0
};
},
watch: {
index(newName, oldName){
if
(newName != oldName && newName <=
this
.arr.length-1){
setTimeout(_ => {
this
.setarr(
this
.arr);
}, 0);
}
else
{
this
.$nextTick(_ => {
loadingInstance.close();
});
}
}
},
created() {
},
mounted() {},
methods: {
texte(url,qid) {
setTimeout(_ => {
this
.createImgs();
}, 100);
},
setarr(arr) {
this
.arr = arr;
if
(
this
.index >
this
.arr.length -1) {
this
.index = 0;
}
let index=
this
.index||0;
loadingInstance =
this
.$Loading.service({
lock:
true
,
text:
'二维码码批量下载中,请稍后...'
,
spinner:
'el-icon-loading'
,
background:
'rgba(0, 0, 0, 0.7)'
});
this
.codeNumber =
this
.arr[index].codeNumber;
this
.arr[index].codeId ? (
this
.codeId =
this
.arr[index].codeId) :
this
.$Message.warn(
'获取信息失败,请刷新重试'
);
this
.codeValue =
this
.initCodeVal +
'?codeId='
+
this
.arr[index].codeId +
'&codeNumber='
+
this
.arr[index].codeNumber;
this
.random = Math.random();
},
createImgs() {
var
that =
this
;
if
(that.index <= that.arr.length -1 && that.codeId){
let shareContent = that.$refs.QrcodePage,
width = shareContent.offsetWidth,
height = shareContent.offsetHeight,
canvas = document.createElement(
'canvas'
),
scale = 1;
canvas.width = width * scale;
canvas.height = height * scale;
canvas.style.width = (shareContent.clientWidth * scale) / 100 +
'rem'
;
canvas.style.height = (shareContent.clientHeight * scale) / 100 +
'rem'
;
canvas.getContext(
'2d'
).scale(scale, scale);
let opts = {
scale: scale,
canvas: canvas,
logging:
false
,
width: width,
height: height,
useCORS:
true
};
html2canvas(shareContent, opts)
.then(
function
(canvas) {
const qrContentImage = canvas.toDataURL(
'image/jpeg'
, 1.0);
if
(that.index <= that.arr.length -1 && that.codeId){
that.qrcodeArr.push({
url: qrContentImage,
name: that.arr[that.index].codeNumber
});
}
if
(that.codeId){
that.index ++;
}
if
(that.qrcodeArr.length == that.arr.length){
that.packageImages();
that.codeId =
null
;
}
})
.
catch
(
function
(reason) {
console.log(reason);
});
}
},
packageImages() {
let that =
this
;
const zip =
new
JSZip();
const cache = {};
setTimeout(_ => {
let arr = that.qrcodeArr;
arr.forEach((item,index)=>{
let fileName = item.name;
zip.file(fileName +
'.png'
,item.url.substring(22),{base64:
true
})
cache[fileName] = item.url
})
zip.generateAsync({type:
"blob"
}).then(content => {
FileSaver.saveAs(content,
"二维码.zip"
)
})
},0)
}
}
};
</script>
<style lang=
"less"
scoped=
"scoped"
>
#qrCode {
width: 375px;
height: 375px;
position: absolute;
top: 52%;
left: 50%;
transform: translate(-50%, -50%);
img {
display: block;
width: 100%;
height: 100%;
}
}
</style>
|
调用setarr传数组 。
以上这篇vue将文件/图片批量打包下载zip的教程就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我.
原文链接:https://www.cnblogs.com/ziyue7575/p/5de6777a2c304e152b51c719c8d36c63.html 。
最后此篇关于vue将文件/图片批量打包下载zip的教程的文章就讲到这里了,如果你想了解更多关于vue将文件/图片批量打包下载zip的教程的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
我想使用 Angular.js 转换从服务器获取的图像数据(用于 ionic 框架),我使用了这段代码: $http.post(link, { token: token,
我正在为我的应用制作一个登陆页面。如果它们在 iOS 设备上,我希望它只显示“App Store”图标,但在 Android 上隐藏它。如果它们在 Android 设备上,则只有“Play Store
如何在同一页面上多次显示同一张图片? function xdf(){ for (i=0;ihello world'); } } 此代码显示“hello world”10 次。我想要同样的东西,
您好,我有一个 1px 的 png 文件,我试图将其设置为两个水平相邻的 div 的背景图像。html 和 css 如下:- hi hello css是这样的 div { width: 50%
我的 PHP 项目安装了 Prestashop 1.4.9.0。当我添加一个新产品时,我上传了一个PNG格式的图片,但是当它在客户端显示时,图片是JPG格式的。 如何保留图片扩展名? 最佳答案 在后台
我用 http://www.regexper.com查看一个象形表示正则表达式很多。我想要一种理想的方法: 向站点发送正则表达式 打开显示该表达式的站点 例如,让我们使用正则表达式:"\\s*foo[
我不知道为什么在 MAC OS X (Mail 6.2) 的邮件客户端中图像显示如下: 和其他邮件客户端,如 gmail、outlook 或 private,图像是正确的,看起来像这样: PHP邮件程
我正在使用此处找到的示例。 Mozilla developers 我对这个例子很感兴趣。 function upload(postUrl, fieldName, filePath) { var f
我不知道为什么在 MAC OS X (Mail 6.2) 的邮件客户端中图像显示如下: 和其他邮件客户端,如 gmail、outlook 或 private,图像是正确的,看起来像这样: PHP邮件程
我的问题是如何根据用户在javafx中选择的复选框和/或单选按钮生成带有汽车图片设置的按钮? 我正在用汽车图片模拟汽车经销商网站。用户应该能够通过单击复选框和/或单选按钮选择来过滤显示的图片。 我首先
我正在开发Java客户端,它应该支持多种语言。为了翻译文本,我使用 Java ResourceBoundle,它工作正常。 现在问题出在图像上。客户端应加载大约 50 张图像,这些图像是棋盘游戏的特定
我对 jQuery 还很陌生,但我正在寻找一个简单的脚本,通过淡入和淡出的方式在标题中循环 3 或 4 个背景图像。它们是透明的 png,因此我尝试过的许多 slider 都不起作用。 有什么想法吗?
我有一个 HTML 文档,其中包含本地文件的图像,例如: ios - 物理主体大于它分配给的纹理(图片)
我的 Sprite “physicsBody ”属性之一出现问题。 我已经放置了physicsBody节点“barn ”,直接位于 non-physicsBody 之上节点“mound”没有任何问题。
我想剪切图片的特定部分并用它来将剪切的图像与存储在 HDD 中的另一个图像进行比较。问题是我不知道如何获取源图像的特定部分。我知道要裁剪的图像的位置 (X,Y)。 最佳答案 这将加载原始版本并创建
如何使用裁剪实用程序在 javascript 中实现图像 uploader 。你如何通过 AJAX 提交图像文件?解决方案是否跨域兼容? 最佳答案 要实现具有裁剪功能的图片上传小部件,您必须: 将图像
public void onActivityResult(int requestCode, int resultCode, Intent data) { super.onActivityRes
我想在我的 android 应用程序中显示一个国家的图片。国家必须按地区划分。因此,当用户单击特定区域时,应打开特定屏幕。区域也应该用线分隔,以便用户可以看到区域的开始/结束位置。 这是一个国家的例子
首先我想对这个问题表示歉意,因为我知道已经有很多人问过这个问题了。但我搜索的所有答案都没有解决我的问题。所以希望您考虑这个问题并帮助我解决这个问题。 所以基本上我正在尝试上传图像文件,当我提交它时,会
我几乎有了想要的数据...但需要帮助过滤它。 (图在底部) 下面的查询返回状态为 Member-id5 的所有记录,但我需要对其进行过滤。例如:如果我对等做了一个简单的查询。 (exp_channel
我是一名优秀的程序员,十分优秀!