1 public下面新建word文檔,填入Hi???{nickName},nickName是字段名稱,在需要導出word文檔的界面定義
obj:{
nickName:"師太"
}
2 安裝命令
npm?install?docxtemplater?pizzip
npm?install?jszip-utils?--save
npm?install?jszip?--save
npm?install?file-saver?--save
3 在需要導出word文檔的頁面引入
import?Docxtemplater?from?'docxtemplater';
import?{?saveAs?}?from?'file-saver';
import?JSZip?from?'jszip';
import?JSZipUtils?from?'jszip-utils';
4 編寫點擊事件
let _this = this;
//1.docx,要和自己定義的文檔名稱保持一致
JSZipUtils.getBinaryContent('1.docx', function(error, content) {
// input.docx是模板。我們在導出的時候,會根據此模板來導出對應的數據
// 拋出異常
if (error) {
throw error;
}
// 創建一個JSZip實例,內容為模板的內容
let zip = new JSZip(content);
// 創建并加載docxtemplater實例對象
let doc = new Docxtemplater();
doc.loadZip(zip);
// 設置模板變量的值
doc.setData({..._this.obj,});
// 用模板變量的值替換所有模板變量
try {doc.render()} catch (error) {
// 拋出異常
let e =?
{message: error.message,name: error.name,stack: error.stack,properties: error.properties};
throw error}
// 生成一個代表docxtemplater對象的zip文件(不是一個真實的文件,而是在內存中的表示)
let out = doc.getZip().generate({
type: 'blob',
mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
});
// 將目標文件對象保存為目標類型的文件,并命名
saveAs(out, _this.obj.nickName + '的簡介.docx');
});