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 = 620const height = 410canvas.width = widthcanvas.height = heightctx.drawImage(img, 0, 0, width, height)// 获取新的 data URLconst 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 = 900const height = 200canvas.width = widthcanvas.height = heightctx.drawImage(img, 0, 0, width, height)// 获取新的 data URLconst 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>