VUE动态生成word的实现

下面是关于“VUE动态生成word的实现”的完整攻略。

目录

• 前置知识
• 实现过程
• 示例说明
• 总结

前置知识

• Vue.js
• jsFileSaver插件
• docxtemplater插件

实现过程

1. 安装 jsFileSaver 和 docxtemplater 插件。

npm install jsfileSaver docxtemplater --save

1. 通过 docxtemplater 插件来操作 Word 文件，并在 Vue 页面中使用。

<!-- 引入FileSaver.js -->
<script src="./libs/FileSaver.js"></script>
<!-- 引入docxtemplater库和jszip文件 -->
<script src="./libs/jszip.min.js"></script>
<script src="./libs/docxtemplater.js"></script>
<script>
  export default {
    data() {
      return {
        message: 'Hello World!'
      };
    },
    methods: {
      handleGenDocx() {
        // 生成docx模板
        const content = fs.readFileSync(__dirname + '/templates/template.docx', 'binary');
        const zip = new jszip(content);
        const doc = new window.Docxtemplater().loadZip(zip);

        // 设置模板变量值
        doc.setData({
          message: this.message
        });

        // 解析模板至Word文档
        try {
          // 生成 Word 文件
          doc.render();
          const out = doc.getZip().generate({
            type: 'blob',
            mimeType:
              'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
          });

          // 下载 Word 文件
          saveAs(out, 'demo.docx');
        } catch (error) {
          console.log(JSON.stringify({ error: error }));
        }
      }
    }
  };
</script>

示例说明

• 使用docxtemplater将模板填充并生成docx文件。

// 生成docx模板

// 1. 获取Word模板并读取为二进制文件
const content = fs.readFileSync(__dirname + '/templates/template.docx', 'binary');
// 2. 将二进制文件解析为zip文件
const zip = new jszip(content);
// 3. 通过zip文件来创建doc实例
const doc = new window.Docxtemplater().loadZip(zip);
// 4. 设置模板变量值，message为Word模板的变量名
doc.setData({
  message: 'Hello World!'
});
// 5. 解析模板至Word文档
try {
  // render()方法来填充模板
  doc.render();
  // getZip()方法获得转换后的zip包，用来生成docx文件
  const out = doc.getZip().generate({
    type: 'blob',
    mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
  });
} catch (error) {
  console.log(JSON.stringify({ error: error }));
}

• 生成生成好的Word文件并提供下载链接。

// 生成好后的docx文件，通过 FileSaver.js 将数据保存到本地
// out为docxtemplater库生成的blob对象
saveAs(out, 'demo.docx');

总结

通过jsFileSaver和docxtemplater插件，我们可以在Vue页面中动态生成docx文件。其中，docxtemplater插件可以协助我们将Word模板文件解析为js对象来添加变量值，并将填充结果生成Word文件；而jsFileSaver插件则用于保存生成的Word文件。以上示例只是初级实现，读者可以根据需求对其中的代码进行二次封装，以便更好地满足业务需求。