html2canvas内联元素跨行背景bug与修复实例页面

JS代码：

<script src="./html2canvas.min.js"></script>
<script src="./jspdf.umd.min.js"></script>
<script type="module">
    import { exportPdf } from './exportPdf.js';
    // 出现问题的按钮
    button.onclick = function () {
        this.disabled = true;
        
        var pdf = new jspdf.jsPDF();
        exportPdf(target1, 'crossline-bug', () => {
            this.disabled = false;
        });
    };
    // 问题修复的按钮
    // 原理很简单，将有背景色的标签内容分配到所有字符上
    buttonFix.onclick = function () {
        this.disabled = true;

        // 标签处理
        // 实际开发，需要对 target2 元素进行克隆再处理
        // 以免影响原有的交互效果
        // 这里旨在演示，所以简单处理
        var mark = target2.querySelector('mark');
        if (mark) {
            var bgColor = getComputedStyle(mark).backgroundColor;
            var text = mark.textContent;
            // mark元素分配给所有的文本字符
            const arrTextNode = text.split('').map(char => {
                var span = document.createElement('span');
                span.textContent = char;
                span.style.backgroundColor = bgColor;
                return span;
            });
            mark.replaceWith.apply(mark, arrTextNode);
        }

        // 导出PDF
        var pdf = new jspdf.jsPDF();
        exportPdf(target2, 'crossline-fix', () => {
            this.disabled = false;
        }, true);
    };
</script>