vue3 使用docxtemplater 动态生成docx

模版文件docx放到vue工程public下

文件内容

vue文件

html 复制代码
<template>
  <div>
    <button @click="generateDocument">生成Word文档</button>
  </div>
</template>

<script>
import PizZip from 'pizzip';
import Docxtemplater from 'docxtemplater';
import { saveAs } from 'file-saver';
import PizZipUtils from 'pizzip/utils/index.js';

function loadFile(url, callback) {
  PizZipUtils.getBinaryContent(url, callback);
}

export default {
  methods: {
    generateDocument() {
      // 假设你的模板文件位于 public 文件夹下
      const templatePath = '/docx/tepmlate/testtemplate2.docx'; // 替换为你的模板路径
      
      loadFile(templatePath, (error, content) => {
        if (error) throw error;

        const zip = new PizZip(content);
        const doc = new Docxtemplater(zip, {
          paragraphLoop: true,
          linebreaks: true,
        });

        // 渲染文档,替换占位符
        doc.render({
          first_name: 'John'
        });

        // 生成Blob文件
        const blob = doc.getZip().generate({ type: 'blob' });
        // 下载文件
        saveAs(blob, 'output.docx');
      });
    }
  }
}
</script>

相关推荐
m0_6161884914 小时前
el-table的隔行变色不影响row-class-name的背景色
前端·javascript·vue.js
zheshiyangyang14 小时前
Vue3组件数据双向绑定
前端·javascript·vue.js
xw515 小时前
uni-app项目支付宝端Input不受控
前端·uni-app·支付宝
大翻哥哥15 小时前
Python上下文管理器进阶指南:不仅仅是with语句
前端·javascript·python
IT_陈寒15 小时前
React 性能优化必杀技:这5个Hook组合让你的应用提速50%!
前端·人工智能·后端
再吃一根胡萝卜15 小时前
Git 强制推送指南:新手必读的「危险操作」解析
前端
诚实可靠王大锤16 小时前
react-native项目通过华为OBS预签名url实现前端直传
前端·react native·华为
Monly2116 小时前
Vue:下拉框多选影响行高
前端·javascript·vue.js
是罐装可乐16 小时前
前端架构知识体系:Source Map 的用法和全面解析
前端·映射·前端架构·代码安全·源码地图·source-map
小桥风满袖16 小时前
极简三分钟ES6 - ES8中对象扩展
前端·javascript