# export_docx_xlsx_vue

**Repository Path**: kuxiao-smile/export_docx_xlsx_vue

## Basic Information

- **Project Name**: export_docx_xlsx_vue
- **Description**: 基于Vue导出docx格式文件
docx_js_文件夹，需启动文件内带的node服务，根据配置动态生成docx文件方式，灵活性较高。
docxtemplater文件夹，无需启动node服务，为替换字符方式导出docx文档方式。
基于Vue导出xlsx格式文件 
xlsx_js_


文件内均有文档 -- 或者配置文件写了大量注释与示例去描述...
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2023-04-14
- **Last Updated**: 2025-05-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 1 docx_js_ 文件代码文件使用说明 -- node 服务看自己需要，已添加 docx.js 生成的文件支持前端自己导出。

![效果图](./%E6%95%88%E6%9E%9C%E5%9B%BE.png)

## 1 node_server -- 导出DOCX文件后端服务

### 1.1 需安装NPM包 -- 需要手动下包

```
npm i express  -- 基于Node.js的Web应用开发框架
npm i multer   -- 用于处理Node.js中文件上传的中间件
npm i streamifier -- 用于处理数据流的工具库，它可以将任何数据转换为Node.js的可读流
npm i fs -- 读取、写入、修改和删除文件
```

### 1.2 启动命令

```
node .\app.js
```

##2 docx_vue -- 导出DOCX文件前端服务

### 2.1 下载所需包

```
npm i
```

### 2.2 启动命令

```
npm run serve
```

### 2.3 主要文件描述

```
vue.config.js      打包配置文件 -- 包含接口代理 -- 如需要在此处修改
@/api/docx.js      定义接口配置文件
@/utils/docx.js    生成docx.js配置文件
@/utils/index.js   公共方法文件
@/utils/request.js 请求配置接口
@/views/docx.vue   导出docx文件
// --- 省略不相关文件描述 ---
```

# 2 docxtemplater 文件代码文件使用说明 -- 无需启动node服务，前端自行导出下载

## 1 导出 word 模板 需额外安装的 NPM 包

```
// 安装 docxtemplater --- 需 node 版本 >= 14

npm install docxtemplater pizzip --save

// 安装 jszip-utils

npm install jszip-utils --save

// 安装 jszip

npm install jszip --save

// 安装 FileSaver

npm install file-saver --save

// 安装 angular-expressions

npm install angular-expressions --save

// 安装 image-size

npm install image-size --save

// 图片模块，没有图片需求可以不装

npm install docxtemplater-image-module-free
```

## 2 替换字符示例 (不要用驼峰命名,字符替换会不生效)

### 2.1 单字符模板字符替换

```
name: "", // 示例

{name}
```

### 2.2文本框

```
textarea:"", // 示例

{#textarea}

{.}

{/textarea}
```

### 2.3 数组-对象

```
[{ name: "测试", thing: "上班" },] // 示例

{#thinglist}

{name}-{thing}

{/thinglist}
```

### 2.4 图片

```
imglist: [
{imgUrl: "file/微信图片_20220209193410.jpg",},
{imgUrl: "file/1640766512(1).png",},
],

{#imglist}

{%imgUrl}

{/imglist}
```

## 3 注意

图片宽高被特殊处理过（为了适应A4纸大小），如不希望处理 ，只需把 `home.vue` 里的`92`行处理文本，`getBase64Sync`转换base64格式方法，`exportWord` 导出方法提取处理即可，注意图片宽高接收的是一个二维数组，如果想改，移步`@/utils/exportFile.js`文件`108-118`行，注意`114`行代码（主要改这个）即可。



# 3 xlsx_js_ 文件

Vue根据页面数据生成xlsx表格