html2canvas截图上传至后端并下载文件

最新推荐文章于 2023-11-21 14:19:52 发布

逆袭的小学生

最新推荐文章于 2023-11-21 14:19:52 发布

阅读量1.4k

点赞数

分类专栏： java-web 文章标签： html2canvas base64编码图片上传下载

本文链接：https://blog.youkuaiyun.com/q610376681/article/details/111638570

版权

本文介绍了一个前端利用html2canvas截图并上传至后端，后端结合图片和其他数据生成PDF并下载的解决方案。前端通过模拟表单提交实现图片上传，后端接收base64编码的图片，解码并保存为文件，最终整合生成PDF供用户下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：

主要是来源于一个需求，我需要将页面生成pdf然后下载，鉴于此页面的特殊性，最后决定的方案是我对后端难以生成的部分进行html截图上传到后端，然后后端将图片以及一些其它的部分根据itext生成pdf，然后返回给我。页面的实现效果是我点击按钮，然后pdf被下载。

参考：

第一章在前端截图下载

值得注意的是html2canvas要用document.querySelector()来获取元素，如果使用$("#xxx")或者document.getElementById()我这里会提示Element is not attached to a Document（后面再次测试时发现只是$("#xxx")不行，document.getElementById()又可以了）

function downloadStudentData(){
	console.log("下载学生数据")
	//打印雷达图
	html2canvas(document.querySelector("#screenDiv"),{
		width: 1000,
		height:1000,
	}).then(canvas => {
	    document.body.appendChild(canvas)
	    var dataUrl = canvas.toDataURL("image/png");
		console.log(dataUrl);
		let aLink = document.createElement('a');
        //取出图片中的base64数据
		var bstr = atob(dataUrl.split(',')[1]