您的位置: 首页  >  IT文章  >  Vue 打包下载 vue将文件/图片批量打包下载，原理如下： 具体操作 跨域

Vue 打包下载 vue将文件/图片批量打包下载，原理如下： 具体操作 跨域

分类: IT文章 • 2024-03-04 14:42:15

1、通过文件的url下载arraybuffer对象

2、将arraybuffer对象转为blob

3、将blob压缩为zip

具体操作

第一步：下载依赖：

cnpm install --save file-saver jszip

或者

npm install jszip
npm install file-saver

第二步，根据原理封装成一个公共packdownload.js如下：

Vue 打包下载 vue将文件/图片批量打包下载，原理如下： 具体操作 跨域

packdownload.js文件内容：

import axios from 'axios';
import JSZip from 'jszip'
import FileSaver from 'file-saver'


const getFile = url => {
  return new Promise((resolve, reject) => {
    axios({
      method: 'get',
      url,
      responseType: 'arraybuffer'
    }).then(data => {
      resolve(data.data)
    }).catch(error => {
      reject(error.toString())
    })
  })
}

export const handleBatchDownload = (data) => {
  //const data = ['各类地址1', '各类地址2'] // 需要下载打包的路径, 可以是本地相对路径, 也可以是跨域的全路径
  const zip = new JSZip()
  const cache = {}
  const promises = []
  data.forEach(item => {
    const promise = getFile(item).then(data => { // 下载文件, 并存成ArrayBuffer对象
      const arr_name = item.split("/")
      const file_name = arr_name[arr_name.length - 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 => { // 生成二进制流
      FileSaver.saveAs(content, "打包下载.zip") // 利用file-saver保存文件
    })
  })
}

第三步，在需要的文件中使用

首先，先进行引用

import { handleBatchDownload } from '@/utils/packdownload'

然后，使用

Vue 打包下载 vue将文件/图片批量打包下载，原理如下： 具体操作 跨域

 如图所示，参数就是下载地址数组，使用很简单

跨域

虽然说通过以上操作完成了批量打包下载，但是却会出现跨域的情况。。因为我的文件是在阿里云服务器上的，不在同一域名下。网上有个关于文件下载跨域的解决方法的博客，记录了前端解决跨域的方式，有些方式我之前也尝试过，呵呵，最终还是需要后端协助。。

第一次尝试：

通过xhr请求获取文件，然后下载到本地，代码如下：

// 下载按钮点击事件
fileDownload() {
    let url = this.data.url; // data:项目中获取的数据，包含文件url以及文件名等相关参数
    let fileName = this.data.file_name;
    let xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'blob';
    xhr.onload = (e) => {
        const res = e.target.response;
        this.saveAs(res, fileName);
    };
    xhr.send();
}
 
// 导出文件函数
saveAs (obj, fileName) {
    let ele = document.createElement('a');
    ele.download = fileName || '下载';
    ele.href = URL.createObjectURL(obj); // 绑定a标签
    ele.style.display = 'none';
    document.body.appendChild(ele); // 兼容火狐浏览器
    ele.click();
    setTimeout(function () { // 延时释放
        URL.revokeObjectURL(obj); // 用URL.revokeObjectURL()来释放这个object URL
        document.body.removeChild(ele);// 兼容火狐浏览器
    }, 100);
};

结果：文件可以直接下载，but为虾米有的文件可以下载、有的文件告诉我跨域问题？？？刷新页面之后，刚刚还可以下载的文件又不可以下载了！！！崩溃ing...联系运维的老哥尝试修改一下第三方服务器的参数，发现没有卵用，只能再尝试一下了。

第二次尝试：（jsonp）

既然是跨域的问题，网上的解决方案蛮多的，而且作为前端面试必考题，我背的也蛮熟的。首先使用jsonp来解决，步骤如下：

1、安装jsonp插件

npm install jsonp --save

2、在代码中使用jsonp

import jsonp from 'jsonp'; // 导入插件
 
// 下载按钮点击事件
fileDownload () {
    let url = this.data.url; // data:项目中获取的数据，包含文件url以及文件名等相关参数
    let fileName = this.data.file_name;
    // 先测试一下能不能跨域成功
    jsonp(url, null, (err, data) => {
        if (err) {
            console.error(err.message);
        } else {
            console.log(data);
        }
    })
}

结果：可能是哪里使用不对，反正是没有请求数据成功，还是显示跨域问题，既然不行，那就再换方法。

3、卸载jsonp插件

npm uninstall jsonp

第三次尝试：（fetch跨域）

废话不多说，直接上代码： 

// 下载按钮点击事件
fileDownload () {
    let url = this.data.url; // data:项目中获取的数据，包含文件url以及文件名等相关参数
    let fileName = this.data.file_name;
    // 先测试一下能不能跨域成功
    let myHeaders = new Headers({
        'Access-Control-Allow-Origin': '*',
        'Content-Type': 'text/plain'
    });
    fetch(url, {
        method:'GET',
        headers:myHeaders,
        mode:'cors'
    }).then(res=>{
        console.log(res);
    });
}

结果：依然没有解决跨域的问题，革命尚未成功，老子还得努力啊。（ps: fetch的mode属性设置为’no-cors‘的时候能请求成功，但是返回值无法使用，木的办法）

第四次尝试：（使用插件downloadjs下载文件）

1、安装downloadjs插件

npm install downloadjs --save

2、使用downloadjs插件

import download from 'downloadjs'; // 引用插件
 
// 下载按钮点击事件
fileDownload () {
    let url = this.data.url; // data:项目中获取的数据，包含文件url以及文件名等相关参数
    download(url); // 没看错，就是这么简单
}

结果：我在自己的电脑上发现完全可以下载文件，沾沾自喜了大概十分钟，通过别人的电脑访问我的IP测试，发现有的完全没问题，有的还是出现跨域的问题。。。。。。。。。。。要疯了有木有。。。。。。。。接着改吧。。。。。。。

3、卸载downloadjs插件

npm uninstall downloadjs

第五次尝试：（前端已经尽力了，让后端大佬帮忙吧）

在使用了好多方法之后，在历时一整天的尝试之后，我，决定放下前端的骄傲，找后端大佬（.net）商量一下，决定后端先将第三方服务器上的文件转换成二进制文件，然后通过一个接口返回给前端处理，上代码：

// 下载按钮点击事件
async fileDownload () {
    let url = this.data.url; // data:项目中获取的数据，包含文件url以及文件名等相关参数
    let fileName = this.data.file_name;
    const res = await getFile({ // 获取文件二进制数据的接口
        oss_url: url
    });
    this.saveAs(new Blob([res], { type: 'text/plain;charset=UTF-8' }), fileName);
}
 
// 导出文件函数
saveAs (obj, fileName) {
    let ele = document.createElement('a');
    ele.download = fileName || '下载';
    ele.href = URL.createObjectURL(obj); // 绑定a标签
    ele.style.display = 'none';
    document.body.appendChild(ele); // 兼容火狐浏览器
    ele.click();
    setTimeout(function () { // 延时释放
        URL.revokeObjectURL(obj); // 用URL.revokeObjectURL()来释放这个object URL
        document.body.removeChild(ele);// 兼容火狐浏览器
    }, 100);
};

PS:  (1).将二进制流转为Blob类型的时候，属性：{type: 'text/plain;charset=UTF-8'}；

        (2).获取二进制文件的接口，我是使用项目里封装的axios方法，需注意设置属性：responseType: 'blob'。

结果：究极妥协之后终于看到了黎明的曙光，可以正常下载所需类型的文件了，大功告成！！！

相关推荐