安装包 jszip和file-saver
代码
代码语言：javascript复制<template>
<div class="jszip">
<span @click="demoZip">downloadZip</span>
</div>
</template>
<script>
import JSZip from 'jszip'
import { saveAs } from 'file-saver'
export default {
name: "jszip",
data(){
return {
}
},
methods:{
demoZip(){
var zip = new JSZip();
zip.file("Hello.txt", "Hello 1111111111 Worldn");
// zip.file("smile.jpg", imageData, {base64: false});
zip.generateAsync({type:"blob"}).then(function(content) {
console.log(content)
let file = new FileReader();
file.onload = (e) => {
console.log(e.target.result);
}
file.readAsDataURL(content);
// see FileSaver.js
saveAs(content, "example.zip");
});
// var img = zip.folder("images");
// img.file("smile.jpg", 'https://eclaim-test.tpi.cntaiping.com:8043/h5/resourcehttps://img.yuanmabao.com/zijie/pic/2020-07/1282879004088262656/952525c11de2138345a9b1e41681115d.jpg', {base64: false});
// 创建Canvas对象(画布)
// let canvas = document.createElement('canvas')
// 获取对应的CanvasRenderingContext2D对象(画笔)
// let ctx = canvas.getContext('2d')
// 创建新的图片对象
// let img = new Image();
// var base64 = '' ;//base64
// img.src = 'http://p1.pstatp.com/large/435d000085555bd8de10';
// img.setAttribute("crossOrigin",'Anonymous')
// img.onload = function(){//图片加载完，再draw 和 toDataURL
// ctx.drawImage(img,0,0);
// base64 = canvas.toDataURL("image/jpeg");
// console.log(base64)
// };
// img.src = 'http://p1.pstatp.com/large/435d000085555bd8de10';
// img.setAttribute('crossOrigin', 'Anonymous')
// img.onload = () => {
// canvas.width = img.width;
// canvas.height = img.height;
// console.log(img)
// // 清除画布
// ctx.clearRect(0, 0, img.width, img.height);
// // 图片压缩
// ctx.drawImage(img, 0, 0, img.width, img.height);
// let imageData = canvas.toDataURL("image/jpeg");
// console.log(imageData)
//
// };
}
}
}
</script>
<style scoped>
</style>
