使用工具：html-docx
優(yōu)勢：圖片、圖表能直接預覽并轉為base64導出，省去后端難以實現(xiàn)圖表的生成后插入的麻煩
劣勢：適合一些簡單的word模板導出（比如只有標題正文簡單的表格圖表圖片的文檔），復雜的可以直接忽略。比如：紙張大小、紙張方向、css大部分樣式等等（經(jīng)本人試驗導出無法生成，如有大佬可以配置實現(xiàn)歡迎指正）
下載引入
npm install html-docx-js
npm install file-saver
// 引入
import htmlDocx from 'html-docx-js/dist/html-docx'
import saveAs from 'file-saver'
在創(chuàng)建的盒子內(nèi)完成html代碼
<div class="export-box">
<!-- html -->
</div>
<button @click="gohtml">生成word</button>
生成word導出參考https://blog.csdn.net/Liuer_Qin/article/details/124799876文章來源：http://www.zghlxwxcb.cn/news/detail-562420.html
gohtml() {
const app = document.querySelector('.export-box')
const cloneApp = app.cloneNode(true)
const canvases = app.getElementsByTagName('canvas')
const cloneCanvases = cloneApp.getElementsByTagName('canvas')
const promises = Array.from(canvases).map((ca, index) => {
return new Promise((res) => {
const url = ca.toDataURL('image/png', 1)
const img = new Image()
img.onload = () => {
URL.revokeObjectURL(url)
res()
}
img.src = url
// 生成img插入clone的dom的canvas之前
cloneCanvases[index].parentNode.insertBefore(img, cloneCanvases[index])
})
})
// 移除原來的canvas
const cloneCanvas = cloneApp.getElementsByTagName('canvas')
Array.from(cloneCanvas).forEach((ca) => ca.parentNode.removeChild(ca))
Promise.all(promises).then(() => {
this.convertImagesToBase64(cloneApp)
// console.log(document.head.outerHTML)
const converted = htmlDocx.asBlob(`
<html xmlns:o=\'urn:schemas-microsoft-com:office:office\' xmlns:w=\'urn:schemas-microsoft-com:office:word\' xmlns=\'http://www.w3.org/TR/REC-html40\'><head><style>
${document.head.outerHTML}
</head>
<body>
${cloneApp.outerHTML}
</body>
</html>`)
saveAs(converted, 'test.docx')
})
},
convertImagesToBase64(cloneApp) {
var regularImages = cloneApp.getElementsByTagName('img')
var canvas = document.createElement('canvas')
var ctx = canvas.getContext('2d')
regularImages.forEach((item) => {
canvas.width = item.width
canvas.height = item.height
ctx.drawImage(item, 0, 0, item.width, item.height)
var ext = item.src.substring(item.src.lastIndexOf('.') + 1).toLowerCase()
var dataURL = canvas.toDataURL('image/' + ext)
item.setAttribute('src', dataURL)
})
canvas.remove()
}
頁面及導出效果
最后補充一下，項目本準備開始采用這種方案來實現(xiàn)的，但是功能還是有些欠缺了，尤其紙張大小和橫版顯示，不得不放棄了這種方式。因為圖表的問題，最后是前端先請求數(shù)據(jù)再頁面隱藏位置生成圖表，按base64或者文件傳送的方式傳給后端，仍然由后端生成word返回文件流進行導出。
綜上，如何模板內(nèi)容格式簡單，要求低，純前端來實現(xiàn)這種預覽導出還是可行的，要求高的話還是后端去做吧。文章來源地址http://www.zghlxwxcb.cn/news/detail-562420.html
到了這里，關于前端html-docx實現(xiàn)html轉word，預覽并導出文件的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
