[DOCX]範例1-5

 

公司的使用者手冊總是喜歡用word來編輯，但word真的很容易弄出沒有模組化（統一樣式）的文件
但用markdown或html轉成docx，又容易出現樣式跑掉的狀況，
於是萌生我想要好好來研究docx這個套件的念頭

安裝

1. 要先有node.js環境
2. 要安裝global的typescript（官方文件有用到）

npm i typescript -g

3. 在你想要當工作環境的資料夾下 npm init，產生package.json
4. 下tsc --init，產生tsconfig.json
5. 安裝套件，npm i docx fs -S
6. 增加一個index.ts檔案
7. 把你想參考的官網範例檔貼上去
https://github.com/dolanmiu/docx/tree/master/demo
8. 把ts編譯成js，先去package.json加指令

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "tsc --project ./"
  },

9. 下指令，npm run build，產生index.js 10. 執行docx編譯作業，node index.js

範例1: 文字

https://github.com/dolanmiu/docx/blob/master/demo/1-basic.ts
1. 可以再加一個指令，加速編譯流程：
"generate": "npm run build && node index.js"
2. 記得ts裡的../build要改成docx
3. npm run generate

4. 可回推出
4-1. bold屬性
4-2. \t是空格

範例2: 項目符號

https://github.com/dolanmiu/docx/blob/master/demo/2-declaritive-styles.ts

1. 除了section外，還有styles跟numbering屬性

styles

2. style定義了兩種樣式default / paragraphStyles
3. default定義了heading1 / heading2 / listParagraph樣式
4. 樣式有run(文字)與paragraph(段落)屬性
5. spacing after 120應該是與後段距離6點
6. underline的type屬性可以用UnderlineType.DOUBLE（兩條底線）
7. spacing before 240應該是與後段距離12點
8. paragraphStyles裡面是一個array
9. indent是縮排，left: convertInchesToTwip(0.5)是左1.27公分
10. spacing line 276是行距多行1.15行高
11. 加一個Well Spaced是去定義一個新的樣式叫Well Spaced
12. quickFormat: true可能是可以快速找到這個樣式
13. line: 276, before: 20 * 72 * 0.1, after: 20 * 72 * 0.05換算過後是
與前段距離7.2點 / 後段距離3.6點 / 多行行高1.15

numbering

14. numbering是指項目符號的樣式
15. config是個object-array形式
16. reference可以被sections中元素參照
17. levels是個object-array形式，去定義所有level
18. format可引用LevelFormat.LOWER_LETTER
19. alignment可引用AlignmentType.LEFT
20. text: "%1)"是模板樣式

sections

21. heading: HeadingLevel.HEADING_1 定義你的文字是標題1
22. numbering引用之前定義的項目符號樣式
23. style引用之前定義的style
24. TextRun的font name定義字型
25. emphasisMark會讓文字上方出現....

範例3: 自訂項目符號

https://github.com/dolanmiu/docx/blob/master/demo/3-numbering-and-bullet-points.ts

項目符號的hanging

1. numbering > config > levels > style > paragraph > indent > hanging
2. hanging: convertInchesToTwip(0.18)是凸排0.46 公分

項目符號的format

1. numbering > config > levels > format > LevelFormat.BULLET
2. 自訂項目符號的圖案
3. text: "\u1F60"圖案是Greek Small Letter Omega with Psili，可以去網站找: https://unicode-table.com/en/search/?q=1F60

範例4: 表格

https://github.com/dolanmiu/docx/blob/master/demo/4-basic-table.ts

new 一個表格

1. sections > children > new Table
2. columnWidths: 輸入欄寬array
3. rows接一個TableRow組成的array
4. TableRow的width屬性有size(欄寬)，type: WidthType.DXA(Value is in twentieths of a point)
5. 3505是慣用寬度6.18 公分
6. children接段落元素

範例5: 圖片

https://github.com/dolanmiu/docx/blob/master/demo/5-images.ts

new 一個ImageRun

1. sections > children > Paragraph > children > new ImageRun
2. data: fs.readFileSync("./demo/images/image1.jpeg")
3. transformation放入width / height
4. TableRow的width屬性有size(欄寬)，type: WidthType.DXA(Value is in twentieths of a point)
5. flip > vertical > true是垂直翻轉
6. flip > horizontal > true是水平翻轉
7. rotation是旋轉
8. float是文字在後
9. zIndex是他在哪一層
10. horizontalPosition > offset是水平絕對位置(1014400是2.82 公分)
11. verticalPosition > offset是水平絕對位置(1014400是2.82 公分)
12. horizontalPosition > relative > HorizontalPositionRelativeFrom.PAGE是水平靠右對齊，並相對於頁

範例6: 自訂邊界

https://github.com/dolanmiu/docx/blob/master/demo/6-page-borders.ts

properties屬性

1. sections > properties > page > margin
2. 版面配置，自訂邊界，上下左右都0(top/right/bottom/left)

範例7: 方向橫向

https://github.com/dolanmiu/docx/blob/master/demo/7-landscape.ts

properties屬性

1. sections > properties > page > size
2. orientation: PageOrientation.LANDSCAPE (紙張橫放)

範例8: 頁首與頁尾

https://github.com/dolanmiu/docx/blob/master/demo/8-header-footer.ts

sections屬性

1. sections > headers > default
2. new Header > children > []
3. sections > footers > default
5. new Footer > children > []

範例9: 頁首與頁尾加圖片

https://github.com/dolanmiu/docx/blob/master/demo/10-my-cv.ts

sections屬性

1. sections > headers > default
2. new Header > children > []
3. new Paragraph > children > new ImageRun > data / transformation(大小)
4. sections > footers > default
5. new Paragraph > children > new ImageRun > data / transformation(大小)

範例10: 履歷表

https://github.com/dolanmiu/docx/blob/master/demo/10-my-cv.ts

定義型別

1. Experience（是否現職/摘要/職稱/開始時間/結束時間/公司名）
2. Education（學位/領域/備註/學校名/開始時間/結束時間）
3. Skill（技能名稱）
4. Achivement（達成項目/達成項目名稱）
5. 根據以上型別定義四個array(experiences/education/skills/achievements)
6. 定義類別DocumentCreator
7. 類別方法create > new Document (去call其他method的進入點)
8. 類別方法createContactInfo (建立文字mobile/linkedin/email)
9. 類別方法createHeading (建立標題1)
10. 類別方法createSubHeading (建立標題2)
11. 類別方法createInstitutionHeader (建立機構的開頭)
12. tabStops > type: TabStopType.RIGHT(結束位置在最右邊) / position: TabStopPosition.MAX (整頁寬度)
13. 類別方法createRoleText (建立斜體的職稱標題)
14. 類別方法createSkillList (用逗號隔開所有的技能)
15. 類別方法createAchivementsList (用沒有編號的list item，bullet，來陳列成就)
16. 類別方法createInterests (直接放入興趣字串)
17. 類別方法splitParagraphIntoBullets (把教育程度的note用\n\n(換行符號)切開成array)
18. 類別方法createPositionDateText (把開始與結束時間用成字串)

範例11: 定義global的樣式

https://github.com/dolanmiu/docx/blob/master/demo/12-scaling-images.ts

ImageRun

1. transformation（圖片大小）