div如何转为img

最新推荐文章于 2024-05-15 14:50:43 发布

kwanchao_CSDn

最新推荐文章于 2024-05-15 14:50:43 发布

阅读量1.6k

点赞数 1

文章标签： js html css javascript canvas

本文链接：https://blog.csdn.net/qq_29944927/article/details/105436235

版权

在项目中，有时候可能我们要将前端的div样式转化为PDF格式，例如在下载准考证的时候，当我们查询到准考证信息的时候，需要将准考证信息进行下载打印，此时，相当于是将前端的div样式转化为了PDF格式，也就是一张img，那么我们该如何实现该种功能呢?
接下来我们来介绍实现该种功能的一张方法, 同时可以实现图片规格大小的调整(通过鼠标的滑轮进行调节):

实现的效果（保存之前为普通的div样式）:

在这里插入图片描述
保存之后(变成img格式，可以调节大小)

实现的代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>div to img demo</title>
	<style type="text/css">
		.content{
   
			display: block;

			position: relative;

			width: 300px;
			height: 300px;

			background-color: #E6B246
		}
		table{
   
			border:1px solid #F00
		}
		table td {
   
			border:1px solid #F00
		}
		 .test {
   
            width: 900px;
            height: 500px;
            text-align: center;
            line-height: 100px;
            background-color: #87CEEB;
            display: inline-block;
            vertical-align: top;
			margin:0 auto;

        }

		
		body{
    text-align:center} 

	</style>
</head>
<body>
	<div id

最低0.47元/天解锁文章

kwanchao_CSDn

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div如何转为img

在项目中，有时候可能我们要将前端的div样式转化为PDF格式，例如在下载准考证的时候，当我们查询到准考证信息的时候，需要将准考证信息进行下载打印，此时，相当于是将前端的div样式转化为了PDF格式，也就是一张img，那么我们该如何实现该种功能呢?接下来我们来介绍实现该种功能的一张方法, 同时可以实现图片规格大小的调整(通过鼠标的滑轮进行调节):实现的效果（保存之前为普通的div样式）:保存...
复制链接

扫一扫