使用html2canvas将html转成图片

202 阅读1分钟
<div class="recite_table">
    <div class="recite_item">
        <div class="recite_title">艺术考级作品背书表</div>
        <div class="recite_box">
            <div class="recite_line">
                <div class="recite_left border_left_none">姓名</div>
                <div class="recite_right">姓名</div>
                <div class="recite_left">考试地点</div>
                <div class="recite_right">考试地点</div>
            </div>
            <div class="recite_line border_top">
                <div class="recite_left border_left_none">申报专业</div>
                <div class="recite_right">申报专业</div>
                <div class="recite_left">申报级别</div>
                <div class="recite_right">申报级别</div>
            </div>
        </div>
    </div>
</div>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script>
    function exportData() {
        html2canvas(document.querySelector(".recite_table"), {
            scale: 3, // 提高像素比
            backgroundColor: null, // 设置背景颜色
        }).then((canvas) => {
            const link = document.createElement('a')
            link.setAttribute('download', '')
            link.setAttribute('href', canvas.toDataURL("image/png"))
            link.click()
        })
    }
</script>