vue动态导出word文档

首先 要npm这四个依赖包

jszip

jszip-utils

docxtemplater

file-saver

个人建议用cnpm ， npm总是会出现莫名其妙的问题

hellowword.vue

<template>
	<div class="hello">
		<!-- 底部按钮容器 -->
		<div class="botmBtnContainer">
			<el-button @click="exportWord" size="small" type="primary">导出word</el-button>
			<!-- <el-button @click="exportExcelClick" size="small" type="primary">导出excel</el-button> -->
		</div>
	</div>
</template>

<script>
	import JSZip from "jszip"
	import JSZipUtils from 'jszip-utils' //JS解析文件
	import docxtemplater from 'docxtemplater';
	import {
		saveAs
	} from 'file-saver';
	export default {
		name: 'HelloWorld',
		props: {
			// msg: String,
			tableData: {},
			form: {}
		},
		created() {
			console.log(this.form)
			console.log(this.tableData)
		},
		methods: {
			// 点击导出word
			exportWord: function() {
				let _this = this;
				// 读取并获得模板文件的二进制内容
				JSZipUtils.getBinaryContent("input.docx", function(error, content) {
					// input.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
					// 抛出异常
					if (error) {
						throw error;
					}
					// 创建一个JSZip实例，内容为模板的内容
					let zip = new JSZip(content);
					// 创建并加载docxtemplater实例对象
					let doc = new docxtemplater().loadZip(zip);
					// 设置模板变量的值
					doc.setData({
						..._this.form,
						table: _this.tableData
					});
					console.log(doc)
					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"
					});
					// 将目标文件对象保存为目标类型的文件，并命名
					saveAs(out, "报价单.docx");
				});
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	h3 {
		margin: 40px 0 0;
	}

	ul {
		list-style-type: none;
		padding: 0;
	}

	li {
		display: inline-block;
		margin: 0 10px;
	}

	a {
		color: #42b983;
	}
</style>

app.vue

<template>
  <div class="threeLevelMain">
    <!-- 报价容器 -->
    <div class="quoteContainer">
      <!-- 设备选取表格 -->
      <div class="quote_table clearfix">
        <el-table
          border
          class="table_domQuote"
          ref="tableDomQuote"
          size="small"
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column prop="number" width="80" label="序号" align="center"></el-table-column>
          <el-table-column label="设备名称" prop="name" align="center"></el-table-column>
          <el-table-column label="数量" prop="num" align="center"></el-table-column>
          <el-table-column prop="salePrice" label="销售单价" align="center"></el-table-column>
          <el-table-column prop="saleTotal" label="销售合计" align="center"></el-table-column>
          <el-table-column label="备注" prop="remark" align="center"></el-table-column>
          <div slot="append">
            <div class="quoteTable">
              <span class="quoteTable_sp1">合计：</span>
              <span class="quoteTable_sp1">{{form.totalPrice}}</span>
            </div>
          </div>
        </el-table>
      </div>
    </div>
    <!-- 审核备注容器 -->
    <div class="reasonBox clearfix">
      <div class="title_checkReason">审核备注：</div>
      <div class="checkReasonMain">
        <div class="p_box">
          <p class="p_checkReason">{{form.checkReason}}</p>
        </div>
      </div>
	  <down-word :form='form' :tableData='tableData'></down-word>
    </div>
    
  </div>
</template>
<script>
	import HelloWorld from './components/HelloWorld.vue'
export default {
	components:{
		'down-word':HelloWorld
	},
  name: "home",
  data() {
    return {
      // 表单对象
      form: {
        
      },
      // 表格信息
      tableData: [
	  ]
    };
  },
  created() {
	  this.form={
		  custName: "aaawdad", // 客户姓名
		  phoneNumber: "138xxxxawdwdxxxx", // 联系方式
		  projectRequirement: "为了更美好的明天而战", // 项目要求
		  totalPrice: 140, // 合计报价
		  remark: "QEWARAEQAAAAAAAAA", // 备注
		  checkReason: '同意' // 审核备注
	  }
    this.tableData = [
      {
        number: 1, // 序号
        name: "设备1", // 设备名称
        num: 1, // 数量
        salePrice: 10, // 销售单价
        saleTotal: 10, // 销售合计
        remark: "啦啦啦" // 备注
      },
      {
        number: 2, // 序号
        name: "设备2", // 设备名称
        num: 2, // 数量
        salePrice: 20, // 销售单价
        saleTotal: 40, // 销售合计
        remark: "啦啦啦" // 备注
      },
      {
        number: 3, // 序号
        name: "设备3", // 设备名称
        num: 3, // 数量
        salePrice: 30, // 销售单价
        saleTotal: 90, // 销售合计
        remark: "啦啦啦" // 备注
      }
    ];
  },
  
};
</script>
<style >


</style>

---

 到这你首先要有个word模板 将自己写好的word模板放到public文件夹下，文件名要和 方法

JSZipUtils.getBinaryContent("input.docx"）名称一致 否则会提示找不到这个文件

jszip的版本过高也会发生问题

The constructor with parameters has been removed in JSZip 3.0, please check...

npm默认安装的版本是3.6.1，如果默认安装  修改package.json文件里的版本号 改成2.6.0即可 重新npm一下就好了  

 

 如果安装不明白  将下述内容粘贴到package.json里的dependencies下 重新cnpm install

    "jszip":"2.6.0",
	"jszip-utils":"^0.1.0",
	"docxtemplater":"^3.25.4",
	"file-saver":"^2.0.5"

在public文件夹下新建input.docx,内容如下图

字段和你的变量一一对应即可 

参考文章作者的代码仓，下载word模板