解决html2canvas导出的图片显示不全问题

---

一、问题详情

项目需求是使用html2canvas插件导出表格图片，表格本身由el-table渲染。当包含横纵滚动条时，正常直接导出时图片不全。
原始表格：

导出图片：

---

二、解决方案

• 思路：更改表格的长宽，使内容完整展示不需要滚动条，图片导出完成后再恢复样式。
• HTML代码

  <el-card id="table-card">
  	<el-table ref="table" id="compare-table" ...>
  		...
  	</el-table>
  </el-card>

• js代码

const targetDom = document.getElementById('compare-table')
// 获取原始高度
const originHeight = targetDom.clientHeight
// 获取相关的dom节点
const elTableWrapper = document.getElementsByClassName('el-table__body-wrapper')
const elTableHeader = document.getElementsByClassName('el-table__header')
const elTableBody = document.getElementsByClassName('el-table__body')
const elCardBody = document.getElementsByClassName('el-card__body')
const elCard = document.getElementById('table-card')
// 设置表格高度为头部高度 + el-table__body-wrapper的卷曲高度之和，横向滚动条消失
targetDom.style.height =  (elTableHeader[0].clientHeight + elTableWrapper[0].scrollHeight) + 'px'
// 设置el-card宽度为elCardBody的clientWidth，并将其overflow设为auto，纵向滚动条消失
elCardBody[0].style.width = (elTableBody[0].clientWidth + 40) + 'px'
elCard.style.overflow = 'auto'
// 需要加一个延迟执行，不然dom没更新。
setTimeout(() => {
	html2canvas(targetDom, { scale: 2 }).then(canvas => {
    	const link = document.createElement('a')
        link.download = `方案对比.png`
        link.href = canvas.toDataURL()
        link.click()
        // 将表格的高度恢复
        targetDom.style.height = originHeight + 'px'
        // 将el-card的宽度及overflow恢复
        elCardBody[0].style.width = '100%'
        elCard.style.overflow = 'hidden'  
        this.downloadLoading = false
   })
}, 100)

---

三、总结

• 不算完美的方案，但算解决了问题。
• 不足之处，页面布局有一瞬间的变动，可以加一个全局loading效果优化用户体验。