<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8"/>
<script type="text/javascript" src="js/jszip.min.js"></script>
<script src="js/FileSaver.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<button id="download">下载</button>
<script>
window.onload=function(){
document.getElementById('download').onclick = function(){
var zip = new JSZip();//*****创建实例,zip是对象实例
var file_name = 'pic.zip';
var array=['img/1.jpg','img/2.jpg','img/7.png'];
var len=function(arr){
var l = 0;
for(var key in arr){
l++;
}
return l;
}
for(let i=0;i<array.length;i++){
//对每一个图片链接获取base64的数据,并使用回调函数处理
getBase64Image(array[i],function(dataURL){
//对获取的图片base64数据进行处理
var img_arr = dataURL.split(',');
zip.file(i.toString()+'.jpg',img_arr[1],{base64: true});//根据base64数据在压缩包中生成jpg数据
var ziplength = len(zip.files);
if(ziplength==array.length){//当所有图片都已经生成打包并保存zip
zip.generateAsync({type:"blob"})
.then(function(content) {
//console.log(content);
saveAs(content, file_name);
});
}
});
}
}
}
//****传入图片链接,返回base64数据
function getBase64Image(images,callback) {
var img = new Image();
var canvas = document.createElement("canvas");
img.onload = function(){
canvas.getContext("2d").drawImage(img,0,0);
var dataURL=canvas.toDataURL();//使用canvas获取图片的base64数据
callback?callback(dataURL):null; //调用回调函数
}
img.src = images;
}
</script>
</body>
</html>
使用jszip对图片进行打包下载
vue使用
/* eslint-disable */
import { saveAs } from 'file-saver'
import JSZip from 'jszip'
export function export_txt_to_zip(th, jsonData, txtName, zipName) {
const zip = new JSZip()
const txt_name = txtName || 'file'
const zip_name = zipName || 'file'
const data = jsonData
let txtData = `${th}\r\n`
data.forEach((row) => {
let tempStr = ''
tempStr = row.toString()
txtData += `${tempStr}\r\n`
})
zip.file(`${txt_name}.txt`, txtData)
zip.generateAsync({
type: "blob"
}).then((blob) => {
saveAs(blob, `${zip_name}.zip`)
}, (err) => {
alert('导出失败')
})
}
<template>
<div class="app-container">
<!-- $t is vue-i18n global function to translate lang -->
<el-input v-model="filename" :placeholder="$t('zip.placeholder')" style="width:300px;" prefix-icon="el-icon-document" />
<el-button :loading="downloadLoading" style="margin-bottom:20px;" type="primary" icon="el-icon-document" @click="handleDownload">
{{ $t('zip.export') }} Zip
</el-button>
<el-table v-loading="listLoading" :data="list" element-loading-text="拼命加载中" border fit highlight-current-row>
<el-table-column align="center" label="ID" width="95">
<template slot-scope="scope">
{{ scope.$index }}
</template>
</el-table-column>
<el-table-column label="Title">
<template slot-scope="scope">
{{ scope.row.title }}
</template>
</el-table-column>
<el-table-column label="Author" width="95" align="center">
<template slot-scope="scope">
<el-tag>{{ scope.row.author }}</el-tag>
</template>
</el-table-column>
<el-table-column label="Readings" width="115" align="center">
<template slot-scope="scope">
{{ scope.row.pageviews }}
</template>
</el-table-column>
<el-table-column align="center" label="Date" width="220">
<template slot-scope="scope">
<i class="el-icon-time" />
<span>{{ scope.row.display_time }}</span>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import { fetchList } from '@/api/article'
export default {
name: 'ExportZip',
data() {
return {
list: null,
listLoading: true,
downloadLoading: false,
filename: ''
}
},
created() {
this.fetchData()
},
methods: {
async fetchData() {
this.listLoading = true
const { data } = await fetchList()
this.list = data.items
this.listLoading = false
},
handleDownload() {
this.downloadLoading = true
import('@/vendor/Export2Zip').then(zip => {
const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
const list = this.list
const data = this.formatJson(filterVal, list)
zip.export_txt_to_zip(tHeader, data, this.filename, this.filename)
this.downloadLoading = false
})
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
}
}
}
</script>