vue中使用html2canvas方法，设置背景，字体重叠问题解决方法

1.安装

npm install html2canvas --save

2.引入

import html2canvas from 'html2canvas'

3.在组件中使用的方法

createImg(){let dom = document.getElementById("card");　//要转化的divlet width = dom.offsetWidth;let height = dom.offsetHeight;html2canvas(dom,{backgroundColor: null//无背景}).then(canvas => {canvas.style.width = width+"px";canvas.style.height = height+"px";var image = new Image();image.src = canvas.toDataURL();document.getElementById('content_img').appendChild(image)dom.style.display='none'});},

（1）设置无背景方法为{backgroundColor: null} ，设置背景图就是要转换的div的背景图

（2）字体重叠问题解决方法：

给文本设置css { text-align:justify } 或者 {text-align: left}；

文本标点符号需注意，全角和半角也会引起字体重叠，推荐使用全角。

（3）文本数据是接口动态获取，那就需要等数据获取完成之后再转换，用setTimeout延迟：

setTimeout(() => {this.createImg();
},1000)

vue中使用html2canvas方法，设置背景，字体重叠问题解决方法相关推荐

vue html2canvas文字重叠,vue中使用html2canvas方法，设置背景，字体重叠问题解决方法...
1.安装 npm install html2canvas --save 2.引入 import html2canvas from 'html2canvas' 3.在组件中使用的方法 createImg ...
vue中自适应rem的设置及vant组件库px自动修改为相对大小的方法两则（postcss-pxtorem和postcss-px-to-viewport）
一.vue中自适应rem的设置新建文件src/libs/rem.js function setRem() {// 750px为设计稿视口宽度字体大小默认18px;const screenWidth ...
如何在Word文档中同时为中文和西文分别设置不同字体
转载地址:https://mp.weixin.qq.com/s/l7tIfjqSL9_1eY6rK8-MPQ 背景:此处分两类情况进行介绍,基于Microsoft office 2007工具进行操作说 ...
php文字红色代码,IOS_IOS中一段文字设置多种字体颜色代码，给定range和需要设置的颜色， - phpStudy...
IOS中一段文字设置多种字体颜色代码给定range和需要设置的颜色,就可以给一段文字设置多种不同的字体颜色,使用方法如下: [self fuwenbenLabel:contentLabel Font ...
vue 中监听并设置scrollTop
vue 中监听并设置scrollTop 问题描述: 目前在做一个项目,父子组件以及兄弟组件中数据调用比较频繁.但是鉴于项目没那么大,就没有使用vuex.直接使用了this.$emit来给父级组件传递参 ...
20220809-PotPlayer如何设置默认字体色-设置默认字体色的方法
potplayer 第二字幕指定字幕颜色 potplayer 指定字幕颜色 https://www.kkpan.com/article/10014.html 20220809-PotPlayer如何 ...
Vue中父子及非父子组件之间的通信方法
Vue中父子及非父子组件之间的通信方法父子组件之间的通信方法父级->子级通信 (依赖单向数据绑定+props实现) Vue.component('Father', { //注册了含有data ...
html设计渐变的背景图片,html设置背景径向渐变的方法
html设置背景径向渐变的方法发布时间:2021-06-04 16:16:47 来源:亿速云阅读:91 作者:栢白这篇文章主要介绍了html设置背景径向渐变的方法,具有一定借鉴价值,需要的朋友可 ...
vue中使用element-ui 图标和阿里字体图标结合使用
vue中使用element-ui 图标和阿里字体图标结合使用 1 登录阿里字体图标官网 2 图标管理 --> 我的项目 --> 创建一个项目 3 开始搜有想要的图标添加到我的项目中 4 ...

vue中使用html2canvas方法，设置背景，字体重叠问题解决方法

vue中使用html2canvas方法，设置背景，字体重叠问题解决方法相关推荐

最新文章

热门文章