前端 Vue 将图片添加到zip压缩文件并下载 streamsaver
废话不多说，直接上完整可用代码。
1、使用npm安装 streamsaver 库，这里我用的是 2.0.4 版本，
npm install streamsaver --s2、官方提供了打包zip并下载的demo 查看，会发现demo中对于zip引入了一个 zip-stream.js 的文件，这个文件其实在安装的 streamsaver 库中存在，node_modules/streamsaver/examples/zip-stream.js，我们将这个文件复制出来在入口函数前加个export default，完整代码如下
zip-stream.js
class Crc32 {
constructor() {
this.crc = -1
}
append(data) {
var crc = this.crc | 0;
var table = this.table
for (var offset = 0, len = data.length | 0; offset < len; offset++) {
crc = (crc >>> 8) ^ table[(crc ^ data[offset]) & 0xFF]
}
this.crc = crc
}
get() {
return ~this.crc
}
}
Crc32.prototype.table = (() => {
var i;
var j;
var t;
var table = []
for (i = 0; i < 256; i++) {
t = i
for (j = 0; j < 8; j++) {
t = (t & 1)
? (t >>> 1) ^ 0xEDB88320
: t >>> 1
}
table[i] = t
}
return table
})()
const getDataHelper = byteLength => {
var uint8 = new Uint8Array(byteLength)
return {
array: uint8,
view: new DataView(uint8.buffer)
}
}
const pump = zipObj => zipObj.reader.read().then(chunk => {
if (chunk.done) return zipObj.writeFooter()
const outputData = chunk.value
zipObj.crc.append(outputData)
zipObj.uncompressedLength += outputData.length
zipObj.compressedLength += outputData.length
zipObj.ctrl.enqueue(outputData)
})
/**
* [createWriter description]
* @param {Object} underlyingSource [description]
* @return {Boolean} [description]
*/
export default function createWriter(underlyingSource) {
const files = Object.create(null)
const filenames = []
const encoder = new TextEncoder()
let offset = 0
let activeZipIndex = 0
let ctrl
let activeZipObject, closed
function next() {
activeZipIndex++
activeZipObject = files[filenames[activeZipIndex]]
if (activeZipObject) processNextChunk()
else if (closed) closeZip()
}
var zipWriter = {
enqueue(fileLike) {
if (closed) throw new TypeError('Cannot enqueue a chunk into a readable stream that is closed or has been requested to be closed')
let name = fileLike.name.trim()
const date = new Date(typeof fileLike.lastModified === 'undefined' ? Date.now() : fileLike.lastModified)
if (fileLike.directory && !name.endsWith('/')) name += '/'
if (files[name]) throw new Error('File already exists.')
const nameBuf = encoder.encode(name)
filenames.push(name)
const zipObject = files[name] = {
level: 0,
ctrl,
directory: !!fileLike.directory,
nameBuf,
comment: encoder.encode(fileLike.comment || ''),
compressedLength: 0,
uncompressedLength: 0,
writeHeader() {
var header = getDataHelper(26)
var data = getDataHelper(30 + nameBuf.length)
zipObject.offset = offset
zipObject.header = header
if (zipObject.level !== 0 && !zipObject.directory) {
header.view.setUint16(4, 0x0800)
}
header.view.setUint32(0, 0x14000808)
header.view.setUint16(6, (((date.getHours() << 6) | date.getMinutes()) << 5) | date.getSeconds() / 2, true)
header.view.setUint16(8, ((((date.getFullYear() - 1980) << 4) | (date.getMonth() + 1)) << 5) | date.getDate(), true)
header.view.setUint16(22, nameBuf.length, true)
data.view.setUint32(0, 0x504b0304)
data.array.set(header.array, 4)
data.array.set(nameBuf, 30)
offset += data.array.length
ctrl.enqueue(data.array)
},
writeFooter() {
var footer = getDataHelper(16)
footer.view.setUint32(0, 0x504b0708)
if (zipObject.crc) {
zipObject.header.view.setUint32(10, zipObject.crc.get(), true)
zipObject.header.view.setUint32(14, zipObject.compressedLength, true)
zipObject.header.view.setUint32(18, zipObject.uncompressedLength, true)
footer.view.setUint32(4, zipObject.crc.get(), true)
footer.view.setUint32(8, zipObject.compressedLength, true)
footer.view.setUint32(12, zipObject.uncompressedLength, true)
}
ctrl.enqueue(footer.array)
offset += zipObject.compressedLength + 16
next()
},
fileLike
}
if (!activeZipObject) {
activeZipObject = zipObject
processNextChunk()
}
},
close() {
if (closed) throw new TypeError('Cannot close a readable stream that has already been requested to be closed')
if (!activeZipObject) closeZip()
closed = true
}
}
function closeZip() {
var length = 0
var index = 0
var indexFilename, file
for (indexFilename = 0; indexFilename < filenames.length; indexFilename++) {
file = files[filenames[indexFilename]]
length += 46 + file.nameBuf.length + file.comment.length
}
const data = getDataHelper(length + 22)
for (indexFilename = 0; indexFilename < filenames.length; indexFilename++) {
file = files[filenames[indexFilename]]
data.view.setUint32(index, 0x504b0102)
data.view.setUint16(index + 4, 0x1400)
data.array.set(file.header.array, index + 6)
data.view.setUint16(index + 32, file.comment.length, true)
if (file.directory) {
data.view.setUint8(index + 38, 0x10)
}
data.view.setUint32(index + 42, file.offset, true)
data.array.set(file.nameBuf, index + 46)
data.array.set(file.comment, index + 46 + file.nameBuf.length)
index += 46 + file.nameBuf.length + file.comment.length
}
data.view.setUint32(index, 0x504b0506)
data.view.setUint16(index + 8, filenames.length, true)
data.view.setUint16(index + 10, filenames.length, true)
data.view.setUint32(index + 12, length, true)
data.view.setUint32(index + 16, offset, true)
ctrl.enqueue(data.array)
ctrl.close()
}
function processNextChunk() {
if (!activeZipObject) return
if (activeZipObject.directory) return activeZipObject.writeFooter(activeZipObject.writeHeader())
if (activeZipObject.reader) return pump(activeZipObject)
if (activeZipObject.fileLike.stream) {
activeZipObject.crc = new Crc32()
activeZipObject.reader = activeZipObject.fileLike.stream().getReader()
activeZipObject.writeHeader()
} else next()
}
return new ReadableStream({
start: c => {
ctrl = c
underlyingSource.start && Promise.resolve(underlyingSource.start(zipWriter))
},
pull() {
return processNextChunk() || (
underlyingSource.pull &&
Promise.resolve(underlyingSource.pull(zipWriter))
)
}
})
}3、接下来根据官方下载zip的demo可以知道 streamsaver 的使用方式，这里我们简化下，简单封装个函数
// 导入streamsaver
import StreamSaver from "streamsaver";
// 导入上面我们修改过的zip-stream
import ZIP from "./zip-stream";
/**
* 将多个文件写进压缩包
* @param zipName zip文件名，不带文件后缀名
* @param fileOptions 文件配置集合，数据格式 [{name: '文件名，可以带路径', content: '文件内容'}]
* @param streamCreator stream创建器，第一个参数是当前的fileOption配置，第二个参数是默认的stream创建方式
* @returns 返回promise对象
*/
export function writerAsZip(zipName, fileOptions, streamCreator = (fileOption, def) => def) {
return new Promise((resolve, reject) => {
const fileStream = StreamSaver.createWriteStream(`${zipName}.zip`);
const files = fileOptions.map(fileOption => {
return {
name: `${fileOption.name}`,
stream: streamCreator(fileOption, () => new Blob([fileOption.content]).stream())
};
});
const readableZipStream = new ZIP({
start(ctrl) {
files.forEach(file => ctrl.enqueue(file));
ctrl.close()
}
});
if (window.WritableStream && readableZipStream.pipeTo) {
return readableZipStream.pipeTo(fileStream)
.then(resolve, reject);
}
reject();
});
}4、上面的函数只是将文本型文件写进zip，接下来我们只要使用第三个参数 streamCreator 自定义下对图片的stream创建方式即可，可以看出，streamsaver 是从 Blob 对象获取的stream，因此我们只需要获取到图片的 Blob 对象即可，因此需要下面这个函数
/**
* 获取图片的Blob对象
* @param src 图片地址
* @returns 返回promise对象
*/
export function imageToBlob(src) {
return new Promise(function (resolve, reject) {
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
let img = new Image;
img.crossOrigin = 'Anonymous';
img.onload = () => {
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img, 0, 0);
canvas.toBlob(resolve);
canvas = null;
};
img.src = src;
});
}5、最后结合2个函数来实现下我们的需求
// 这里我使用当前前端项目下的一个图片
import DownloadImg from '../../../assets/download.jpg'
// 关键代码
export default {
methods: {
downloadZip() {
let fileOptions = [
{
name: 'files/file1.txt',
content: '第一个文件'
},
{
name: 'files/file2.txt',
content: '第二个文件'
}
];
// 获取图片的 Blob ，这里演示的是单张图片，由于该函数返回promise因此多张图片可以使用Promise.all来实现
imageToBlob(DownloadImg)
.then(data => {
fileOptions.push(
{
name: 'files/图片.jpg',
// 将图片的 Blob 对象放在 content 属性上
content: data
}
);
writerAsZip('压缩包', fileOptions, (fileOption, def) => {
if (fileOption.name === 'files/图片.jpg') {
// 自定义下图片的stream创建方式
return () => fileOption.content.stream()
}
// 其余还是使用默认的stream创建方式
return def;
}).then(() => {
// TODO 下载成功 继续做你想做的事情吧
}).catch(err => {
// TODO 下载失败
});
})
.catch(err => {
// TODO 获取图片 Blob 失败
});
}
}
}结束
最后给vue开发的小伙伴推荐一款表单设计器：JForm表单设计器