[vue] jszip html-docx-js file-saver 图片，纯文本 ，打包压缩，下载跨域问题

npm install jszip file-saver

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

JSZip

创建JSZip实例：

const zip = new JSZip();

创建文件：支持导出纯文本

zip.file("hello.txt", "Hello World\n");

创建文件夹：

zip.folder("file")

只压缩有地址的文件

// 举个栗子

const dataList = [{fileUrl: 'https://www.xxx.com/data/data_service/20210429/144b4b1e4e457485c10fed54b8bc8d48.docx',fileName: '文件一'},{fileUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',fileName: '图片1'},{fileUrl: 'https://......docx',fileName: '文件二'},{fileUrl: 'https://......txt',fileName: '文件三'},{fileUrl: 'https://......jpg',fileName: '文件四'},
];

// 下载全部附件-压缩包
downloadBtn() {const blogTitle = '全部附件'; // 下载后压缩包的名称const zip = new JSZip();const promises = [];// 处理 docx/imagethis.dataList.forEach((item) => {const promise = this.getBlob(item.fileUrl).then((data) => {// 下载文件, 并存成ArrayBuffer对象(blob)zip.file(item.fileName, data, { binary: true }); // 逐个添加文件});promises.push(promise);});Promise.all(promises).then(() => {// 生成二进制流zip.generateAsync({ type: 'blob' }).then((blob) => {FileSaver.saveAs(blob, blogTitle); // 利用file-saver保存文件  blogTitle:自定义文件名});}).catch((res) => {this.$message.error('文件压缩失败');});
},
// 文件以流的形式获取（参数url为文件链接地址）
getBlob(url) {return new Promise((resolve) => {const xhr = new XMLHttpRequest();xhr.open('GET', url, true);xhr.responseType = 'blob';xhr.onload = () => {if (xhr.status === 200) {resolve(xhr.response);}};xhr.send();});
},

导出纯文本+图片

先使用html-docx-js库将HTML内容转换为Word文档

npm install html-docx-js

import htmlDocx from 'html-docx-js/dist/html-docx';

// 下载全部附件-压缩包
downloadBtn() {const blogTitle = '全部附件'; // 下载后压缩包的名称const zip = new JSZip();const promises = [];const htmlContent = `<span style="font-family:宋体; font-size:12pt">报告时间</span>`// 处理 Html文本if (htmlContent ) {const name = "11.docx";const blob = htmlDocx.asBlob(htmlContent);zip.file(name, blob, { binary: true }); // 创建文件}zip.file("Hello.txt", "Hello World\n"); // 支持纯文本等// 处理 docx/imagethis.dataList.forEach((item) => {const promise = this.getBlob(item.fileUrl).then((data) => {// 下载文件, 并存成ArrayBuffer对象(blob)zip.file(item.fileName, data, { binary: true }); // 逐个添加文件});promises.push(promise);});Promise.all(promises).then(() => {// 生成二进制流zip.generateAsync({ type: 'blob' }).then((blob) => {FileSaver.saveAs(blob, blogTitle); // 利用file-saver保存文件  blogTitle:自定义文件名});}).catch((res) => {this.$message.error('文件压缩失败');});
},

跨域：

点击下载后浏览器会报跨域问题，这个问题并非前端问题，需要后端在存储文件的服务器中设置允许跨域，添加 Access-Control-Allow-Origin 即可！

参考：

JS实现单个或多个文件批量下载的方法详解

前端批量获取文件并打包压缩解决方案

vue中实现文件批量打包压缩下载（以及下载跨域问题分析）