官方issues下面的解決方法
const style = document.createElement('style');
document.head.appendChild(style);
style.sheet?.insertRule('body > div:last-child img { display: inline-block; }');
html2canvas(element).then(canvas => {
style.remove();
});
融合到自己的代碼中，如下：
exportImage(){
const style = document.createElement('style');
document.head.appendChild(style);
style.sheet?.insertRule('body > div:last-child img { display: inline-block; }');
const loading = this.$loading({
lock: true,
text: '稍等...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0)'
});
const canvasDom = this.$refs.businessCard; //截圖區(qū)域div元素的ref=‘businessCard’
html2canvas(canvasDom, {
dpi: 300, // 解決生產(chǎn)圖片模糊
useCORS: true,
allowTaint: false,
logging: false,
scale: 1,
scrollY: 0,
scrollX: 0,
windowHeight: this.$refs.businessCard.scrollHeight + 150
}).then((canvas) => {
style.remove();
const img = new Image();
img.style.display='block';
img.style.margin='auto';
img.src =canvas.toDataURL('image/png');
const newWin = window.open("", "_blank");
newWin.document.write(img.outerHTML);
loading.close();
}).catch((e) => {
console.log(e)
loading.close();
})
},
