Vue-纯前端导出word文档 Can‘t find end of central directory:is this a zip file？

其实好多文章都有介绍我这里就把自己遇到的一个奇葩问题记录一下：
归根结底就是不要直接通过改变文件后缀名来企图创建一个word.docx文件；

首先

-- 安装 docxtemplater
npm install docxtemplater pizzip  --save-- 安装 jszip-utils
npm install jszip-utils --save -- 安装 jszip
npm install jszip --save-- 安装 FileSaver
npm install file-saver --save

封装组件

import docxtemplater from "docxtemplater";
import PizZip from "pizzip";
import JSZipUtils from "jszip-utils";
import { saveAs } from "file-saver";
// 点击导出word
export const exportWord = (data = {name: "佚名",},docPath = "/model.docx"
) => {// 读取并获得模板文件的二进制内容JSZipUtils.getBinaryContent(docPath, function(error, content) {// model.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据// 抛出异常if (error) {throw error;}// 创建一个PizZip实例，内容为模板的内容let zip = new PizZip(content);// 创建并加载docxtemplater实例对象let doc = new docxtemplater().loadZip(zip);// 设置模板变量的值//set the templateVariablesdoc.setData(data);try {// 用模板变量的值替换所有模板变量doc.render();} catch (error) {// 抛出异常let e = {message: error.message,name: error.name,stack: error.stack,properties: error.properties,};console.log(JSON.stringify({ error: e }));throw error;}// 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）let out = doc.getZip().generate({type: "blob",mimeType:"application/vnd.openxmlformats-officedocument.wordprocessingml.document",});// 将目标文件对象保存为目标类型的文件，并命名saveAs(out, "授权文件.docx");});
};

vue-cli 3.0以上将docx文件放到public中

// 调用的话/*** 导出doc方法*/// param = {// name: '好'// }exportWordFun(param) {exportWord(param,`/model_${param}.docx`);},

效果：

切记两点：

docx文件放到public（vue-cli2.0放到static文件夹下），路径采用‘/model.docx’形式
docx文件不要通过更改后缀名来创建，正儿八经建一个。

Vue-纯前端导出word文档 Can‘t find end of central directory:is this a zip file？相关推荐

纯前端导出word文档
实现这个功能时参考了两处文档,但是都有兼容性问题一个是不兼容ie,一个是只能在ie中使用,不过正好互补了,下面是结合两处文档之后的.(摘自想要飞翔的小猪和iteye_10362的博客.) 注意:Act ...
vue前端html页面导出word文件,Vue-纯前端导出word文档
在项目中,我们可以借助后端返回文件流实现文件下载.如果前端有数据,也可以借助前端框架进行下载.本文将介绍如何在前端纯js实现word文档导出. 1. 组件介绍要实现前端纯js导出word文档,我们需 ...
「Vue To Words」 - 教你在Vue项目中导出Word文档（包含表格合并，图片修改大小）
前言:最近在项目中遇到了,vue页面需要导出word文档,今日就进行记录一下,如有不对的地方,还请见谅 ^^ 简单说一下需求:需要导出的页面是表格页面,因为包含表格的嵌套和合并,其实最主要的就是导出页 ...
Vue导出word附表部分横向显示(承接上一篇Vue纯前端导出word)
Vue纯前端导出word直通车 1. 引入js import htmlDocx from "@/utils/html-docx"; 2. page-break-before:alw ...
vue项目+element表格前端使用纯js导出word文档
详细请读https://www.jianshu.com/p/0de31429b12a这篇文章首先安装各种工具: -- 安装 docxtemplater cnpm install docxtempla ...
纯前端导出word、pdf、excel、txt、svg文档方法与技巧（附带问题总结）
文章目录导出pdf **实现思路:** **问题总结:** **具体代码** **封装好的导出函数,记得引入js插件** 封装方法一: 封装方法二: 封装方法三: 纯前端导出word文档方法与技巧 ...
vue element ui 利用xslx导出文档表格功能（纯前端导出下载文档）
目录前言步骤: 1.下载xslx 2.导入xslx 3.template中给个点击事件 4.methods中定义函数实现导出前言本篇文章记录纯前端导出下载文档功能. 若想查看从后端接收文件流, ...
vue 生产word_nodejs(officegen)+vue(axios)在客户端导出word文档
前言我的项目中有一个需求:点击按钮生成可编辑的word文档订单详情的信息我使用的前端框架是Vue.js.后台使用的是node.js node.js生成和导出word文档我参考的是下面这两篇文章,写 ...
vue实现导出word文档（含多张图片）
一.实现效果以填写并导出房屋出租审批表为例,首先填写表格相应内容后,点击" 导出 "按钮实现word文档的导出功能,界面如下所示: 最后导出word文档如下所示: 二.所需插件 ...

Vue-纯前端导出word文档 Can‘t find end of central directory:is this a zip file？

Vue-纯前端导出word文档 Can‘t find end of central directory:is this a zip file？相关推荐

最新文章

热门文章