js循环导出多个word表格文档

文章目录

  • js循环导出多个word表格文档
    • 一、文档模板编辑
    • 二、安装依赖
    • 三、创建导出工具类exportWord.js
    • 四、调用
    • 五、效果图

js循环导出多个word表格文档

  • 结果案例:
    在这里插入图片描述

一、文档模板编辑

在这里插入图片描述

二、安装依赖

// 实现word下载的主要依赖
npm install docxtemplater pizzip  --save

// 文件操作,也可以用fs、path等模块实现
npm install jszip jszip-utils --save 

// 文件存储依赖
npm install file-saver --save

三、创建导出工具类exportWord.js

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

/**
 * 导出word,支持图片
 * @param {Object} tempDocxPath 模板文件路径
 * @param {Object} wordData 导出数据
 * @param {Object} fileName 导出文件名
 */
export const exportWord = (tempDocxPath, wordData, fileName) => {
   
  JSZipUtils.getBinaryContent(tempDocxPath, function (error, content) {
   
    if (error) {
   
      throw error;
    }
    // PizZip实例
    let zip = new PizZip(content);
    // 创建并加载docxtemplater实例
    let doc = new Docxtemplater();
    doc.loadZip(zip);
    // 设置模板变量的值
    doc.setData(wordData);
    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, fileName);
  });
}

四、调用

<script lang="ts">
import {
      exportWord } from '../../utils/exportWord'

export default {
     
  name: 'DbInfo',
  data (){
     
    return{
     
    }
  },
  mounted() {
     
  },
  methods: {
     
	// 导出方法
    batchExWord(){
     
    	var dataList = [
		   {
     
		        "tablecnName": "部门表",
		        "tableName": "sys_dept",
		        "tableDict": [
		            {
     
		                "cnfield": "部门id",
		                "colname": "dept_id",
		                "datatype": "bigint(20)",
		                "isprimary": "Y",
		                "isforeign": "N",
		                "isonly": "Y",
		                "nonempty": "Y",
		                "defaultstr": "N",
		                "describe": "部门id"
		            },
		            {
     
		                "cnfield": "父部门id",
		                "colname": "parent_id",
		                "datatype": "bigint(20)",
		                "isprimary": "N",
		                "isforeign": "N",
		                "isonly": "N",
		                "nonempty": "N",
		                "defaultstr": "0",
		                "describe": "父部门id"
		            },
		            {
     
		                "cnfield": "祖级列表",
		                "colname": "ancestors",
		                "datatype": "varchar(50)",
		                "isprimary": "N",
		                "isforeign": "N",
		                "isonly": "N",
		                "nonempty": "N",
		                "defaultstr": "N",
		                

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/933366.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

字节高频算法面试题:小于 n 的最大数

问题描述&#xff08;感觉n的位数需要大于等于2&#xff0c;因为n的位数1的话会有点问题&#xff0c;“且无重复”是指nums中存在重复&#xff0c;但是最后返回的小于n最大数是可以重复使用nums中的元素的&#xff09;&#xff1a; 思路&#xff1a; 先对nums倒序排序 暴力回…

windows11 实现Hyper-v ubuntu22.04 GPU虚拟化(GPU分区、GPU-P)教程

注:1、本文提到的vGPU、GPU分区都是指的微软的GPU-P技术。 2、在实操过程中,发现网上的很多文章要么记录不全,要么描述不清楚,导致的结果就是根本没法走通。希望通过该文章能解决小伙伴们在实操中遇到的一些坑。 前提说明 1、物理机需要支持SR-IOV,在主板BIOS中可以通过…

AndroidStudio-常见界面控件

一、Button package com.example.review01import androidx.appcompat.app.AppCompatActivity import android.os.Bundle import android.widget.Button import android.widget.TextViewclass Review01Activity : AppCompatActivity() {override fun onCreate(savedInstanceStat…

沐风老师3DMAX摄相机阵列插件使用方法

3DMAX摄相机阵列插件&#xff0c;从网格对象或样条线的顶点法线快速创建摄相机阵列。该插件从网格的顶点或样条线的节点获取每个摄影机的位置和方向。 3DMAX摄相机阵列插件支持目前3dMax主流的物理相机、标准相机、VRay物理相机。 【版本要求】 3dMax 2015及更高版本 【安装方…

记录一下,解决js内存溢出npm ERR! code ELIFECYCLEnpm ERR! errno 134 以及 errno 9009

项目是个老项目&#xff0c;依赖包也比较大&#xff0c;咱就按正常流程走一遍来详细解决这个问题&#xff0c;先看一下node版本&#xff0c;我用的是nvm管理的&#xff0c;详细可以看我的其他文章 友情提醒&#xff1a;如果项目比较老&#xff0c;包又大&#xff0c;又有一些需…

飞飞5.4游戏源码(客户端+服务端+工具完整源代码+5.3fix+5.4patch+数据库可编译进游戏)

飞飞5.4游戏源码&#xff08;客户端服务端工具完整源代码5.3fix5.4patch数据库可编译进游戏&#xff09; 下载地址&#xff1a; 通过网盘分享的文件&#xff1a;【源码】飞飞5.4游戏源码&#xff08;客户端服务端工具完整源代码5.3fix5.4patch数据库可编译进游戏&#xff09; 链…

springboot的 nacos 配置获取不到导致启动失败及日志不输出问题

前言 问题 1. 本地启动应用时&#xff0c;一切正常&#xff0c;但是部署 docker 后&#xff0c;会因为获取不到 nacos 中的配置导致服务启动失败。 2.当 docker 中的服务一直重启&#xff0c;可能会突然某一次启动成功&#xff0c;之后只要不重新构建 docker 镜像&am…

Docker Compose实战一( 轻松部署 Nginx)

通过过前面的文章&#xff08;Docker Compose基础语法&#xff09;你已经掌握基本语法和常用指令认识到Docker Compose作为一款强大工具的重要性&#xff0c;它极大地简化了多容器Docker应用程序的部署与管理流程。本文将详细介绍如何使用 Docker Compose 部署 Nginx&#xff0…

汽车IVI中控OS Linux driver开发实操(二十八):回声消除echo cancellation和噪声消除Noise reduction

概述: 在当今高度互联的世界中,清晰的实时通信比以往任何时候都更重要。在远程团队会议期间,没有什么能像回声一样打断对话。当说话者听到他们的声音回响时,可能会分散注意力,甚至无法理解对话。即使是很小的回声也会产生很大的影响,仅仅25毫秒的振幅就足以造成声音干扰…

计算机毕设-基于springboot的实践性教学系统设计与实现(附源码+lw+ppt+开题报告)

博主介绍&#xff1a;✌多个项目实战经验、多个大型网购商城开发经验、在某机构指导学员上千名、专注于本行业领域✌ 技术范围&#xff1a;Java实战项目、Python实战项目、微信小程序/安卓实战项目、爬虫大数据实战项目、Nodejs实战项目、PHP实战项目、.NET实战项目、Golang实战…

UE5 猎户座漂浮小岛 09 移动能力 角色属性

UE5 猎户座漂浮小岛 09 移动能力 角色属性&#xff08;1&#xff09; 1.移动能力 1.1 加速跑 BlendSpace&#xff1a;混合空间 2.角色属性 2.1 行动点数 AP&#xff1a;Action Point Max AP&#xff1a;Max Action Point AP CPS&#xff1a;Action Point Consume Per Sec…

低级爬虫实现-记录HCIP云架构考试

因工作需要考HCIP云架构&#xff08;HCIP-Cloud Service Solution Architect&#xff09;证书, 特意在淘宝上买了题库&#xff0c; 考过了。 事后得知自己被坑了&#xff0c; 多花了几十大洋。 所以想着在授权期内将题库“爬”下来&#xff0c; 共享给大家。 因为整个过程蛮有…

IDEA实现javaweb用户登录(增删改查)

IDEA实现javaweb用户登录&#xff08;增删改查&#xff09; 文章目录 IDEA实现javaweb用户登录&#xff08;增删改查&#xff09;前言一、IDEA 软件的简单使用1 创建一个普通 java 项目2 新增 web 配置将项目由普通的Java项目变为 javaweb项目2.1 新增 web 配置2.2 新增项目文件…

【机器学习】——windows下安装anaconda并在vscode上进行配置

一、安装anaconda 1.进入清华的镜像网站&#xff0c;下载自己电脑对应的anaconda版本。网站&#xff1a;https://repo.anaconda.com/archive/ 这里我下载的版本是anaconda3-2024.10-1-Windows-x86-64 2.下载完毕后开始安装anaconda 3.配置anaconda环境变量 在设置中找到编…

3.5 认识决策树

3.5 认识决策树 3.5.1 认识决策树 如何高效的进行决策&#xff1f; 特征的先后顺序 3.5.2 决策树分类原理详解 已知有四个特征&#xff0c;预测 是否贷款给某个人。 先看房子&#xff0c;再看工作&#xff0c;是否贷款。 年龄&#xff0c;信贷情况&#xff0c;工作&#…

【Windows11系统局域网共享文件数据】

【Windows11系统局域网共享文件数据】 1. 引言1. 规划网络2. 获取必要的硬件3. 设置网络4. 配置网络设备5. 测试网络连接6. 安全性和维护7. 扩展和优化 2. 准备工作2.1: 启用网络发现和文件共享2.2: 设置共享文件夹 3. 访问共享文件夹4. 小贴士5. 总结 1. 引言 随着家庭和小型办…

[SWPUCTF 2022 新生赛]funny_php

进入靶场环境 <?phpsession_start();highlight_file(__FILE__);if(isset($_GET[num])){if(strlen($_GET[num])<3&&$_GET[num]>999999999){echo ":D";$_SESSION[L1] 1;}else{echo ":C";}}if(isset($_GET[str])){$str preg_replace(/NS…

ARMv8-A MacOS调试环境搭建

文章目录 简介安装qemu交叉编译工具链C语言插件 gdb调试测试代码添加调试配置 JLink 调试树莓派 简介 本节主要介绍基于Visual Studio Code在MacOS下调试环境的搭建&#xff0c;Linux发行版上的过程也类型&#xff0c;它主要使用到以下工具链&#xff1a; aarch64 架构的交叉…

HDR视频技术之六:色调映射

图像显示技术的最终目的就是使得显示的图像效果尽量接近人们在自然界中观察到的对应的场景。 HDR 图像与视频有着更高的亮度、更深的位深、更广的色域&#xff0c;因此它无法在常见的普通显示器上显示。 入门级的显示器与播放设备&#xff08;例如普通人家使用的电视&#xff0…

力扣HOT 100(图)

图论 797. 所有可能的路径 为什么path先把索引加上&#xff0c;图这个数据结构的索引&#xff0c;包含了数据信息&#xff0c;所以索引到数据表再到索引这个过程。一般回溯索引没有涉及问题中的含义。 class Solution {List<Integer> pathnew ArrayList<>();/…