html标签转换成canvas，再进行下载

参考：https://blog.csdn.net/c_kite/article/details/81364592、https://blog.csdn.net/weixin_40800926/article/details/102961502

使用html2canvas

1.下载 html2canvas

npm install html2canvas

2.对应页面引入该插件

import html2canvas from 'html2canvas';

3.具体用法 （要element使用带有一些（可选）选项的 html2canvas 呈现，只需调用html2canvas(element, options);）

html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
})

4.转为图片并且下载

<template>
    <div>
        <div class="container" ref="imageDom">hahahah</div>
        <button @click="toImage">导出</button>
    </div>
</template>
# methods
toImage() {
    html2canvas(this.$refs.imageDom, {
        backgroundColor: '#ffffff'
    }).then(canvas => {
        var imgData = canvas.toDataURL("image/jpeg");
        this.fileDownload(imgData);
    })
},
fileDownload(downloadUrl) {
    let aLink = document.createElement("a");
    aLink.style.display = "none";
    aLink.href = downloadUrl;
    aLink.download = "监控详情.png";
    // 触发点击-然后移除
    document.body.appendChild(aLink);
    aLink.click();
    document.body.removeChild(aLink);
},

使用问题

toDataURL报错

更改需要绘制的html标签部分

页面下载图片不全

需要查看一下html2canvas的配置文件

html2canvas(htmlDom, {
        backgroundColor: '#ffffff',
        logging: false, //日志开关，便于查看html2canvas的内部执行流程
        width: htmlDom.clientWidth, //需要绘制的大小
        height: htmlDom.clientHeight, //需要绘制的大小
        scrollY: 54, // 向下的偏移量
        scrollX: 0,
        useCORS: true // 【重要】开启跨域配置
      }).then(canvas => {
        // document.body.appendChild(canvas)
        var imgData = canvas.toDataURL("image/png");
        this.fileDownload(imgData);
        /* var image = new Image();
        image.crossorigin = 'anonymous'
        image.src = canvas.toDataURL("image/png");
        return image; */
      })

参考文档：https://www.jb51.net/html5/726095.html

table中的合并的td展示不出来

在td中的标签的定位变成绝对定位