element-ui框架下通过docxtemplater插件导出word文件

这篇具有很好参考价值的文章主要介绍了element-ui框架下通过docxtemplater插件导出word文件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

业务需求——vue前端页面通过预先写好的word生成对应带数据的文件

预先写好的word
docxtemplater,word,vue.js,elementui
生成的带数据word文档
docxtemplater,word,vue.js,elementui

docxtemplater 简介

docxtemplater 使用 JSON 数据格式作为输入,可以处理docx 和 ppt模板。不像一些其它的工具,比如 docx.js, docx4j, python-docx 等,需要自己编写代码来生成文件,docxtemplater只需要用户通过标签的形式编写模板,就可以生成文件

使用教程

安装依赖

项目所需依赖:docxtemplater,jszip,jszip-utils,pizzip,file-saver。

1、docxtemplater:这个插件可以通过预先写好的word,excel等文件模板生成对应带数据的文件

2、pizzip:这个插件用来创建,读取或编辑.zip的文件(同步的,还有一个插件是jszip,异步的)

3、jszip-utils:与jszip/pizzip一起使用,jszip-utils 提供一个getBinaryContent(path, data)接口,path即是文件的路径,支持AJAX get请求,data为读取的文件内容。

4、file-saver:适合在客户端生成文件的工具,它提供的接口saveAs(blob, “1.docx”)将会使用到,方便我们保存文件。

5、docxtemplater-image-module-free:需要导出图片的话需要这个插件

npm 安装如下:

npm install  docxtemplater pizzip --save  // 处理docx模板
npm install  jszip-utils --save
npm install  jszip --save   
npm install  file-saver --save  // 处理输出文件

创建word模板文件

docxtemplater,word,vue.js,elementui

创建word模板:public/demo.docx
vue cli3/vue cli4 在 public 文件下存放word模板demo.docx;
vue cli2 在static文件下存放word模板demo.docx;

具体代码如下:

<template>
    <div>
      <el-dialog
        title="确认生成合同"
        :close-on-click-modal="true"
        style="margin-top: -12vh"
        width="60%"
        v-loading="confirmLoading"
        :close="close"
        :visible.sync="dialogFormVisible">
        <div >
        <el-form ref="form" :model="form" :rules="rules" label-width="150px">
            <el-form-item label="受托单位" prop="entrustedName">
              <el-input v-model="form.entrustedName" />
            </el-form-item>
            <el-form-item label="受托单位地址" prop="entrustedAddress">
              <el-input v-model="form.entrustedAddress" />
            </el-form-item>
            <el-form-item label="受托单位电话" prop="entrustedTel">
              <el-input v-model="form.entrustedTel" />
            </el-form-item>
            <el-form-item label="开户行" prop="bankName">
              <el-input v-model="form.bankName" />
            </el-form-item>
            <el-form-item label="账户户名" prop="accountName">
              <el-input v-model="form.accountName" />
            </el-form-item>
            <el-form-item label="账号" prop="accountCode">
              <el-input v-model="form.accountCode" />
            </el-form-item>
            <el-form-item label="实收检测金额" prop="realPrice">
              <el-input v-model="form.realPrice" />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer" style="text-align: right;margin-top:10px;">
            <el-button type="primary" @click="handleAccept">生成合同</el-button>
            <el-button @click="dialogFormVisible = false">关 闭</el-button>
          </div>
        </div>
      </el-dialog>

    </div>
</template>

<script>
  import {doEditContract} from '@/api/baseOrderMaterial'
  import docxtemplater from 'docxtemplater'
  import PizZip from 'pizzip'
  import JSZipUtils from 'jszip-utils'
  import {saveAs} from 'file-saver'

    export default {
      name: "ConfirmOrderReagentModal",
      description:'生成合同',

      data(){
        return {
          form:{
            id:'123',
          },
        }
      },
      methods:{
        //确认受理
         handleAccept(){
           const that = this
           this.$refs['form'].validate(async (valid) => {
             if (valid) {
               this.$baseConfirm('请仔细核对合同信息\n确认生成合同吗?','确认生成',async ()=>{
                 that.confirmLoading = true
                 that.form.orderId = that.currOrder.id
                 that.form.realOrganId = that.realOrganId
                 that.form.isSelf = that.isSelf
                 console.log("that.form",that.form)
                 const {success,result} = await doEditContract(that.form)
                 console.log("wordResult--------",result)
                 if(success){
                   let _this = this;
                   // 读取并获得模板文件的二进制内容
                   JSZipUtils.getBinaryContent("demo.docx", function(error, content) {
                     // input.docx是模板。我们在导出的时候,会根据此模板来导出对应的数据
                     // 抛出异常
                     if (error) {
                       throw error;
                     }

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

                     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"
                     });
                     // 将目标文件对象保存为目标类型的文件,并命名

                     let filename = "销售合同.docx"
                     saveAs(out, filename);
                   });
                   that.close()
                   that.$emit('ok')
                 }else{
                   that.$baseMessage(message, 'error')
                 }

               });
             }
           })
        },
        //-----------------------------------end------------------------------
        changeRadio(e){
          if(e===0){
            this.isSelf = 0
            this.loadManageInfo()
          }else if(e===1){
            this.form = {
              entrustedName: this.selTestOrgan.enterpriceName,
              entrustedAddress : this.selTestOrgan.enterpriceAddress,
              entrustedTel : this.selTestOrgan.linkTel,
              bankName : this.selTestOrgan.bankName,
              accountName : this.selTestOrgan.accountName,
              accountCode : this.selTestOrgan.accountCode,
              realPrice : this.currOrder.orderPrice,
              searchDate:this.currOrder.searchDate
            }
            this.isSelf = 1

          }
        }
      }
    }
</script>
<style scoped>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
doc.setData({
 ...result,
});
后台封装数据集格式如下:

docxtemplater,word,vue.js,elementui文章来源地址https://www.toymoban.com/news/detail-764087.html

到了这里,关于element-ui框架下通过docxtemplater插件导出word文件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 第5篇 vue的通信框架axios和ui框架-element-ui以及node.js

    axios是独立于vue的一个项目,基于promise用于浏览器和node.js的http客户端。 在浏览器中可以帮助我们完成 ajax请求的发送 在node.js中可以向远程接口发送请求 1.后端代码 2.前端代码 3.运行效果 element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库,方便程序员进行页面快速布局和

    2024年02月09日
    浏览(53)
  • vue element-ui年份范围选择器,年日期插件,可选日期区间等

    可以禁止选择未来日期,以及可选的日期范围控制,代码在最下面。 直接上代码: 先来一个不禁止选择的示例 yearDate.js文件 我是禁止了未来日期,时间跨度,只能选3年, 代码如下: 参考地址:https://www.jianshu.com/p/44584a4a4953

    2024年02月11日
    浏览(52)
  • 搭建vue3项目+按需引入element-ui框架组件

    场景 :使用vue create脚手架快速搭建vue的项目 前提 :需要安装node.js和cnpm以及yarn 并且cnpm需要设置为淘宝镜像,cnpm和yarn安装教程网上很多可以自行搜索 查看安装的版本(显示版本号说明安装成功) 1.cmd窗口跳到需要新建项目的文件夹下,使用vue create 2.我这里选择第三个Ma

    2024年02月16日
    浏览(64)
  • 【Vue框架】Vue2中element-ui/mint-ui组件库——element-ui引入组件以及使用案例、mint-ui引入组件及使用案例

    element-ui 提供了大量的组件,如:布局组件、表单组件、JS组件等等。 Element-ui官网: https://element.eleme.cn/#/zh-CN 安装 Element-ui: npm i element-ui -S 1.1.1 引入组件 引入 Element 完整引入(在 main.js 中写入以下内容): 按需引入 借助 babel-plugin-component,我们可以只引入需要的组件,以达到

    2024年02月07日
    浏览(56)
  • VueJs+chrome-extension+element-ui天气预报的小插件

    这里通过chrome-extension + VueJs + element-ui来实现个天气预报的小插件,如下图: 1.1 创建项目         通过vue-cli脚手架3.0版本来创建项目,命令如下: 默认选择是vue2.0语法 Successfully代表安装成功。 这里不是做web项目,所以删除vue-cli3脚手架的部分文件,删除文件如下: src/m

    2024年02月04日
    浏览(46)
  • Vue3 + Element-UI 搭建一个后台管理系统框架模板

    本文将介绍如何基于Vue3和element-ui搭建一个后台管理系统框架模板。我们将详细讲解代码流程,并提供详细的说明。 Vue3 Element-ui Axios 本文假设读者已经熟悉Vue3和Element-ui的基本使用方法,并且对Axios有一定的了解。 步骤1:创建Vue3项目 我们可以使用Vue CLI来创建一个Vue3项目,

    2023年04月26日
    浏览(122)
  • vue3 + vite + ts + element-ui搭建后台管理框架

    vue3官网 vue3官网 vite vite官网连接 npm 安装 按照提示输出即可! vite 中使用 less 或 scss 安装后在style 中设置对应的 scss 或 less,推荐scss编译 安装less依赖 安装sass依赖 推荐使用插件,vite.config.js配置; unplugin-vue-components // 自动导入vue中hook reactive ref等AIP; unplugin-auto-import // 自动

    2024年02月15日
    浏览(62)
  • 基于Vue+Element-Ui开发的月日组件,可以选择月份和天数小插件(新版本)

    最近有粉丝在使用的过程中发现不能满足自己项目上的需求,评论说不支持 placeholder 以及更改输入框大小 size ,所以又赶紧更新了一个版本,之前是1.0.7,现在新版本为1.1.0,点击查看之前的老版本 本组件是基于Vue和Element-ui,因Element官方组件库没有可以选择月份和天数的组

    2023年04月19日
    浏览(76)
  • [ element-ui:table ] 设置table中某些行数据禁止被选中,通过selectable 定义方法解决

    业务需求:需要做到table表格中某些行数据不能被选中,比如在审核一些记录数据时,已经被审核的数据就不能再次提交审核,特别是批量多选的情况,列表中既有已经审核的,也有未审核的,只要求选中未审核的记录即可(当然也可以提前把已经审核的数据过滤掉)。 做到

    2024年02月05日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包