[关闭]
@yyman001 2018-07-07T15:15:04.000000Z 字数 5260 阅读 3661

web前端打包下载图片文件

web 打包

传统下载压缩包通过后端打包好文件并返回url地址进行下载,目前主流浏览器可以实现在前端下载好文件进行打包

优点

缺点

需要使用的js文件

实现原理

下载图片方式有几种
- ajax 直接获取buffer
- new Image()
- <img/>

第二种和第三种其实是一样,但第二种不需要在页面上生成dom元素,但可能会存在跨域问题.
我实现的方式选用new Image() 下载图片,通过canvas元素把数据转成Blob,然后建立一个压缩包对象,把数据push进去

  1. 获取下载文件
  1.   /**
  2.    * 加载图片资源并转成blob
  3.    * @param {object} object
  4.    * @returns {Promise}
  5.    */
  6. function getImage (object) {
  7.     let that = this
  8.     return new Promise((resolve, reject) => {
  10.       let img = new Image()
  11.       img.crossOrigin = 'Anonymous'
  12.       img.onload = function () {
  14.         that.createCanvas(img)
  15.         that.canvas.toBlob(function (blob) {
  17.           if (object.blob === null) {
  18.             object.blob = blob
  19.             that.loaded.push(object)
  20.           }
  22.           img.onload = null
  23.           img = null
  24.           resolve(object)
  25.         }, "image/png")
  26.       }
  28.       img.onerror = function (err) {
  29.         img.onerror = null
  30.         img = null
  31.         object.blob = null
  32.         reject(object)
  33.       }
  35.       img.src = object.url
  37.       if (img.complete || img.complete === undefined) {
  38.         img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
  39.         img.src = object.url
  40.       }
  42.     })
  43.   }
  1. 打包文件,先实例化一个对象
  1. let zip = new JSZip()

为什么这里不用const?因为我们还需要清空,重置,初始化这个对象.
2.新建一个文件夹对象(可以省略)

  1. // folderName - 文件夹名称
  2. let folder = zip.folder( folderName )

3.添加文件到文件夹中

  1. // fileName - 文件名.后缀名 eg: test.png
  2. // fileType - 文件名数据类 eg: file.blob
  3. folder.file( fileName , fileType )
  4. // 如果不使用文件夹
  5. zip.file( fileName , fileType )

4.压缩并打包下载文件

  1. // content 打包的文件内容数据
  2. // zipName 压缩包名称 eg: test.zip
  3. zip.generateAsync({type: "blob"}).then((content) => {
  4.       FileSaver.saveAs(content, zipName)
  5.       // 清空文件夹对象
  6.       folder = null
  7.     })

上面方法我是封装到一个对象里面的,这样就更加方便了
完整代码
如何使用?

  1. // 1. 引入文件
  2. import { DownClass } from '@/utils/DownClass'
  4. // 2. 实例化对象
  5.  const DownClass = new DownClass()
  7. // 3. 传入需要下载的图片对象(指定了格式)
  8. let testObject = {
  9.  lock: false,
  10.  fullName: 'test.png'
  11.  blob: <Blob>,
  12.  url:'http://test.com/test/test.png'
  13. }
  15. // 4.打包下载
  16. // - 单个文件下载 (下载对象格式)
  17. DownClass.downFile(testObject)
  19. // 把上面的对象通过数组方式传入
  20. let fileArray = [testObject...]
  22. // 传入需要下载图片列表数组
  23. DownClass.queue = fileArray
  25. // 触发下载打包(是一个异步进程)
  26. // 通过 `toZipLock` 属性是否已经打包完成
  27. DownClass..toZip(zipName)

DownClass.js

  1. /* eslint-disable */
  2. /**
  3.  * DownClass.js
  4.  * 前端打包图片文件
  5.  * @a:wangdongman
  6.  */
  8. const FileSaver = require('file-saver')
  9. const JSZip = require('jszip')
  11. export class DownClass {
  12.   constructor (queue, maxThread) {
  13.     /*
  14.      * 加载队列
  15.      * */
  16.     this.queue = Array.isArray(queue) ? queue : []
  18.     /*
  19.      * 已经加载完队列
  20.      * */
  21.     this.loaded = []
  23.     /*
  24.      * 失败队列
  25.      * */
  26.     this.fail = []
  28.     /*
  29.      * 最大线程 ( 功能暂时未实现 )
  30.      * */
  31.     this.maxThread = maxThread || 3
  33.     /*
  34.      * 画布对象
  35.      * */
  36.     this.canvas = null
  37.     this.ctx = null
  39.     /*
  40.      * 单个文件下载锁定状态
  41.      * */
  42.     this.lock = false
  44.     /*
  45.      * 压缩包锁定状态
  46.      * */
  47.     this.toZipLock = false
  49.     /*
  50.      * 压缩包对象
  51.      * */
  52.     this.zip = new JSZip()
  53.   }
  55.   /**
  56.    *获取图片数据
  57.    * @param img
  58.    * @returns {{base64: string, Blob: *}}
  59.    */
  60.   getImageData (img) {
  61.     let that = this
  62.     if (this.canvas === null) {
  63.       this.canvas = document.createElement("canvas")
  64.     }
  66.     this.canvas.width = img.width;
  67.     this.canvas.height = img.height;
  69.     if (this.ctx === null) {
  70.       this.ctx = this.canvas.getContext("2d")
  71.     }
  73.     this.ctx.drawImage(img, 0, 0, img.width, img.height)
  74.     return {
  75.       base64: that.canvas.toDataURL("image/png"),
  76.       Blob: that.dataURItoBlob(that.canvas.toDataURL("image/png"))
  77.     }
  79.   }
  81.   /**
  82.    * 创建画布对象
  83.    * @param { images } img - 图片对象
  84.    */
  85.   createCanvas (img) {
  87.     if (this.canvas === null) {
  88.       this.canvas = document.createElement("canvas")
  89.     }
  91.     this.canvas.width = img.width;
  92.     this.canvas.height = img.height;
  94.     if (this.ctx === null) {
  95.       this.ctx = this.canvas.getContext("2d")
  96.     }
  98.     this.ctx.drawImage(img, 0, 0, img.width, img.height)
  99.   }
  101.   /**
  102.    * 加载图片资源并转成blob
  103.    * @param {object} object
  104.    * @returns {Promise}
  105.    */
  106.   getImage (object) {
  107.     let that = this
  108.     return new Promise((resolve, reject) => {
  110.       let img = new Image()
  111.       img.crossOrigin = 'Anonymous'
  112.       img.onload = function () {
  114.         that.createCanvas(img)
  115.         that.canvas.toBlob(function (blob) {
  117.           if (object.blob === null) {
  118.             object.blob = blob
  119.             that.loaded.push(object)
  120.           }
  122.           img.onload = null
  123.           img = null
  124.           resolve(object)
  125.         }, "image/png")
  126.       }
  128.       img.onerror = function (err) {
  129.         img.onerror = null
  130.         img = null
  131.         object.blob = null
  132.         reject(object)
  133.       }
  135.       img.src = object.url
  137.       if (img.complete || img.complete === undefined) {
  138.         img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
  139.         img.src = object.url
  140.       }
  142.     })
  143.   }
  145.   /**
  146.    * 加载队列资源
  147.    * @returns {Promise.<void>}
  148.    */
  149.   async loadImages () {
  151.     if (this.lock) {
  152.       console.warn('locking')
  153.       return
  154.     }
  156.     this.lock = true
  158.     for (let i = 0, len = this.queue.length; i < len; i++) {
  160.       if (this.queue[i].blob !== null) {
  161.         continue
  162.       }
  164.       try {
  165.         let result = await this.getImage(this.queue[i])
  166.         console.log('加载文件:loadImages:', result)
  167.       } catch (err) {
  168.         console.error(err)
  169.       }
  171.     }
  173.     this.lock = false
  174.   }
  176.   /**
  177.    * 静态方法: 保存文件
  178.    * @param {String} name - 文件名
  179.    * @param {Blob} blob - 数据
  180.    */
  181.   static downImagesFile (name, blob) {
  182.     FileSaver.saveAs(blob, `${name}.png`)
  183.   }
  185.   /**
  186.    * 单独下载一个文件
  187.    * @param {Object} object - 下载对象
  188.    * @returns {Promise.<void>}
  189.    */
  190.   async downFile (object) {
  192.     if (Object.prototype.toString.call(object) !== '[object Object]') {
  193.       console.warn('请传入一个对象!')
  194.       return
  195.     }
  197.     if (object.lock) {
  198.       console.log('正在下载')
  199.       return
  200.     }
  202.     object.lock = true
  203.     await this.getImage(object)
  204.     object.lock = false
  205.     console.log('object:', object)
  206.     DownClass.downImagesFile(object.fullName, object.blob)
  207.   }
  209.   /**
  210.    * 打包资源
  211.    * @param {String} [fileName] - 打包文件名
  212.    * @returns {Promise.<void>}
  213.    */
  214.   async toZip (fileName) {
  215.     console.log('this.toZipLock:', this.toZipLock)
  216.     if (this.toZipLock) {
  217.       console.warn('正在带包zip')
  218.       return
  219.     }
  221.     this.toZipLock = true
  222.     let time = new Date().getTime()
  223.     let zipName = fileName + time + '.zip'
  225.     console.log('1.加载文件')
  226.     await this.loadImages()
  227.     console.log('2.打包', this.loaded)
  229.     let folder = this.zip.folder(fileName + time)
  231.     this.loaded.forEach((file) => {
  232.       console.log('file:', file);
  233.       // this.zip.file(`${file.fullName}.png`, file.blob)
  234.       folder.file(`${file.fullName}.png`, file.blob);
  235.     })
  237.     this.zip.generateAsync({type: "blob"}).then((content) => {
  238.       FileSaver.saveAs(content, zipName)
  239.       this.toZipLock = false
  240.       folder = null
  241.     })
  243.   }
  245.   clearImages () {
  246.     this.queue = []
  247.     this.loaded = []
  248.     this.fail = []
  249.     this.zip = new JSZip()
  250.   }
  252.   /**
  253.    * 销毁
  254.    */
  255.   destroy () {
  256.     this.queue = []
  257.     this.loaded = []
  258.     this.fail = []
  259.     this.canvas = null
  260.     this.ctx = null
  261.     this.zip = null
  262.   }
  264. }
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注