html2canvas使用注意要点

作者：咕魂
日期：2025年1月13日

目录

• 注意事项
  
• 实现方法
  

注意事项

• 不要给svg加style属性，会导致实际布局与图片布局不一致
  
• 不要使用overflow：hidden属性，文本超出长度转换为省略号将无法使用
  

1. // 替换方案
2. // js限制字符串长度
3. formatStr(text) {
4.     let maxLength = 20;
5.     switch(this.col){
6.         case 2:
7.             maxLength = 20;
8.             break;
9.         case 3:
10.             maxLength = 15;
11.             break;
12.         case 4:
13.             maxLength = 12;
14.             break;
15.         case 5:
16.             maxLength = 10;
17.             break;
18.     }
19.     let currentWidth = 0;
20.     let truncatedText = '';
21.     let maxWidth = maxLength * 8;
22.     for (let char of text) {
23.         // 判断字符是中文字符（Unicode范围来大致判断）
24.         let pattern = /[^a-zA-Z0-9.,;:!?\-_@#$%^&*()+=<>{}[\]\/\\|]/;
25.         if (pattern.test(char)) {
26.             currentWidth += 13; // 假设中文字符宽度为16px，可根据实际字体调整
27.         } else {
28.             currentWidth += 8; // 假设英文字符宽度为8px，可根据实际字体调整
29.         }
30.         if (currentWidth <= maxWidth) {
31.             truncatedText += char;
32.         } else {
33.             return truncatedText + '...';
34.         }
35.     }
36.     return truncatedText;
37. }

复制代码

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！