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('截图成功');
});