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('截图成功');
});
作者:敲可耐的咕魂君原文地址:https://www.cnblogs.com/guhunjun/p/18668891

%s 个评论

要回复文章请先登录注册