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/image
this.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/image
this.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 即可!
参考: