VUE动态生成word

最新推荐文章于 2024-09-15 19:18:08 发布

LeasonSong

最新推荐文章于 2024-09-15 19:18:08 发布

阅读量1.4w

点赞数 3

分类专栏： VUE javascript 文章标签： VUE 生成word axios

本文链接：https://blog.csdn.net/LesonSong/article/details/80137218

版权

本文介绍如何使用Vue配合axios在前端动态生成Word文档。通过调用后台接口，实现从JSON数据到Word文件的转换。

摘要由CSDN通过智能技术生成

不废话，直接上代码。

前端代码：

<template>
    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="110">
        <FormItem label="项目（全称）：" prop="orgName">
            <Input v-model="formValidate.orgName" placeholder="请输入项目名称"></Input>
        </FormItem>
        <FormItem label="申请人：" prop="applyName" >
            <Input v-model="formValidate.applyName" placeholder="请输入申请人"></Input>
        </FormItem>
        <FormItem label="电话：" prop="applyPhone">
            <Input v-model="formValidate.applyPhone" placeholder="请输入电话"></Input>
        </FormItem>
        <FormItem label="生效日期：" style="float: left">
            <Row>
                <FormItem prop="startDate">
                    <DatePicker type="date" format="yyyy-MM-dd" placeholder="请选择生效日期" v-model="formValidate.startData"></DatePicker>
                </FormItem>
            </Row>
        </FormItem>
        <FormItem label="失效日期：">
            <Row>
                <FormItem prop="endDate">
                    <DatePicker type="date" format="yyyy-MM-dd" placeholder="请选择失效日期" v-model="formValidate.endData"></DatePicker>
                </FormItem>
            </Row>
        </FormItem>
        <FormItem label="备注：" prop="vmemo">
            <Input v-model="formValidate.vmemo" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="备注"></Input>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit('formValidate')">生成申请单</Button>
        </FormItem>
    </Form>
</template>
<script>
    import axios from 'axios';
    export default {
        data () {
            return {
                formValidate: {
                    orgNam