
core code?
// 導出為Word文檔downloadWord({ dom, fileName = "", fileType = "doc", l = {} } = {}) {l.show && l.show();// 獲取HTML內容const content = dom.innerHTML;// 構建Word文檔的HTML結構const html = `<!DOCTYPE html><html><head><meta charset="UTF-8"><title>HTML導出文檔</title><style>body { font-family: Arial, sans-serif; line-height: 1.6; }h1, h2, h3 { color: #2c3e50; }table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }th { background-color: #f2f2f2; }ul, ol { margin-left: 20px; margin-bottom: 15px; }</style></head><body>${content}</body></html>`;// 創建Blob對象const blob = new Blob([html], { type: "application/msword" });// 創建下載鏈接const link = document.createElement("a");link.href = URL.createObjectURL(blob);link.download = `${fileName}.${fileType}`;// 觸發下載document.body.appendChild(link);link.click();document.body.removeChild(link);setTimeout(() => {l.close && l.close();}, 1000);},
demo
<template><div :class="$options.name"><h1>公司季度報告</h1><p style="color: #2c3e50"><strong>2023年第三季度</strong></p><h2>執行摘要</h2><p>本季度公司業績表現強勁,總收入同比增長25%。主要增長點來自新產品線的推出和國際市場的拓展。</p><h2>財務亮點</h2><ul><li>總收入:$1.25億 (同比增長25%)</li><li>凈利潤:$2300萬 (同比增長18%)</li><li>毛利率:42% (同比提高2個百分點)</li></ul><h2>部門表現</h2><table border="1" style="width: 100%; border-collapse: collapse"><tr><th>部門</th><th>收入</th><th>同比增長</th></tr><tr><td>產品開發</td><td>$6500萬</td><td>+32%</td></tr><tr><td>市場銷售</td><td>$4500萬</td><td>+18%</td></tr><tr><td>客戶服務</td><td>$1500萬</td><td>+12%</td></tr></table><el-button type="primary" @click="downloadWord" :loading="loading">下載為Word</el-button></div>
</template>
<script>
export default {name: `downloadWord`,data() {return {loading: false,};},methods: {downloadWord(d) {this.$g.downloadWord({dom: this.$el,l: { show: () => (this.loading = true), close: () => (this.loading = false) },});},},
};
</script>
<style lang="scss" scoped>
.downloadWord {box-sizing: border-box;padding: 20px;line-height: normal;& > * {margin-bottom: 10px;&:last-of-child {margin-right: 0;margin-bottom: 0;}}table {td,th {box-sizing: border-box;border: 1px solid #eee;box-sizing: border-box;padding: 20px;}}
}
</style>