E企盈营销工具技术服务商 热线:4006-838-530

vue(iview)批量下载文件(前端打包js),支持跨域

E企盈直播平台营销卖货系统

废话不多说,直接上demo1. 引入FileSaver和jszipnpm install file-saver –savenpm install jszip –save2. 页面按需引入插件import saveAs from ‘file-saver’;import JSZip from ‘jszip’export default {  // 特别注意此处需要初始化一下JSZIP  components: {JSZip   }}3. 核心方法代码export()      const zip = new JSZip();      const cache = {};      const promises = [];      const getFile = url = {            return new Promise((resolve, reject) = {                  // 利用ajax,此处写法根据各自配置可能略有不同                  this.$ajax({method:’get’, url, responseType: ‘arraybuffer’})                  .then(data = {                        resolve(data.data)                  }).catch(error = {                        reject(error.toString())                   })             })      }      // selectedList为选择需要下载的列表      this.selectedList.forEach(item = {            // item为对象,其中url代表下载地址            if(item.url){                  const promise = getFile(item.url)                  .then(data = {                        const arr_name = item.recordUrl.split(“/”);                        var file_name = arr_name[arr_name.length – 1] // 获取文件名                        file_name = file_name.substring(file_name.indexOf(“&”)+1);                        zip.file(file_name, data, { binary: true })                         cache[file_name] = data                   })                   promises.push(promise)            }      })      Promise.all(promises).then(() = {            zip.generateAsync({type:”blob”}).then(content = {                  saveAs(content, “压缩文件.zip”) // 利用file-saver保存文件            })      })}4.跨域下载可以参考我的a标签download不起作用这篇文章,走一遍后台,链接:https://blog.csdn.net/zgjsxzlx/article/details/86543022

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » vue(iview)批量下载文件(前端打包js),支持跨域
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏