具體需求

在我的疫情可視化項目中有一個功能需要導出word文檔，在頁面點擊按鈕後處理數據生成word文件，然後自動下載文檔。

實現步驟

• 多番查詢後發現前端導出word，使用docxtemplater較為方便。具體使用步驟如下：

1. 安裝docxtemplater：npm i docxtemplater
2. 安裝pizzip(使用PizZip實例獲取文件內容)：npm i pizzip
3. 安裝JSZipUtils(主要使用getBinaryContent獲取文件二進位)：npm i JSZipUtils
4. 安裝file-saver(保存文件的插件)：npm i file-saver
5. 創建downloadDoc.js文件，內容如下：

import docxtemplater from 'docxtemplater'
import PizZip from 'pizzip'
import JSZipUtils from 'jszip-utils'
import { saveAs } from 'file-saver'

export function exportWord(tempDocxPath, wordData, fileName) {
    // 讀取並獲得模板文件的二進位內容
    JSZipUtils.getBinaryContent(tempDocxPath, (error, content) => {
        let zip = new PizZip(content);// 創建一個PizZip實例，內容為模板的內容
        // 創建並載入docxtemplater實例對象
        let doc = new docxtemplater();
        doc.loadZip(zip);
        doc.setData(wordData);
        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, fileName);
    });
}

6. exportWord入參為：模板路徑、json數據、文件名。其中模板放在public路徑下。
7. 我的模板如下：
   
8. 我的入參json數據結構如下：
   

原創者：曦12

原文鏈接：https://www.cnblogs.com/xi12/p/16863383.html

轉載請註明原創者添加原文鏈接！