npm i docxtemplater     是一個用于基于模板生成動態(tài) `.docx` 文檔的 JavaScript 庫。它允許你將動態(tài)數(shù)據(jù)填充到 `.docx` 模板文件中

npm i jszip-utils       用于在瀏覽器中處理 ZIP 文件的工具庫

npm file-saver          是一個用于在瀏覽器中保存文件的 JavaScript 庫

//引入工具
import PizZip from 'pizzip';
import Docxtemplater from 'docxtemplater';
import JSZipUtils from 'jszip-utils';
import { saveAs } from 'file-saver';

// 加載 .docx 模板文件
function loadFile(url, callback) {
    JSZipUtils.getBinaryContent(url, callback);
}

// 下載生成的文檔
export function download(file, name) {
    saveAs(file, name);
}

// 生成并下載 Word 文檔(templatePath是word文檔模版地址,data是對應(yīng)的數(shù)據(jù))
export function generateWordDocument(templatePath, data) {
    return new Promise((resolve, reject) => {
        loadFile(templatePath, function (error, content) {
            if (error) {
                reject(new Error(`Error loading template file: ${error.message}`));
                return;
            }

            try {
                // 加載模板文件內(nèi)容到 PizZip
                const zip = new PizZip(content);
                const doc = new Docxtemplater(zip, {
                    paragraphLoop: true,
                    linebreaks: true,
                });

                // 設(shè)置模板中的占位符數(shù)據(jù)
                doc.setData(data);

                // 渲染文檔
                doc.render();

                // 生成最終的文檔 Blob
                const fileWord = doc.getZip().generate({
                    type: 'blob',
                    mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
                });

                // 返回生成的文檔 Blob
                resolve(fileWord);
            } catch (error) {
                console.error('Error rendering document:', error);
                reject(new Error(`Error rendering document: ${error.message}`));
            }
        });
    });
}

<template>
   <div>
    <button @click="startGeneration">生成文檔</button> <button @click="downloadWord" :disabled="!generatedFile">下載文檔</button> 
   </div>
 </template>
 
<script setup>
import { ref } from 'vue';
import { generateWordDocument, download } from '../utils/wordGenerate.js';

const generatedFile = ref(null);
// 模板文件的路徑，一般放在 public 目錄中
const templatePath = '/template.docx'; 
const data = { name: '測試', date: '2024-09-23' };
const startGeneration = async () => { 
try {
    generatedFile.value = await generateWordDocument(templatePath, data); 
    console.log('文檔生成成功');
} catch (error){
    console.error('Error generating document:', error);
  }
};
//文檔下載
const downloadWord = () => {
if (generatedFile.value) {
download(generatedFile.value, 'generated-document.docx');
} else {
console.error('No file generated');
}};
</script>