jszip

jszip是什么?

jszip是 一个用于使用JavaScript创建,读取和编辑.zip文件的库

github源码地址:https://github.com/Stuk/jszip

官方文档:https://stuk.github.io/jszip

API文档: https://heltschl.org/_js/jszip/

jszip怎么使用?

将表格数据导出为zip压缩包(其中是.txt文件)

要导出的表格数据如下:

const data = [
  {
    author: "Margaret",
    display_time: "1979-06-25 03:23:30",
    id: 1,
    timestamp: 448470722568,
    title: "Yiw Kfhxghnp Kscwspgot Csjwlao Qlt Hopmxn",
  },
  {
    author: "郭宝",
    display_time: "2021-06-25 03:23:30",
    id: 1,
    timestamp: 448487542568,
    title: "测试",
  }
]

调用方法如下:

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]))
}

Export2Zip.js 工具文件内容如下

/* eslint-disable */
import { saveAs } from 'file-saver'
import JSZip from 'jszip'

/*
* 将表格数据导出为zip压缩包(其中是.txt文件)
* */
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('导出失败')
  })
}

效果图:

将树型数据导出为zip压缩包(其中包含文件或文件夹)

要导出的树型数据如下:

data: [{
  id: 1,
  name: '位置',
  icon: 'icon-wenjianjia',
  type: '文件夹',
  size: '3MB',
  time: '2021/4/12 22:20',
  isSelect: false,
  collection: 1,
  isFile: 0,
  children: [
    {
      id: 66,
      name: '收藏夹',
      icon: 'icon-shoucang1',
      type: '文件夹',
      size: '3MB',
      time: '2021/4/12 22:20',
      isSelect: false,
      collection: 0,
      isFile: 0,
      children: []
    }, {
      id: 11,
      name: '我的文件',
      icon: 'icon-wenjianjia',
      type: '文件夹',
      size: '3MB',
      time: '2021/4/12 22:20',
      isSelect: false,
      collection: 0,
      isFile: 0,
      children: [{
        id: 111,
        icon: 'icon-wenjianjia',
        name: '我的图片',
        type: '文件夹',
        size: '3MB',
        time: '2021/4/12 22:20',
        isSelect: false,
        collection: 0,
        isFile: 0,
        children: []
      }]
    },
    {
      id: 22,
      name: '共享文件',
      icon: 'icon-wenjianjia',
      type: '文件夹',
      size: '3MB',
      time: '2021/4/12 22:20',
      isSelect: false,
      collection: 0,
      isFile: 0,
      children: [{
        id: 222,
        name: '2021年上学期英语讲义汇总',
        icon: 'icon-wenjianjia',
        type: '文件夹',
        size: '3MB',
        time: '2021/4/12 22:20',
        isSelect: false,
        collection: 0,
        isFile: 0,
        children: [{
          id: 2223,
          icon: 'icon-txt',
          name: '2021年上学期英语.txt',
          type: '文件',
          size: '3MB',
          time: '2021/4/12 22:20',
          isSelect: false,
          collection: 0,
          isFile: 1
        }]
      }]
    },
    {
      id: 33,
      name: '员工文件',
      icon: 'icon-wenjianjia',
      type: '文件夹',
      size: '3MB',
      time: '2021/4/12 22:20',
      isSelect: false,
      collection: 0,
      isFile: 0,
      children: [{
        id: 333,
        name: 'PPT文件',
        icon: 'icon-wenjianjia',
        type: '文件夹',
        size: '3MB',
        time: '2021/4/12 22:20',
        isSelect: false,
        collection: 0,
        isFile: 0,
        children: [{
          id: 3333,
          icon: 'icon-ppt',
          name: '员工手册.ppt',
          type: '文件',
          size: '3MB',
          time: '2021/4/12 22:20',
          isSelect: false,
          collection: 0,
          isFile: 1
        }]
      }]
    }, {
      id: 44,
      icon: 'icon-shanchu',
      name: '回收站',
      type: '文件夹',
      size: '3MB',
      time: '2021/4/12 22:20',
      isSelect: false,
      collection: 0,
      isFile: 0,
      children: []
    }]
}]

Export2Zip.js文件内容如下:

/* eslint-disable */
import { saveAs } from 'file-saver'
import JSZip from 'jszip'


/*
* 将树型数据导出为zip压缩包(其中包含文件或文件夹)
* */
export function export_file_to_zip( jsonData, zipName) {
  const zip = new JSZip()
  const zip_name = zipName || 'file'

  createFileOrFolder(zip,jsonData,'')
  zip.generateAsync({
    type: "blob"
  }).then((blob) => {
    saveAs(blob, `${zip_name}.zip`)
  }, (err) => {
    alert('导出失败')
  })
}


/*
递归创建文件夹或文件
参数一:new JSZip() 对象
参数二:对象数组
参数三:父路径
 */
export function createFileOrFolder(zip, data,fatherPath) {

  for (let i = 0; i <data.length ; i++) {
    const object = data[i];
    if (object.isFile === 1){
      // 创建文件1
      let folder = fatherPath + '/' + object.name;
      // 默认填充空数据
      zip.file(folder, '')
    } else {
      // 创建文件夹1
      let folder2 = fatherPath + '/'+object.name
      zip.folder(folder2)

      const data2 = object.children

      createFileOrFolder(zip,data2,folder2)
    }

  }
}

调用方法如下:

downloadHandler() {
  this.downloadLoading = true
  import('@/vendor/Export2Zip').then(zip => {
    zip.export_file_to_zip(this.data, '我的压缩包')
    this.downloadLoading = false
  })
}

效果图:

将图片进行打包下载

要打包的图片base64数据如下:

R0lGODdhBQAFAIACAAAAAP/eACwAAAAABQAFAAACCIwPkWerClIBADs=

Export2Zip.js 工具代码如下:

/* eslint-disable */
import { saveAs } from 'file-saver'
import JSZip from 'jszip'


/*
* 将图片进行打包下载
* imageName 图片名称 例如:a.gif
* imgBase64 图片base64数据,例如:R0lGODdhBQAFAIACAAAAAP/eACwAAAAABQAFAAACCIwPkWerClIBADs=
* zipName   压缩包名称:例如:file
* 注意:完整的base64图片数据为:data:image/gif;base64,R0lGODdhBQAFAIACAAAAAP/eACwAAAAABQAFAAACCIwPkWerClIBADs=  需要去除 data:image/gif;base64, 前缀在可以正常使用
* */
export function export_img_to_zip(imageName,imgBase64,zipName) {
  const zip = new JSZip()
  const image_name = imageName || 'a.gif'
  const zip_name = zipName || 'file'
  zip.file(image_name,imgBase64,{base64: true})
  zip.generateAsync({
    type: "blob"
  }).then((blob) => {
    saveAs(blob, `${zip_name}.zip`)
  }, (err) => {
    alert('导出失败')
  })
}

调用方式

downloadHandler() {

  this.downloadLoading = true
  import('@/vendor/Export2Zip').then(zip => {
    zip.export_img_to_zip('a.gif', 'R0lGODdhBQAFAIACAAAAAP/eACwAAAAABQAFAAACCIwPkWerClIBADs=', '我的压缩包')
    this.downloadLoading = false
  })
  console.log('downloadHandler:', selectData)
}

效果图:

如果觉得文章有帮助到你,可以扫描以下二维码
   请本文作者 喝一杯
pay_weixin pay_weixin

发表评论

电子邮件地址不会被公开。 必填项已用*标注