vue使用viewer.js结合jsZip和FileSaver.js实现图片预览和打包下载

本文链接：https://blog.csdn.net/pdd11997110103/article/details/108598989

1，需求

图片预览，并且可以放大缩小旋转和左右切换，然后可以一键打包下载所有图片。结合需求，我选择了viewer.js，jsZip和FileSaver.js,。

2，效果图

放一个实现的交互效果gif图；

交互效果

3，安装和使用

3.1，viewer.js安装和使用

viewer.js文档

安装

npm install viewerjs

在vue组件中

import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'
import Vue from 'vue'
Vue.use(Viewer)

<div class="graffiti_stat_body">
     <div id="imgBox" v-viewer="{ //在外层盒子定义v-viewer指令，传入配置对象
             movable: true,
             toolbar:{
                 zoomIn: {
                     show: true,
                     size: 'large'
                 },
                 zoomOut: {
                     show: true,
                     size: 'large'
                 },
                 oneToOne: false,
                 reset: {
                     show: true,
                     size: 'large'
                 },
                 prev: {
                     show: true,
                     size: 'large'
                 },
                 play: false,
                 next: {
                     show: true,
                     size: 'large'
                 },
                 rotateLeft: {
                     show: true,
                     size: 'large'
                 },
                 rotateRight: {
                     show: true,
                     size: 'large'
                 },
                 flipHorizontal: false,
                 flipVertical: false
             },
             title:false,
             navbar:false
         }">

         <div class="img_body" v-for="(item , index) in imgList" :key="index">
             <div class="graffiti_img">
                 <img :src="item.url" class="downLoanImg">
                 <div class="imgGoBtn">
                     <div class="smallBtn smallBtn1" title="放上白板" @click="imgShow(item.url)"></div>
                     <div class="smallBtn smallBtn2" title="奖励章" @click="smallBtnFn(0,item.imId)"></div>
                     <div class="smallBtn smallBtn3" title="奖励币" @click="smallBtnFn(1,item.imId)"></div>
                     <div class="smallBtn smallBtn4" title="上台" @click="smallBtnFn(2,item.imId)"></div>
                 </div>
             </div>
             <p>{{item.title}}</p>
         </div>
     </div>
 </div>

下图是列举的一些配置
viewer.js配置

3.2，jszip和FileSaver.js安装和使用

jszip文档

FileSaver.js文档

安装

npm install jszip

npm install file-saver --save

在组件中

import JSZip from 'jszip'
import FileSaver from "file-saver"

//调用
this.filesToRar(this.imgList,"学生涂鸦答题照片");
/**文件打包
*@param {object} arrImages 文件list:[ { url:文件url , title:文件名 } ]
*@param {string} filename 压缩包的名字
**/
filesToRar(arrImages, filename) {
    let _this = this;
    let zip = new JSZip();
    let cache = {};
    let promises = [];
    let i = 0;
    arrImages.forEach((item)=>{
        var promise = _this.getImgArrayBuffer(item.url).then(data => {
            i++;
            let name = "(" + i + ")" + item.title + ".png";
            // 下载文件, 并存成ArrayBuffer对象(blob)
            zip.file(name, data, { binary: true }); // 逐个添加文件
            cache[name] = data;
        });
        promises.push(promise);
    })
    Promise.all(promises).then(() => {
        zip.generateAsync({ type: "blob" }).then(content => {
            // 生成二进制流
            FileSaver.saveAs(content, filename); // 利用file-saver保存文件  自定义文件名
        });
    })
    .catch(res=>{
        console.log("压缩失败")
    });
}

/**通过url获取文件blob
*@param {string} url 图片http路径
**/
getImgArrayBuffer(url){
    return new Promise((resolve, reject) => {
        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();
    });
}