首页 > 其他分享 >[vue] jszip html-docx-js file-saver 图片,纯文本 ,打包压缩,下载跨域问题

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

时间:2024-09-02 17:25:48浏览次数:9  
标签:文件 docx vue const 跨域 zip blob file


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 即可!

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

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



参考:

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

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

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


标签:文件,docx,vue,const,跨域,zip,blob,file
From: https://blog.51cto.com/u_12881709/11899580

相关文章

  • [vue] 按钮限制连点
    首先我们新建一个js文件,例如plugins.jsimportVuefrom'vue';constpointDoms=[];//使用这个指令的所有DOM对象Vue.directive('points',{inserted(el,binding){pointDoms.push(el);//存储使用这个指令的DOMel.addEventListener('click',()=>{......
  • Vue3 ref 和 reactive 的区别
    Vue3ref和reactive的区别文章目录Vue3ref和reactive的深度解析一、ref和reactive是什么二、vue3中如何使用ref和reactive三、ref和reactive包含哪些属性或方法API四、扩展与高级技巧五、优点与缺点六、对应“八股文”或面试常问问题七、总结与展望Vue3ref和......
  • vue实现页面顶部路由标签跳转
    在页面使用<!--活跃菜单--> <divclass="panel-group"ref="scrollPane"> <router-linkref="tag":to="menu.path"v-for="(menu,idx)inactiveRoutes" style="display:......
  • 基于SpringBoot+MySQL+SSM+Vue.js的学生选课系统
    获取见最下方名片获取见最下方名片获取见最下方名片演示视频基于SpringBoot+MySQL+SSM+Vue.js的学生选课系统(附论文)技术描述开发工具:Idea/Eclipse数据库:MySQLJar包仓库:Maven前端框架:Vue/ElementUI后端框架:Spring+SpringMVC+Mybatis+SpringBoot文字描......
  • 【vue、react】前端如何为package.json添加注释
    文章目录前言安装使用方法问题前言写了个项目,想给package.json加注释结果发现加不上去,就在网上查找了相关文章,特意总结记录一下,防止下次使用。参考文章:如何为package.json添加注释众所周知,JSON文件是不支持注释的,除了JSON5/JSONC之外,我们在开发项目特别是前端项目......
  • PrimeVue DataTable 属性值解析
    primeVueDataTable组件的属性值使用DataTable属性NameTypeDefaultdescriptionvaluenull|any[]null要显示的对象数组。dataKeystring|Functionnull唯一标识数据中的记录的字段名称。rowsnumber0每页显示的行数。firstnumber0要显示的第一行的索引。totalR......
  • 基于nodejs+vue宠物网站[程序+论文+开题]-计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景随着社会经济的快速发展与人们生活水平的提高,宠物已成为许多家庭不可或缺的一员,它们不仅带来了陪伴与欢乐,还促进了宠物相关产业的蓬勃发展。然而,在享受宠物......
  • 基于nodejs+vue宠物网络社区论坛系统[程序+论文+开题]-计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码毕设程序文件开题报告内容研究背景在当今社会,随着人们生活水平的提高和情感需求的日益增长,宠物已成为许多家庭不可或缺的重要成员。宠物市场的繁荣不仅体现在宠物数量的激增,还体现在宠物主人对宠......
  • 腾讯云服务器上线一个springboot+vue项目最全教程 非Docker 自带上传到gitee中的项目
    前言博主看网络上的各种介绍项目上线的视频/文章,要么不是真实项目上线,要么没有良好的引导,要么不全。因此就写了此博客。此博客应该是最全的了,全面地以一个项目来介绍如何上线。即使你是小白看完博客也能让你成为糕手糕手糕糕手......
  • Nginx 部署前端 Vue 项目实战指南
    一、环境准备1.安装Nginx首先,需要在服务器上安装Nginx。Nginx是一款轻量级、高性能的HTTP和反向代理服务器。安装方式因操作系统而异。Linux系统(以Ubuntu为例):sudoapt-getupdatesudoapt-getinstallnginxWindows系统:从Nginx官方网站下载安装包,按......