首页 > 其他分享 >vue使用docxtemplater导出word

vue使用docxtemplater导出word

时间:2024-04-09 16:13:30浏览次数:17  
标签:npm vue word -- jszip install save docxtemplater

安装

    // 安装 docxtemplater
    npm install docxtemplater pizzip  --save
    // 安装 jszip-utils
    npm install jszip-utils --save 
    // 安装 jszip
    npm install jszip --save
    // 安装 FileSaver
    npm install file-saver --save
    // 引入处理图片的插件1
    npm install docxtemplater-image-module-free --save
    // 引入处理图片的插件2
    npm install angular-expressions --save    

  

准备word模板放至项目public文件夹下

常用语法

  • 单个变量使用

  {name}

  • 数组对象循环

  {#list}  {name} {age} {/list}

  • 图片(base64/url)

  {%imgurl}

 

标签:npm,vue,word,--,jszip,install,save,docxtemplater
From: https://www.cnblogs.com/Wei-notes/p/18124201

相关文章

  • Vue2 + Spring Boot的题库管理和在线考试系统
    一个demo从0到1的搭建~使用mybatisplus快速开发springboot项目(一)--初始化-CSDN博客使用mybatisplus快速开发springboot项目(二)--业务实现_如何用mybatis-plus写业务-CSDN博客使用mybatisplus快速开发springboot项目(三)--JWT拦截器-CSDN博客使用mybatisplus快速开发springboot......
  • ubuntu16.04 wordpress建站教程
    四、wordpress搭建完成本地浏览器输入服务器IP地址,跳转至wordpress安装界面在安装界面中输入数据库密码即可完成安装本地机器输入IP地址/wp-admin进入wordpress后台登录成功......
  • vue element 显示 base64格式图片
     <el-imagestyle="width:300px;height:150px":src="url":preview-src-list="srcList"></el-image>this.url='data:image/png;base64,'+row.PAGE_IMG其他格式data:,文本数据data:text/plain,......
  • 基于SpringBoot+Vue大学生租房平台的设计与实现
    基于SpringBoot+Vue大学生租房平台的设计与实现系统介绍基于SpringBoot+Vue大学生租房平台使用Java语言进行编码,使用Mysql创建数据表保存本系统产生的数据。系统可以提供信息显示和相应服务,其管理员管理房东和用户,对房东提交的信息审批信息进行审核,审核房东发布的房源信......
  • vue快速入门(十四)reduce求和
    注释很详细,直接上代码新增内容非嵌套情况求和嵌套情况求和源码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><ti......
  • vue.js 3 初学经验
    Windows11x86_64node:'20.11.1'npm:'10.2.4'[email protected][email protected][email protected]@[email protected] 序章作者是前端开发入门选手,最近在学习Vue3,遇到了不少问题,特整理到本文。如有错漏,还请不吝指正。 教程选择官方文档......
  • vue父组件调用子组件的方法,获取同步(实时)的返回结果
    vue父组件调用子组件的方法,获取同步(实时)的返回结果//父组件<template><Childref="childRef"></template><script>importChildfrom'.Child.vue'components:{Child,}setup(props,ctx){constchildRef=ref()//调用子组件的方法constgetC......
  • 若依RuoYi-Vue代码生成,新建一个增删改查模块
    启动ruoyi-ui,登录前端后台 以cti_faq问答对表为例。首先在mysql数据库中建张cti_faq表CREATETABLE`cti_faq`(`id`int(11)NOTNULLAUTO_INCREMENTCOMMENT'编号',`question`varchar(255)DEFAULTNULLCOMMENT'问题内容',`answer`textCOMMENT'答案......
  • 基于SpringBoot+Vue+uniapp微信小程序的高校教师成果管理小程序的详细设计和实现(源码
    文章目录前言项目运行截图技术框架后端采用SpringBoot框架前端框架Vue可行性分析系统测试系统测试的目的系统功能测试数据库表设计代码参考数据库脚本为什么选择我?获取源码前言......
  • vue3 快速入门系列 —— vue3 路由
    vue3快速入门系列-vue3路由在vue3基础上加入路由。vue3需要使用vue-routerV4,相对于v3,大部分的VueRouterAPI都没有变化。Tip:不了解路由的同学可以看一下笔者之前的文章:vue2路由参考:vue2路由官网、vue3路由官网vue-routerV4在VueRouterAPI从v3(Vue2)到v4......