html2canvas で破線境界線を実装する例

findDashedBorders = (ページ) => {
        定数 tds = page.querySelectorAll("td");
        定数境界線 = [];
        tds.forEach(td => {
            定数 computedStyle = window.getComputedStyle(td);
            const borderStyle = computedStyle.borderStyle ? computedStyle.borderStyle.split(' '): [];
            const dashedIndex = findAll(borderStyle, 'dashed');
            if (破線インデックス.長さ) {
                定数rect = td.getBoundingClientRect();
                破線インデックス.map(インデックス => {
                    定数境界 = {
                        直角、
                        境界線: dashedBorder[インデックス]
                    }
                    境界線をプッシュします。
                    td.style[`border${dashedBorder[index]}Color`] = '透明';
                });
            }
        });
        境界線を返します。
    }

const dashedBorder = ["上", "右", "下", "左"];

pages.forEach((ページ, idx) => {
    const 境界線 = this.findDashedBorders(ページ);
    定数 parentRect = page.getBoundingClientRect();
    html2canvas(ページ、{スケール: 2、ログ記録: false、使用CORS: true})。次に((キャンバス) => {
       this.drawDashedBorder(キャンバス、境界線、親Rect);
       ......
    })
})

破線境界線を描画 = (キャンバス、境界線、親矩形) => {
        var ctx = canvas.getContext("2d");
        ctx.setLineDash([6, 3]);
        ctx.strokeStyle = '#3089c7';
        ctx.lineWidth = 1;
        ctx.globalAlpha = 1;

        境界線.forEach(境界線 => {
            var left = (border.rect.left + 0.5 - parentRect.left)*2;
            var right = (border.rect.right - 0.5 - parentRect.left)*2;
            var top = (border.rect.top + 0.5 - parentRect.top)*2;
            var 下 = (border.rect.bottom - 0.5 - parentRect.top)*2;

            スイッチ (border.border) {
                ケース 'Top':
                    ctx.beginPath();
                    ctx.moveTo(左、上);
                    ctx.lineTo(右、上);
                    ctx.stroke();
                    壊す;
                ケース '右':
                    ctx.beginPath();
                    ctx.moveTo(右、上);
                    ctx.lineTo(右、下);
                    ctx.stroke();
                    壊す;
                ケース「下」:
                    ctx.beginPath();
                    ctx.moveTo(左、下);
                    ctx.lineTo(右、下);
                    ctx.stroke();
                    壊す;
                ケース '左':
                    ctx.beginPath();
                    ctx.moveTo(左、上);
                    ctx.lineTo(左、下);
                    ctx.stroke();
                    壊す;
                デフォルト：
                    壊す;
            }
        })
    }