vue3使用html2canvas

安装

yarn add html2canvas

 代码

<template>
    <div class="container" ref="container">
        <div class="left">
            <img :src="logo" alt="" class="logo">
            <h2>Contractor's pass/承包商通行证</h2>
            <div class="row">
                <div class="label">Name</div>
                <div class="content">
                    <div class="title">姓名</div>
                    <div class="value">张三</div>
                </div>
            </div>
            <div class="row">
                <div class="label">Type of work</div>
                <div class="content">
                    <div class="title">职位</div>
                    <div class="value">钳工</div>
                </div>
            </div>
            <div class="row">
                <div class="label">Number</div>
                <div class="content">
                    <div class="title">编号</div>
                    <div class="value">DDJFAS-001</div>
                </div>
            </div>
            <div class="row">
                <div class="label">Unit</div>
                <div class="content">
                    <div class="title">单位</div>
                    <div class="value">大地巨人（广东）岩土工程有限公司大地巨人（广东）岩土工程有限公司</div>
                </div>
            </div>
        </div>
        <div class="right">
            <img :src="avatar" alt="" class="avatar">
            <img :src="rcode" alt="" class="rcode">
        </div>
    </div>


    <table border="1" cellspacing="0" width="900px" ref="table">
        <tr align="center">
            <td colspan="9">出门证</td>
        </tr>
        <tr>
            <td colspan="2">单位名称</td>
            <td colspan="2" style="word-break: break-all;width: 200px;">大地巨人（广东）岩土工程有限公司大地巨人（广东）岩土工程有限公司</td>
            <td colspan="2">出门证编号</td>
            <td colspan="3">DDJFAS-001</td>
        </tr>
        <tr>
            <td colspan="2">出生日期</td>
            <td colspan="2">2023年9月11日</td>
            <td colspan="2">物资进场编号</td>
            <td colspan="3">DDJFAS-001</td>
        </tr>
        <tr>
            <td colspan="2">出门号</td>
            <td colspan="7">
                <input type="checkbox">1号门
                <input type="checkbox">2号门
            </td>
        </tr>
        <tr>
            <td colspan="2">经办人</td>
            <td colspan="2"></td>
            <td colspan="2">经办人电话</td>
            <td colspan="3"></td>
        </tr>
        <tr>
            <td colspan="2">运输公司名称</td>
            <td colspan="7">
            </td>
        </tr>
    </table>
    <div>
        <button @click="getImg(1)">打印通行证</button>
        <button @click="getImg(2)">打印出门证</button>
    </div>
    <img :src="imgResult" alt="">
</template>
<script lang="ts" setup>
import logo from '@/assets/1.png'
import avatar from '@/assets/2.png'
import rcode from '@/assets/3.png'
import html2canvas from "html2canvas";

import { ref } from 'vue'
const container = ref<HTMLElement>()
const table = ref<HTMLElement>()
const imgResult = ref('')
const getImg = async (val: number) => {
    if (val == 1) {
        const canvas = await html2canvas(container.value)
        const imgData = canvas.toDataURL()

        const img = new Image()
        img.onload = function () {
            const canvas = document.createElement('canvas')
            const ctx = canvas.getContext('2d')

            // 设置你想要的宽度和高度
            const width = 620
            const height = 410

            canvas.width = width
            canvas.height = height
            ctx.drawImage(img, 0, 0, width, height)

            // 获取新的 data URL
            const newImgData = canvas.toDataURL()
            imgResult.value = newImgData
        }
        img.src = imgData
    } else {
        const canvas = await html2canvas(table.value)
        const imgData = canvas.toDataURL()

        const img = new Image()
        img.onload = function () {
            const canvas = document.createElement('canvas')
            const ctx = canvas.getContext('2d')

            // 设置你想要的宽度和高度
            const width = 900
            const height = 200

            canvas.width = width
            canvas.height = height
            ctx.drawImage(img, 0, 0, width, height)

            // 获取新的 data URL
            const newImgData = canvas.toDataURL()
            imgResult.value = newImgData
        }
        img.src = imgData

    }

}

</script>
<style scoped>
td {
    padding: 5px;
    text-align: center;
}

.content {
    display: flex;
}

.value {
    flex: 1;
    text-align: center;
}

.row {
    font-weight: bolder;
    width: 370px;
    border-bottom: solid;
}

.label {
    font-size: large;
}

.logo {
    display: inline-block;
    width: 230px;
    height: 50px;
}

.container {
    padding: 20px;
    border: solid;
    width: 620px;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
}

.right {
    position: relative;
}

.avatar {
    position: absolute;
    right: 0;
    top: 0;
    width: 150px;
    height: 200px;
}

.rcode {
    width: 185px;
    height: 120px;
    bottom: 0px;
    right: 0;
    position: absolute;
}
</style>