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>

相关文章:
vue3使用html2canvas
安装 yarn add html2canvas 代码 <template><div class"container" ref"container"><div class"left"><img :src"logo" alt"" class"logo"><h2>Contractors pass/承包商通行证&l…...
OpenCV分水岭算法watershed函数的使用
操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 描述 我们将学会使用基于标记的分水岭算法来进行图像分割。我们将看到:watershed()函数的用法。 任何灰度图像都可以被视为一个地形表…...
laravel为Model设置全局作用域
如果一个项目中存在这么一个sql条件在任何情况下或大多数情况都会被使用,同时很容易被开发者遗忘,那么就非常适用于今天要提到的这个功能,Eloquent\Model的全局作用域。 首先看一个示例,有个数据表,结构如下࿱…...
Leetcode之string
目录 前言1. 字符串相加2. 仅仅反转字母3. 字符串中的第一个唯一字符4. 字符串最后一个单词的长度5. 验证回文串6. 反转字符串Ⅱ7. 反转字符串的单词Ⅲ8. 字符串相乘9. 打印日期 前言 本篇整理了一些关于string类题目的练习, 希望能够学以巩固. 博客主页: 酷酷学!!! 点击关注…...
OS:处理机进程调度
1.BackGround:为什么要进行进程调度? 在多进程环境下,内存中存在着多个进程,其数目往往多于处理机核心数目。这就要求系统可以按照某种算法,动态的将处理机CPU资源分配给处于就绪状态的进程。调度算法的实质其实是一种…...
【车辆轨迹处理】python实现轨迹点的聚类(一)——DBSCAN算法
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、单辆车轨迹的聚类与分析1.引入库2.聚类3.聚类评价 二、整个数据集多辆车聚类1.聚类2.整体评价 前言 空间聚类是基于一定的相似性度量对空间大数据集进行分组…...
Apache Kylin
Apache Kylin 是一个开源的分布式分析引擎,提供 SQL 查询接口及多维分析(OLAP)能力以支持超大规模数据集。它能在亚秒级的时间内提供 PB 级数据的查询能力,非常适合大数据分析和报表系统。 ### 入门指南 #### 1. 环境准备 首先…...
为何Vue3比Vue2快
Proxy响应式 PatchFlag 编译模板时,动态节点做标记标记,分为不同的类型,如TEXT PROPSdiff算法时,可以区分静态节点,以及不同类型的动态节点 <div>Hello World</div> <span>{{ msg }}</span>…...
人工智能与社交变革:探索Facebook如何领导智能化社交平台
在过去十年中,人工智能(AI)技术迅猛发展,彻底改变了我们与数字世界互动的方式。Facebook作为全球最大的社交媒体平台之一,充分利用AI技术,不断推动社交平台的智能化,提升用户体验。本文将深入探…...
八股文之java基础
jdk9中对字符串进行了一个什么优化? jdk9之前 字符串的拼接通常都是使用进行拼接 但是的实现我们是基于stringbuilder进行的 这个过程通常比较低效 包含了创建stringbuilder对象 通过append方法去将stringbuilder对象进行拼接 最后使用tostring方法去转换成最终的…...
深度挖掘行情接口:股票市场中的关键金融数据API接口解析
在股票市场里,存在若干常见的股票行情数据接口,每一种接口皆具备独特的功能与用途。以下为一些常见的金融数据 API 接口,其涵盖了广泛的金融数据内容,其中就包含股票行情数据: 实时行情接口 实时行情接口:…...
逆向破解 对汇编的 简单思考
逆向破解汇编非常之简单 只是一些反逆向技术非常让人难受 但网络里都有方法破解 申请变量 : int a 0; 00007FF645D617FB mov dword ptr [a],0 char b b; 00007FF645D61802 mov byte ptr [b],62h double c 0.345; 00007FF645D61…...
搜维尔科技:人机交互学术应用概览
人机交互学术应用概览 搜维尔科技:人机交互学术应用概览...
植物遗传转化相关介绍【卡梅德生物】
植物的遗传转化是指以植物器官、组织、细胞或原生质体作为受体,应用重组DNA技术,将外源基因导入植物基因组,以获得转基因植物的技术。目前应用最普遍的植物基因的遗传转化方法主要有农杆菌介导法和DNA直接转入法。 一.植物遗传转化…...
0711springNews新闻系统管理 实现多级评论
0611springmvc新闻系统管理-CSDN博客 0711springNews新闻系统管理项目包 实现多级评论-CSDN博客 数据库字段 需要添加父节点id,通过该字段实现父评论和子评论的关联关系。 对象属性 实现链表,通过一个父评论可以找到它对应的所有子孙评论。 业务层 实现…...
如何在Ubuntu上安装并启动SSH服务(Windows连接)
在日常的开发和管理工作中,通过SSH(Secure Shell)连接到远程服务器是一个非常常见的需求。如果你在尝试通过SSH连接到你的Ubuntu系统时遇到了问题,可能是因为SSH服务未安装或未正确配置。本文将介绍如何在Ubuntu上安装并启动SSH服…...
docker build时的网络问题
docker build时无法yum安装包,因为无法访问外网,无法ping通外网。 解决办法: systemctl stop NetworkManager.service firewall-cmd --permanent --zonetrusted --change-interfacedocker0 systemctl start NetworkManager.service systemct…...
Vue的安全性:防范XSS攻击与安全最佳实践
引言 随着Web应用的普及,前端安全问题日益受到重视。Vue作为当下流行的前端框架,其安全性也成为开发者关注的焦点。跨站脚本攻击(XSS)是常见的Web安全漏洞之一,本文将讨论如何在使用Vue时防范XSS攻击,并分享其他Vue中的安全最佳实践。 什么是XSS攻击? XSS攻击是一种将…...
ARM架构(一)—— ARMV8V9基础概念
目录 1.ARMCore的时间线2.ARM术语小结2.1 A64和arrch642.2ARM架构现在的5个系列2.3 微架构2.4 PE2.5 Banked2.6 ARM文档术语2.7 IMPLEMENTATION DEFINFD 和 DEPRECATED2.8 EL1t和EL1h 3 ARMv7的软件架构4 安全状态切换模型4.1 Secure state和Non-secure state介绍 5 Interproce…...
如何使用Python进行数据分析
Python是一种广泛应用于数据科学和机器学习领域的编程语言。本文将介绍如何使用Python进行数据分析,包括Python在数据分析中的应用场景、常用库和工具,以及实际案例分析。 一、Python在数据分析中的应用场景 数据清洗:处理缺失值、异常值&a…...
AI-调查研究-01-正念冥想有用吗?对健康的影响及科学指南
点一下关注吧!!!非常感谢!!持续更新!!! 🚀 AI篇持续更新中!(长期更新) 目前2025年06月05日更新到: AI炼丹日志-28 - Aud…...
Java 语言特性(面试系列1)
一、面向对象编程 1. 封装(Encapsulation) 定义:将数据(属性)和操作数据的方法绑定在一起,通过访问控制符(private、protected、public)隐藏内部实现细节。示例: public …...
树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频
使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源: http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...
VB.net复制Ntag213卡写入UID
本示例使用的发卡器:https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...
【Linux】C语言执行shell指令
在C语言中执行Shell指令 在C语言中,有几种方法可以执行Shell指令: 1. 使用system()函数 这是最简单的方法,包含在stdlib.h头文件中: #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...
postgresql|数据库|只读用户的创建和删除(备忘)
CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...
屋顶变身“发电站” ,中天合创屋面分布式光伏发电项目顺利并网!
5月28日,中天合创屋面分布式光伏发电项目顺利并网发电,该项目位于内蒙古自治区鄂尔多斯市乌审旗,项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站,总装机容量为9.96MWp。 项目投运后,每年可节约标煤3670…...
镜像里切换为普通用户
如果你登录远程虚拟机默认就是 root 用户,但你不希望用 root 权限运行 ns-3(这是对的,ns3 工具会拒绝 root),你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案:创建非 roo…...
C++ 求圆面积的程序(Program to find area of a circle)
给定半径r,求圆的面积。圆的面积应精确到小数点后5位。 例子: 输入:r 5 输出:78.53982 解释:由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982,因为我们只保留小数点后 5 位数字。 输…...
数据库分批入库
今天在工作中,遇到一个问题,就是分批查询的时候,由于批次过大导致出现了一些问题,一下是问题描述和解决方案: 示例: // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...
