html2canvas使用注意要点
作者:咕魂
日期:2025年1月13日
注意事项
不要给svg加style属性,会导致实际布局与图片布局不一致
不要使用overflow:hidden属性,文本超出长度转换为省略号将无法使用
// 替换方案
// js限制字符串长度
formatStr(text) {
let maxLength = 20;
switch(this.col){
case 2:
maxLength = 20;
break;
case 3:
maxLength = 15;
break;
case 4:
maxLength = 12;
break;
case 5:
maxLength = 10;
break;
}
let currentWidth = 0;
let truncatedText = '';
let maxWidth = maxLength * 8;
for (let char of text) {
// 判断字符是中文字符(Unicode范围来大致判断)
let pattern = /[^a-zA-Z0-9.,;:!?\-_@#$%^&*()+=<>{}[\]\/\\|]/;
if (pattern.test(char)) {
currentWidth += 13; // 假设中文字符宽度为16px,可根据实际字体调整
} else {
currentWidth += 8; // 假设英文字符宽度为8px,可根据实际字体调整
}
if (currentWidth <= maxWidth) {
truncatedText += char;
} else {
return truncatedText + '...';
}
}
return truncatedText;
}
- 其他待补充
- 长度最大差不多是在2w像素
实现方法
CDN引入来源地址:html2canvas中文文档
// 需要转换为图片的元素:paper
html2canvas(document.querySelector(".paper")).then(canvas => {
// 显示截图效果
// document.body.appendChild(canvas);
// 下载canvas图片
const a = document.createElement("a");
a.download = `${this.date}.png`;
a.href = canvas.toDataURL("image/png");
a.click();
// 移除canvas
canvas.remove();
alert('截图成功');
});