vue使用html2canvas生成图片并保存到本地
2024-10-19 17:36:59
html2canvas官方文档
http://html2canvas.hertzen.com/
npm下载依赖
npm install html2canvas -S
在需要使用的地方引入
import html2canvas from 'html2canvas';
根据我司的需求,下载需要的html页面生成图片
//template
<div class="print " @click="generatorImage" >
<span>打印</span>
</div>
<div class="content" ref="addImage">
<div ref="capture" >
需要保存的html页面
</div>
</div> //js
methods: {
//点击生成图片
generatorImage() {
html2canvas(this.$refs.capture).then(canvas => {
// this.$refs.addImage.append(canvas);//在下面添加canvas节点
let link = document.createElement("a");
link.href = canvas.toDataURL();//下载链接
link.setAttribute("download","体检表.png");
link.style.display = "none";//a标签隐藏
document.body.appendChild(link);
link.click();
});
},
}
注意这里需要使用ref,如对ref不熟悉的可以看我的https://www.cnblogs.com/shcs/p/11914767.html
不驰于空想,不鹜于虚声
最新文章
- 妥协与取舍,解构C#中的小数运算
- ThreadPool.QueueUserWorkItem的用法
- 在Javascript中onclick()方法应用
- 【Java EE 学习 33 下】【validate表单验证插件】
- 第一个jave程序-helloworld
- oracle客户端精简绿色版-环境变量配置
- http错误码大全
- django - 好的 获取 参数值 方法
- 7.微软AJAX的解决方案
- 自己生成非官方iPhone toolchain的头文件
- 在Mac OS X下安装Android Studio
- eclipse设置和优化
- js中给函数传参函数时,函数加括号与不加括号的区别
- php图片上面写文字,输出图片
- POJ3484 Showstopper (二分+字符串处理)
- 2016_ThinkinG of everyDay
- NYOJ 300 &;amp;&;amp; hdu 2276 Kiki &;amp; Little Kiki 2 (矩阵高速功率)
- 1798: [Ahoi2009]Seq 维护序列seq
- 使用webgl(three.js)搭建一个3D建筑,3D消防模拟——第三课
- 从vue渲染想到的数组方法
热门文章
- 201871020225-牟星源 《面向对象程序设计(java)》课程学习进度条
- 201671030103 实验十四 团队项目评审&;课程学习总结
- Elasticsearch 报错:Fielddata is disabled on text fields by default. Set `fielddata=true` on [`your_field_name`] in order to load fielddata in memory by uninverting the inverted index.
- 产品上线后,出现BUG的处理流程
- LeetCode 1213. Intersection of Three Sorted Arrays
- Asp.Net报https请求报传输流收到意外的 EOF 或 0 个字节
- haproxy 配置文件详解 之 defaults
- Centos开发小计
- Java集合详解3:一文读懂Iterator,fail-fast机制与比较器
- 微信第三方平台代公众号发起网页授权 48001 api unauthorized 问题