网上搜到的代码都没办法直接使用，需要修改后才能用，我在这里发一版修改后的完美可用的代码，可以直接拿去用，也给自己留个备份。

我在使用网上搜到的代码的时候遇到一些问题，如果你也遇到了这些问题，那么表示这篇文章可以帮助你。

 

问题：

1、JSZIP版本太高(V3.x)，导致docxtemplater无法使用，以及一些函数大改动。

2、Vue3使用的Vite而不是Webpack，因此 require，Buffer等功能不能使用。

 

解决方法：

1、手动将JSZIP由3.x改为2.3.0版本，重新npm i，即可解决。

2、Buffer要安装buffer依赖，使用

npm i buffer --save

进行安装，然后直接按如下引用：

import {Buffer} from "buffer";

另外，网络上的代码在加载图片处理依赖时使用的是

var ImageModule = require('docxtemplater-image-module-free');

需要改为

import ImageModule from "docxtemplater-image-module-free";

 

以上就是主要的问题所在，下面贴上完整代码和一些需要注意的东西。

完整代码

1、开始之前，你需要先安装如下依赖

-- 安装 docxtemplater
npm install docxtemplater pizzip  --save

-- 安装 jszip-utils
npm install jszip-utils --save

-- 安装 jszip
npm install jszip --save

-- 安装 FileSaver
npm install file-saver --save

-- 安装 buffer 用作b64转buffer
npm install buffer --save

-- 安装 docxtemplater-image-module-free 用作图片处理
npm install docxtemplater-image-module-free --save

 

2、新建一个js文件，我是在/src/utils/下新建的fileExport.js，并粘贴如下内容。

import PizZip from 'jszip';
import docxtemplater from 'docxtemplater';
import JSZipUtils from 'jszip-utils';
import {saveAs} from 'file-saver';
import {Buffer} from "buffer";
import ImageModule from "docxtemplater-image-module-free";


const base64DataURLToArrayBuffer = (dataURL) => {
    const base64Regex = /^data:image\/(png|jpg|svg|svg\+xml);base64,/;
    if (!base64Regex.test(dataURL)) {
        return false;
    }
    const stringBase64 = dataURL.replace(base64Regex, "");
    let binaryString;
    if (typeof window !== "undefined") {
        binaryString = window.atob(stringBase64);
    } else {
        binaryString = new Buffer(stringBase64, "base64").toString("binary");
    }
    const len = binaryString.length;
    const bytes = new Uint8Array(len);
    for (let i = 0; i < len; i++) {
        const ascii = binaryString.charCodeAt(i);
        bytes[i] = ascii;
    }
    return bytes.buffer;
}

/**
 * 导出word,支持图片
 * @param {Object} tempDocxPath 模板文件路径
 * @param {Object} wordData 导出数据
 * @param {Object} fileName 导出文件名
 */
export const exportWord = (tempDocxPath, wordData, fileName, imageSize = {}) => {
    // 读取并获得模板文件的二进制内容
    JSZipUtils.getBinaryContent(tempDocxPath, function (error, content) {
            if (error) {
                throw error;
            }
            let opts = {};
            opts.centered = true; // 图片居中，在word模板中定义方式为{%%image}
            opts.fileType = "docx";
            opts.getImage = function (chartId) {
                return base64DataURLToArrayBuffer(chartId);
            };
            opts.getSize = function (img, tagValue, tagName) {
                // console.log(img);//ArrayBuffer数据
                // console.log(tagValue);//base64数据
                // console.log(tagName);//wordData对象的图像属性名
                // 自定义指定图像大小
                // eslint-disable-next-line no-prototype-builtins
                if (imageSize.hasOwnProperty(tagName)) {
                    return imageSize[tagName];
                } else {
                    return [660, 440];
                }
            }
            let imageModule = new ImageModule(opts);
            // 创建一个PizZip实例，内容为模板的内容
            const zip = new PizZip(content);
            // 创建并加载docxtemplater实例对象
            const doc = new docxtemplater();
            doc.attachModule(imageModule);
            doc.loadZip(zip);

            doc.setData(wordData);

            try {
                // 用模板变量的值替换所有模板变量
                doc.render();
            } catch (error) {
                // 抛出异常
                const e = {
                    message: error.message,
                    name: error.name,
                    stack: error.stack,
                    properties: error.properties
                };
                console.log(
                    JSON.stringify({
                        error: e
                    })
                );
                throw error;
            }
            console.log('11');
            // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
            const out = doc.getZip().generate({
                type: 'blob',
                mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
            });
            // 将目标文件对象保存为目标类型的文件，并命名
            saveAs(out, fileName);
        }
    );
};

 

3、参数说明

• tempDocxPath 是模板文件绝对路径
• wordData 模板数据
• fileName 要保存的文件名
• imageSize 图片大小，接受一个int对象，格式是{ width, height }，单位是px，例如{ 400, 300 }

如需导出图片，则需要将图片转为base64后写入wordData对象内。

echarts转base64的方法是

echarts.getInstanceByDom(document.getElementById('echarts')).getDataURL({
    type: 'png',
    backgroundColor: '#fff',
    pixelRatio: 1,
})

 

4、模板变量

模板内变量要和wordData里的变量名一致。普通字段：{字段名}，图片字段：{%字段名}

 

以上

大家好，我在做JSON转XML时出现，如果字符串格式是XML，但是却强制进行JSON -> XML操作，控制台会报错Syntex Error，这个错误是人为导致的，并不是代码有问题，因此我需要捕获这个错误并处理。

尝试过使用try catch来捕获，发现根本没用。

经过查阅文档，发现可以使用生命周期钩子onErrorCaptured来处理

下面是我的代码，各位在使用时可以借鉴。

onErrorCaptured((err) => {
      // 判断是错误还是异常
      if (err.toString().indexOf('SyntaxError') !== -1) {
        ElNotification({
          title: '程序出错',
          message: err.message,
          type: 'error',
        })
        return false
      }
    })

 

err是返回的错误对象，你要查找特定的错误就得把他转字符串，你可以在控制台看到完整的错误信息（红色的），err.message只包含内容，不包含开头的错误或警告类型。

祝各位程序永无BUG

复杂的官方文档

大家好，编写elementUI时，看到新的element-plus的表单验证部分写的如此的复杂，我下面复制官方文档的表单验证部分的代码。

<template>
  <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
    :size="formSize"
  >
    <el-form-item label="Activity name" prop="name">
      <el-input v-model="ruleForm.name" />
    </el-form-item>
    <el-form-item label="Activity zone" prop="region">
      <el-select v-model="ruleForm.region" placeholder="Activity zone">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item label="Activity time" required>
      <el-col :span="11">
        <el-form-item prop="date1">
          <el-date-picker
            v-model="ruleForm.date1"
            type="date"
            placeholder="Pick a date"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
      <el-col class="text-center" :span="2">
        <span class="text-gray-500">-</span>
      </el-col>
      <el-col :span="11">
        <el-form-item prop="date2">
          <el-time-picker
            v-model="ruleForm.date2"
            placeholder="Pick a time"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
    </el-form-item>
    <el-form-item label="Instant delivery" prop="delivery">
      <el-switch v-model="ruleForm.delivery" />
    </el-form-item>
    <el-form-item label="Activity type" prop="type">
      <el-checkbox-group v-model="ruleForm.type">
        <el-checkbox label="Online activities" name="type" />
        <el-checkbox label="Promotion activities" name="type" />
        <el-checkbox label="Offline activities" name="type" />
        <el-checkbox label="Simple brand exposure" name="type" />
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="Resources" prop="resource">
      <el-radio-group v-model="ruleForm.resource">
        <el-radio label="Sponsorship" />
        <el-radio label="Venue" />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="Activity form" prop="desc">
      <el-input v-model="ruleForm.desc" type="textarea" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)"
        >Create</el-button
      >
      <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  name: 'Hello',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

const rules = reactive<FormRules>({
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  region: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'change',
    },
  ],
  date1: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a date',
      trigger: 'change',
    },
  ],
  date2: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a time',
      trigger: 'change',
    },
  ],
  type: [
    {
      type: 'array',
      required: true,
      message: 'Please select at least one activity type',
      trigger: 'change',
    },
  ],
  resource: [
    {
      required: true,
      message: 'Please select activity resource',
      trigger: 'change',
    },
  ],
  desc: [
    { required: true, message: 'Please input activity form', trigger: 'blur' },
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>

一个简单的表单验证写的这么啰嗦，我就想校验一下登录账号和密码，需要这么麻烦吗？

其实只需要FormInstance就可以实现了。

超简单的写法

对于简单的表单验证，完全不需要上面那么啰嗦。

其实验证是很简单的，只需要写一个验证的数组(rules)，并赋值给el-form组件的rule参数即可，如下

<el-form ref="formRef" :model="loginForm" :rules="rules" label-position="top"></el-form>

rules长这样

const rules = ref({
      phone: [
        {required: true, message: '必须输入手机号码', trigger: 'blur'},
        {pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur'},
      ],
      password: [
        {required: true, message: '必须输入密码', trigger: 'blur'},
        {min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur'},
      ]
    })

那你可能会问了，ref是干啥用的啊？

告诉你，ref的目的是为了在提交或者什么操作的时候，手动验证表单，如下。

比如我们有个登录按钮，和登录的方法onLogin()

<el-button type="primary" @click="onLogin(formRef)">登录</el-button>

const onLogin = (form) => {
      form.validate((valid, fields) => {
        if (valid) {
          console.log('登录成功')
        } else {
          console.log('error submit!', fields)
        }
      })
    }

相信小伙伴们已经看明白什么意思了。

简单来说，就是在登录方法里传参传这个ref进去，然后这个ref有validate()方法，通过这个方法就校验了。上面的if else是固定写法。

那么ref这个值是哪来的呢？其实是开头说的FormInstance定义出来的，定义如下：

// 引用
import {FormInstance} from "element-plus"

// 这个是写在setup()里的！！
const formRef = ref<FormInstance>('')

 

 

怎么样，是不是比官方那啰里啰嗦一大串舒服多了？