vue使用html2canvas生成图片并保存到本地
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
不驰于空想,不鹜于虚声
vue使用html2canvas生成图片并保存到本地的更多相关文章
- 利用canvas将网页元素生成图片并保存在本地
利用canvas将网页元素生成图片并保存在本地 首先引入三个文件: 1.<script type="text/javascript" src="js/html2ca ...
- html生成图片并保存到本地方法(Windows)
// 最近用到一个保存html为图片到本地的功能(保存到下载目录),记之,该功能IE使用Blob 存储数据,关于兼容性问题参见如下表格,其他浏览器使用a标签download属性新功能下载 Browse ...
- vue开发--生成token并保存到本地存储中
首先回顾一下token:token认证是RESTFUL.api的一个很重要的部分,通过token认证和token设置,后端会有一个接口传给前台: http://localhost/yiiserver/ ...
- 用html5的canvas生成图片并保存到本地
原文:http://www.2cto.com/kf/201209/156169.html 前端的代码: [javascript] function drawArrow(angle) { ...
- canvas生成图片并保存到本地文件夹主要代码
js var url = canvas.toDataURL();//把canvas中的图片变成data:image C# string filepath = ""; string ...
- js截图及绕过服务器图片保存至本地(html2canvas)
今天要分享的是用html2canvas根据自己的需求生成截图,并且修复html2canvas截图模糊,以及绕过服务器图片保存至本地. 只需要短短的几行代码,就能根据所需的dom截图,是不是很方便,但是 ...
- 微信小程序导出当前画布指定区域的内容并生成图片保存到本地相册(canvas)
最近在学小程序,在把当前画布指定区域的内容导出并生成图片保存到本地这个知识点上踩坑了. 这里用到的方法是: wx.canvasToTempFilePath(),该方法作用是把当前画布指定区域的内容导出 ...
- Asp.Net 将HTML中通过dom-to-image.js标签div内的内容转化为图片保存到本地
由于客户的需求,将js写出来的一个统计能够保存到本地.作为码奴的我只能慢慢搬砖咯!一开始使用的是html2canvas.js.功能是可以实现,但是有缺陷.话不多说开始搞! 1.引入几个JS库 ①:jq ...
- 基于html2canvas实现网页保存为图片及图片清晰度优化
一.实现HTML页面保存为图片 1.1 已知可行方案 现有已知能够实现网页保存为图片的方案包括: 方案1:将DOM改写为canvas,然后利用canvas的toDataURL方法实现将DOM输出为包含 ...
随机推荐
- 201871010112-梁丽珍《面向对象程序设计(java)》第四周学习总结
项目 内容 这个作业属于哪个课程 <任课教师博客主页链接>https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 <作业链接地址>http ...
- c语言定义的几种易错的说明
int p; //一个整数 int p [5]; //一个包含5个整数的数组 int * p; //指向整数的指针 int * p [10]; //一个包含10个整数指针的数组 int ** p; / ...
- manjaro 安装 tim 后无法输入中文
cd /opt/deepinwine/tools sudo chmod 777 run.sh vim run.sh 在一开始的注释下输入 export GTK_IM_MODULE="fcit ...
- PATA1001A+BFormat
这里学到的主要是将数字存储到数组中,倒序输出使用取余10加除10 while(sum) { num[len++] = sum % 10; sum /= 10; } 然后是每三位输出一个逗号,因为是倒序 ...
- 学习spring源码-可参考的资料
剑指Spring源码(二) https://www.cnblogs.com/codebear/p/10374261.html 使用idea和gradle编译spring5源码https://blog. ...
- mongo 操作
1.链接mongo /path_to_mongo/bin/mongo MongoDB shell version: connecting to: test > use logs switched ...
- Maven 教程(13)— Maven插件解析运行机制
原文地址:https://blog.csdn.net/liupeifeng3514/article/details/79551210 这里给大家详细说一下Maven的运行机制,让大家不仅知其然,更知其 ...
- Linux之三剑客
LINUX之三剑客 本篇主要介绍linux下常用的增删改查工具: grep sed awk grep是linux下一个强大的搜索工具,几乎操作linux的用户每天都会或多或少的用到grep命令,单一个 ...
- linux系统命令别名,打造属于自己的个性linux系统
linux操作系统,个性化快捷命令,让你的系统更懂你,让你的操作更快捷. 在你使用linux操作系统的时候,有时候输入命令过长的话会显得很麻烦,这个时候,linux操作系统支持的命令别名很大程度上解决 ...
- excel绘制多列 其中一列作为横坐标 ; 数值拟合
excel绘制多列,其中最左列作为横纵坐标: 选中很多列,然后,,点击菜单栏的“插入”->“图标” -->在弹出的“插入图表”对话框中选择“X Y(散点图)”,默认是条形图. 左边的列会 ...