使用 html2canvas 将页面中某一部分转为图片下载
今天在项目中遇到一个需求是将生成的二维码和一些背景作为海报,然后将海报以图片的形式下载
使用了 html2canvas 插件
<div class="tc" v-for="(item,index) in qrcodeList" :key="index">
<div :id="item.refname" class="poster " :class="item.bgimg">
<div class="poster-dir">
<div class="poster-title fontSize-3">问卷标题</div>
<img class="qrcode" :src="qrcodeimg" alt="">
<div class="poster-own">问卷工厂提供技术支持</div>
</div>
</div>
<span @click="downLoadCode(item.refname,'问卷海报')" class="konbtn mt10">下载</span>
</div>
这是要执行的 代码片段
downloadFile(data, fileName) {
if (!data) {
return;
}
let url = window.URL.createObjectURL(data);
let link = document.createElement("a");
link.style.display = "none";
link.href = url;
link.setAttribute("download", fileName);
document.body.appendChild(link);
link.click();
},
downLoadCode(id,name){
html2canvas(document.getElementById(id),{useCORS:true,logging:true}).then(canvas => {
canvas.toBlob(blob => {
this.downloadFile(blob,name);
}, "image/png");
});
},
如果要下载的部分有图片内容 需要 添加
使用 html2canvas 将页面中某一部分转为图片下载的更多相关文章
- config.js配置页面中的样式和图片路径
这个文章用在什么地方,我先说一下,上周啊,我接到一个任务.因为公司业务要对接不同的银行,例如在工行下颜色是红色的,在其他银行下默认为蓝色,所以在页面一致的情况下,保证页面中的按钮和ICON是可以配置的 ...
- C++ /Python 将视频中的片段转为图片
配置OpenCV :项目名称->右击->属性 VC++目录 包含目录 放 ...\build\include ...\build\include\opencv ...\build\ ...
- 浏览器中js怎么将图片下载而不是直接打开
网上找了好多方法都是不能用的,经过试验在Chrome中都是直接打开. 经过自己的摸索,找到了一套能用的解决方案 var database = "data:image/jpg;base64,& ...
- 用Seam实现:图片上传 + 保存到数据库 + 从数据库读出图片并显示到页面中
上传图片并保存到数据库 seam给我们提供了 s:fileUpload 标签以完成文件上传功能.使用该标签时,要在web.xml中声明一个Seam的过滤器: <filter> <fi ...
- vue中dom节点转图片
今天项目中有个需求,需要将页面的一部分转为图片,相当于存证之类的 然后我查阅了下百度,发现了几种可行的方法,特此来记录下 1.html2canvas插件 安装:npm install --save h ...
- Java 在Word中添加多行图片水印
Word中设置水印效果时,不论是文本水印或者是图片水印都只能添加单个文字或者图片到Word页面,效果比较单一,本文通过Java代码示例介绍如何在页面中添加多行图片水印效果,即水印效果以多个图片平铺到页 ...
- JS - 使用 html2canvas 将页面转PDF
JS - 使用 html2canvas 将页面转PDF 本方法可以将页面元素块转为pdf. 网站地址 jspdf.js 官网地址:http://jspdf.com GitHub 主页:https:// ...
- jsp页面中jstl标签详解
JSLT标签库,是日常开发经常使用的,也是众多标签中性能最好的.把常用的内容,放在这里备份一份,随用随查.尽量做到不用查,就可以随手就可以写出来.这算是Java程序员的基本功吧,一定要扎实. JSTL ...
- jsp页面中的代码执行加载顺序介绍
1. java是在服务器端运行的代码,jsp在服务器的servlet里运行,而javascript和html都是在浏览器端运行的代码.所以加载执行顺序是是java>jsp>js. 2. j ...
随机推荐
- 2019 CSP-S Ⅱ 游记
day0(试机) 第零天,重新打了一遍头文件和读优,熟悉了一下就匆匆走了. day1 T1一看到先把二分打了,然后发现long long要爆,好慌 主要是基础知识不够扎实,不知道unsigned lo ...
- 被一位读者赶超,手摸手 Docker 部署 ELK Stack
被一位读者赶超,容器化部署 ELK Stack 你好,我是悟空. 被奇幻"催更" 最近有个读者,他叫"老王",外号"茴香豆泡酒",找我崔更 ...
- Linux面试题 系统启动流程
BIOS:基本输入输出系统,帮助我们初始化硬件 硬盘分区有两类:MBR和GPT ; MBR单块硬盘不能大于2T,主分区的数量不能超过4个:MBR方案存储在第一个扇区的前446个字节(共512字节,后面 ...
- 诺塔斯读写卡QT SDK笔记
卡片操作函数调用 寻卡: Request --> LotusCardRequest 防撞处理: Anticollission --> LotusCardAnticoll 选卡: Selec ...
- KingbaseES 转义字符
在SQL标准中字符串是用单引号括起来的,在KingbaseES中遵守了该标准,如果在字符串中需要使用到单引号,就需要对其进行转义. 方式一:使用E和反斜杠进行转义 方式二:直接用一个单引号来转义 在K ...
- 【学习笔记】卷积神经网络 (CNN )
前言 对于卷积神经网络(cnn)这一章不打算做数学方面深入了解,所以只是大致熟悉了一下原理和流程,了解了一些基本概念,所以只是做出了一些总结性的笔记. 感谢B站的视频 https://www.bili ...
- 3.Ceph 基础篇 - RBD 块存储使用
文章转载自:https://mp.weixin.qq.com/s?__biz=MzI1MDgwNzQ1MQ==&mid=2247485253&idx=1&sn=24d9b06a ...
- Elasticsearch:运用 shard_size 来提高term aggregation的精度
- 使用kuboard界面管理k8s集群时使用ConfigMap挂载挂载到pod容器中,映射成一个文件夹
将 ConfigMap 作为一个数据卷(在挂载时不指定数据卷内子路径,需要指定ConfigMap的子路径)挂载到容器,此时 ConfigMap 将映射成一个文件夹,每一个 KEY 是文件夹下的文件名, ...
- KubeOperator安装好后默认会占用80端口,替换成其他端口
使用KubeOperator安装好k8s后,然后修改如下的配置文件,最后重启应用即可 重启:koctl restart