一、開發問題
html-doc-js，只能處理簡單的富文字匯出為word，對於編輯器中部分圖文和樣式會不生效，而wangEditor預設設定有下圖這麼多，所以要自己嘗試找替代方案去解決html內容。
例如：列表、表情emoji、高度、css樣式、圖片、影片、表格、程式碼塊等。
問題1：css樣式不生效，解決方法：
儘量不用內聯樣式，在匯出word時把css樣式放在head頭部<style></style>中。
css link 連結，先獲取css資源，轉換成文字，然後合併在html style中。（待驗證）
問題2： 遇到加粗、下劃線、背景顏色等不生效，解決方法：
最粗暴的改法：換標籤寫法~
加粗： content.replace(/<strong>/g, '<b>').replace(/<\/strong>/g, '</b>')
背景顏色/下劃線： content.replace(/<mark/g, '<span').replace(/<\/mark>/g, '</span>')
剩餘問題： 要一一驗證~
重點：git倉庫已經不更新，沒有人維護！有問題自己解決或找替代方案！
二、頁面獲取wangeditor內容程式碼
// template
<Wangeditor ref="wangEditor" :editorStyle="{ height: '100%' }" @blur="handleBlur" @change="handleChange" />
<a-button class="box-download" type="link" size="small" @click="fileDownload()">匯出</a-button>
// script
import htmlDocx from 'html-docx-js/dist/html-docx'
import FileSaver from 'file-saver'
handleBlur(content){
this.$refs.wangEditor.handleSetHtml(content);
this.$refs.wangEditor.clear(); // 根據實際情況清空編輯器內容
},
handleChange(content){ // 儲存編輯器內容
this.content = content;
},
fileDownload(){
// 點選匯出word檔案
this.$message.warning('匯出中...') // 提示語
let content=`<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div>
${this.content}
</div>
</body>
</html>`
let converted = htmlDocx.asBlob(content); // 針對普通文字匯出
FileSaver.saveAs(converted, `富文字編輯器內容.docx`);
this.$message.success('匯出成功')
},