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

1.安装

npm install html2canvas --save

2.引入

import html2canvas from 'html2canvas'

3.在组件中使用的方法

createImg(){

let dom = document.getElementById("card");　//要转化的div

let 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方法，设置背景，字体重叠问题解决方法...相关推荐

如何在Word文档中同时为中文和西文分别设置不同字体
转载地址:https://mp.weixin.qq.com/s/l7tIfjqSL9_1eY6rK8-MPQ 背景:此处分两类情况进行介绍,基于Microsoft office 2007工具进行操作说 ...
vue样式中背景图片路径_vue-cli3.0全局less样式中该如何正确设置背景图片的路径？...
用vue-cli3脚手架新建的项目,在使用less设置背景图片的时候遇到了路径报错问题,该如何正确设置背景图片的路径? 项目目录如下: 现在在css文件中有一个全局样式common.less.使用的是 ...
java中JFrame去掉边框设置背景
在这里主要通过继承JPanel来定义一个backgoundPanel类,将其添加到JFrame中,来给他设置背景,这样做的好处是我们还可以在上面继续添加其他组件,如下(BackgruondPanel) ...
关于SpringMVC中text/plain的编码导致的乱码问题解决方法
有老铁的项目出现个问题,就是用SpringMVC给前台返回一句话,是String类型的,然后前台接收到是乱码. 然后以为是简单的response的编码问题,就在方法体中开始给response设置编码, ...
vbs 窗体文字获取文档_MDI类型窗体设置背景图片
MDI类型窗体设置背景图片 [实例介绍]本实例实现为多文档窗体设置背景图片的功能.运行程序,可以看到 MDI窗体显示的背景图片,可以打开子窗体.结果如图1.33所示. [开发过程] (1) 创建一个 ...
给HTML中的块元素设置背景图片
css中关于块元素的背景有 background 属性. background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图片和背景颜色的,background是一个复合属性 ...
金蝶EAS，分录表格中必录项设置背景颜色
分录表格含有必录字段时,对应的列设置必录标记,以下代码仅标记出背景颜色,并不能实现必录校验. 如需必录校验,还需在verifyInput(ActionEvent e)中编写业务校验逻辑. // 为分录 ...
iOS-UITextField中给placeholder动态设置颜色的四种方法
思路分析: 0.自定义UITextField 1.设置占位文字的颜色找-->placeholderColor,结果发现UITextField没有提供这个属性 2.在storyboard/xib中 ...
在word中调用CDR(coreldraw)图形，变形的问题解决方法介绍！
在平时写论文的过程中经常需要将CDR的矢量图片导入到word中,以保证图形的清晰度.但由于word和CDR的不兼容,经常出现图形变形的问题.比如文字无法显示.图片上出现黑线等问题.今天我来教大家一种简 ...
Android中对同一个TextView设置不同字体样式
这个只是做一个笔记,详情见代码: 代码中的注释也有说明. TextView textView = (TextView) findViewById(R.id.textView1);SpannableSt ...

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

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

最新文章

热门文章