【JavaScript】
1. html2canvas.min.js 下载地址:
/
2. modernizr-2.8.3.min.js 下载 地址：://www.bvbcode.com/cn/l85mxwts-2868363-down
3,jquery.qrcode.js 下载地址： jquery二维码生成插件jquery.qrcode.js
HTML背景图片文字导出生成图片.zip_html图片文字混合排版-互联网文档类资源-CSDN下载1.资源内容：实现HTML（背景图片文字）导出图片并下载，代码简单可以自己修改进行完善自己的需求。html图片文字混合排版更多下载资源、学习资料请访问CSDN下载频道.
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>html2canvas example</title><style>body,div,span{margin: 0;padding: 0;}#view{width: 900px;height: 621px;background:url(image.jpg);background-size: 100%;margin: 0px auto;}.view-fxdmc{height: 173px;text-align: center;line-height: 305px;font-weight: bold;}.view-aqbm-xm{height: 64px;line-height: 86px;}.view-aqbm-xm span{margin-left: 270px;}#qrcode{margin-top: 37px;width: 297px;height: 299px;margin-left: 89px;}.view-orgname{margin-left: 556px;margin-top: -36px;}</style>
<body><div id="view" ><div class="view-fxdmc"><span>溶剂回收储罐</span></div><div class="view-aqbm-xm"><span>安全部门</span><span>李友冰</span></div><div><div id="qrcode"><!-- <img src="qrcode_for_gh_861c8ff444de_430.jpg" id="qrcode" width="200px" height="200px"> --></div><div class="view-orgname"> 徐州易格科技有限公司</div></div></div><a href="#" class="down" onclick="takeScreenshot()">下载</a><a href="#" class="image"download="liyoubing" ></a><!-- <script src=".5.0-beta4/html2canvas.js"></script> --><script src="html2canvas.js"></script><script src="jquery-3.3.1.min.js"></script><script src="modernizr-2.8.3.js"></script><script src="qrcode.min.js"></script></head><script type="text/javascript">//生成图片 下载function takeScreenshot(downloadName) {$("img").css("margin-top","37px");$("img").css("margin-left","89px");html2canvas(document.getElementById('view'), {onrendered: function(canvas) {var url = canvas.toDataURL();//图片地址document.querySelector(".image").setAttribute("download",downloadName);document.querySelector(".image").setAttribute('href', url);$(".image")[0].click();}});}// 设置 qrcode 参数var qrcode = new QRCode('qrcode', {text: '',width: 297,height: 299,colorDark: '#000000',colorLight: '#ffffff',correctLevel: QRCode.CorrectLevel.H});//数据var datalist=[{cname:"溶剂储罐",dptname:"安全部门",uname:"李**",erweima:"qrcode_for_gh_861c8ff444de_430.jpg",orgname:"徐州易格科技有限公司"},{cname:"蒸馏反应釜",dptname:"安全部门1",uname:"李*冰1",erweima:"qrcode_for_gh_861c8ff444de_430.jpg",orgname:"徐州易格科技有限公司1"},{cname:"有机废水处理设施",dptname:"安全部门2",uname:"李*冰2",erweima:"qrcode_for_gh_861c8ff444de_430.jpg",orgname:"徐州易格科技有限公司2"}]for(var i=0;i<datalist.length;i++){$(".view-fxdmc").find("span").text(datalist[i]["cname"]);$(".view-aqbm-xm").find("span:nth-of-type(1)").text(datalist[i]["dptname"]);$(".view-aqbm-xm").find("span:nth-of-type(2)").text(datalist[i]["uname"]);$(".view-orgname").text(datalist[i]["orgname"]);var href=datalist[i]["erweima"];qrcode.clear();qrcode.makeCode(href);var downloadName=datalist[i]["cname"];takeScreenshot(downloadName);}$("img").css("margin-left","0px");</script>
</body></html>2.效果图（根据示例情况 自己修改 维护）