VUE前端导出WORD的方法

<template>
  <div>
    <button @click="exportToWord">导出Word</button>
  </div>
</template>

<script>
import Docxtemplater from 'docxtemplater';
import PizZip from 'pizzip';
import FileSaver from 'file-saver'; // 用于保存文件

export default {
  methods: {
    exportToWord() {
      // 模拟要填充的数据
      const data = {
        title: 'Vue 导出 Word',
        content: '这是一个简单的示例'
      };

      // 获取Word模板文件（.docx文件）
      const templateFile = 'PUR-OE-RNPL-RCS-model.docx'; // 替换为你自己的模板文件路径

      // 通过ajax或其他方式获取模板文件
      fetch(templateFile)
        .then(response => response.arrayBuffer())
        .then(buffer => {
          const zip = new PizZip(buffer);
          const doc = new Docxtemplater();
          doc.loadZip(zip);
          doc.setData(data); // 将数据传递给模板
          doc.render(); // 渲染文档

          const generatedDoc = doc.getZip().generate({ type: 'blob' });
          FileSaver.saveAs(generatedDoc, 'exported_word.docx'); // 下载生成的Word文档
        })
        .catch(error => {
          console.error('导出失败:', error);
        });
    }
  }
};
</script>

当你点击页面上的按钮时，exportToWord 方法会被触发。这个方法的目标是生成一个 Word 文档并下载它。

1. <button @click="exportToWord">导出Word</button>：这是一个按钮，当被点击时，会调用 exportToWord 方法。
2. import Docxtemplater from 'docxtemplater';：引入了 docxtemplater 库，它是用于操作 Word 文档的工具。
3. import PizZip from 'pizzip';：引入了 pizzip 库，用于处理 ZIP 文件，这对于处理 DOCX 格式的 Word 文件是必要的。
4. import FileSaver from 'file-saver';：引入了 file-saver 库，这是一个用于在浏览器中保存文件的工具。
5. export default { ... }：Vue 组件的定义，包含了一个名为 exportToWord 的方法。
6. exportToWord() 方法：
   • 当按钮被点击时，这个方法会被执行。
   • const data = { ... }：定义了要填充到 Word 文档中的数据。这些数据将被插入到 Word 文档的特定位置。
   • const templateFile = 'PUR-OE-RNPL-RCS-model.docx';：指定了模板文件的路径，这是一个已经存在的 Word 文档文件，作为模板，将在其中填充数据并生成新的文档。
   • fetch(templateFile)：发起了一个网络请求来获取模板文件。
   • .then(response => response.arrayBuffer())：获取网络响应，并将其转换为 ArrayBuffer 格式。arrayBuffer() 用于将响应转换为二进制数据。
   • .then(buffer => { ... })：处理已获取的模板文件数据。buffer 包含了模板文件的二进制数据。
   • const zip = new PizZip(buffer);：使用 PizZip 将二进制数据转换为 ZIP 格式的数据，以便 docxtemplater 库可以处理它。
   • const doc = new Docxtemplater();：创建了一个 docxtemplater 实例。
   • doc.loadZip(zip);：将 ZIP 数据加载到 docxtemplater 中。
   • doc.setData(data);：将之前定义的数据（data）传递给 docxtemplater，用于填充模板中的占位符。
   • doc.render();：渲染文档，将数据填充到模板中。
   • const generatedDoc = doc.getZip().generate({ type: 'blob' });：生成新的 Word 文档，并将其转换为 Blob 格式。
   • FileSaver.saveAs(generatedDoc, 'exported_word.docx');：使用 file-saver 库将 Blob 格式的文档保存为名为 exported_word.docx 的文件，然后开始下载。

这个流程主要包括了获取模板文件、使用 docxtemplater 填充数据并生成新的 Word 文档，最后将新生成的 Word 文档下载到用户的设备中。