Introduction
以前匯出 word 檔案，都是從後端進行；這次試試看從前端進行。
Conetent
docxtemplater 這套件的流程簡單描述是採用一個 word 檔案當作 template 樣板，透過 ajax 傳送至前端，然後按照對應的 object key value 去填入資料。聽起來很簡易，但是裡面應用的東西不少；安裝方式可以透過 npm 或 bower 或是手動引入檔案。
使用 npm 安裝
使用 npm 的話，我在重新 compile 的時候，發生錯誤；所以我是直接抓取 Github 上的檔案，然後 jszip 只能使用 2.x 版本。
1
2
| npm install docxtemplater --save-dev
npm install jszip@2 --save-dev
|
使用 bower 安裝
bower 安裝執行，倒是沒有發生其他錯誤，只是 bower 安裝的只有 docxtemplater build 與 jszip，所以還需要去 docxtemplater 抓取 jszip-utils.js 與 jszip-utils-ie.js (不同瀏覽器的使用)檔案
1
| bower install --save docxtemplater
|
示範程式碼如下，可以在 Github 上取得，其 docxtemplater-latest 引用的版本是 3.0.10 版本。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
| <!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo</title>
</head>
<body>
<input type="button" id="export" value="export word" />
<script type="text/javascript" src="bundle.js"></script>
<script src="/Jss/docxtemplater/docxtemplater-latest.js"></script>
<script src="/Jss/docxtemplater/jszip.min.js"></script>
<script src="/Jss/docxtemplater/vendor/file-saver.min.js"></script>
<script src="/Jss/docxtemplater/vendor/jszip-utils.js"></script>
<script type="text/javascript">
window.onload = function() {
let btnExport = document.getElementById("export");
let loadFile = function(url, callback) {
/// <param name="url">The url path.</param>
/// <param name="callback">The callback.</param>
JSZipUtils.getBinaryContent(url, function(err, data) {
callback(null, data);
});
};
btnExport.addEventListener("click", function() {
loadFile("template.docx", function(err, content) {
let objData = {
"title": "大標題",
"subtitle": "子標題",
"desc": "隨便的內容描述",
"header1":"表格標題",
"header2":"第二列",
"cell1":"你好",
"cell2":"word 文件"
};
let zip = new JSZip(content);
let doc = new Docxtemplater().loadZip(zip)
doc.setData(objData)
doc.render()
let out = doc.getZip().generate({
type: "blob"
})
saveAs(out, "output.docx")
});
});
};
</script>
</body>
</html>
|
最後說明一下 word 檔案的寫法，其格式為直接在 word 檔案寫上 {ObjectProperty} 大括弧裡面寫上 JS 物件的屬性名稱，在前端 setData function 執行時，會去自動對應。
Reference