本文主要是介绍[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中实现文件批量打包压缩下载(以及下载跨域问题分析)
这篇关于[vue] jszip html-docx-js file-saver 图片,纯文本 ,打包压缩,下载跨域问题的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!