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

bash 复制代码
npm install jszip file-saver
js 复制代码
import JSZip from 'jszip';
import FileSaver from 'file-saver';

JSZip

创建JSZip实例:

js 复制代码
const zip = new JSZip();

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

js 复制代码
zip.file("hello.txt", "Hello World\n");

创建文件夹:

js 复制代码
zip.folder("file")

只压缩有地址的文件

// 举个栗子

js 复制代码
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: '文件四'
    },
];
js 复制代码
// 下载全部附件-压缩包
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文档

bash 复制代码
npm install html-docx-js
js 复制代码
import htmlDocx from 'html-docx-js/dist/html-docx';
js 复制代码
// 下载全部附件-压缩包
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 即可!

参考:

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

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

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

相关推荐
归于尽13 分钟前
V8 引擎是如何给 JS"打扫房间"的 ?
前端·javascript
自由逐风15 分钟前
JS 处理长整型数字的坑:从雪花 ID 精度丢失说起
javascript
爱学习的茄子15 分钟前
从0到1:揭秘前端网络请求的进化之路
前端·javascript·面试
云动雨颤19 分钟前
流量分发代码实战|学会用JS控制用户访问路径
javascript
wzyoung19 分钟前
element-ui让el-form绑定的深层对象也能通过内置的resetFields方法重置
前端·javascript·vue.js
gnip39 分钟前
项目开发流程之技术调用流程
前端·javascript
答案—answer39 分钟前
three.js编辑器2.0版本
javascript·three.js·three.js 编辑器·three.js性能优化·three.js模型编辑·three.js 粒子特效·three.js加载模型
gnip1 小时前
SSE技术介绍
前端·javascript
yinke小琪1 小时前
JavaScript DOM节点操作(增删改)常用方法
前端·javascript
枣把儿1 小时前
Vercel 收购 NuxtLabs!Nuxt UI Pro 即将免费!
前端·vue.js·nuxt.js