Vue-纯前端导出word文档，ts版

已于 2022-06-30 17:46:59 修改 · 609 阅读

文章标签：

#javascript #前端 #vue.js #typescript

于 2022-06-30 15:24:29 首次发布

vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在Vue+TS项目中实现纯前端导出Word文档，包括安装docxtemplater、jszip-utils、jszip和file-saver等依赖，以及在shims-lib.d.ts和tsconfig.json中进行类型声明和配置。同时，提供了导出Word的方法和示例代码，以及遇到问题时的参考链接。

Vue-纯前端导出word文档，ts版

安装依赖

安装 docxtemplater
cnpm install docxtemplater pizzip --save

安装 jszip-utils
cnpm install jszip-utils --save

安装 jszip
cnpm install jszip --save

安装 FileSaver
cnpm install file-saver --save

ps：项目如果是vue+ts
1、需要在shims-lib.d.ts文件手动声明：declare module ‘jszip’; declare module ‘jszip-utils’;
2、需要在tsconfig.json文件中的"compilerOptions"对象加"typeRoots": [“src/@types”, “./node_modules/@types”]，还要修改"exclude": [“node_modules”, “src/@types/**/*”]

在需要的文件引入

import docxtemplater from 'docxtemplater';
import PizZip from 'pizzip';
import JSZipUtils from 'jszip-utils';
import { saveAs } from 'file-saver';

使用

方法

// 点击导出word 
  exportWord() {
    const tableData: any = this.tableData; //要导出word的数据
    // 读取并获得模板文件的二进制内容
    JSZipUtils.getBinaryContent(`/model.docx`, function (error: any, content: any) {
      // model.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
      // 抛出异常
      if (error) {
        throw error;
      }

      // 创建一个PizZip实例，内容为模板的内容
      let zip = new PizZip(content);
      // 创建并加载docxtemplater实例对象
      let doc = new docxtemplater().loadZip(zip);
      // 设置模板变量的值
      doc.setData({
        table: tableData,
      });

      try {
        // 用模板变量的值替换所有模板变量
        doc.render();
      } catch (error: any) {
        // 抛出异常
        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');
    });
  }

html

<el-button type="primary" @click="exportWord">导出word</el-button>

其他bug

可以参考：https://www.cnblogs.com/hejun26/p/13647927.html