jsエクスポートワードの詳細

まず全体の考えを理解します.
1、エクスポートdomノードを作成する
2、ページは直接エクスポートできません.スタイルは行の中のスタイルだけをサポートしますので、手動でdomノードを書き出さなければなりません.
3、echarグラフがあれば、まず静止画に変えて、el表は先に行の中の表に変えます.
4、画像サイズの変換

  dom   


    

        

              
        
      

  
 

内庫file-saverのダウンロードが必要です.インストールすればいいです.
コアコードをエクスポート

function exportWord(dom: Node, fileName: string, imgMinwidth?: number) {
    imgMinwidth = imgMinwidth ? imgMinwidth : 1024;
    setTimeout(() => {
        const randomStr = Math.random()
            .toString(36)
            .slice(-8)
            .toUpperCase();
        const header = {
            top: `MIME-Version: 1.0
Content-Type: multipart/related; boundary="----=_NextPart_01D59F91.${randomStr}"

------=_NextPart_01D59F91.${randomStr}
Content-Location: ${randomStr}.htm
Content-Transfer-Encoding: quoted-printable
Content-Type: text/html; charset="utf-8"

        `,
            head: `
        
        





        `, body: `
_body_


`
        };

        // Clone selected element before manipulating it
        const images = Array();
        const img = dom.find('img');
        for (let i = 0; i < img.length; i++) {
            // Calculate dimensions of output image
            let w = Math.min(img[i].width, imgMinwidth);
            let h = img[i].height * (w / img[i].width);
            // Create canvas for converting image to data URL
            const ramssP = Math.random()
                .toString(36)
                .slice(-8)
                .toUpperCase();
            // Save encoded image to array
            const uri = $(img[i]).attr('src');
            var canvas = document.createElement('CANVAS');
            canvas.width = w;
            canvas.height = h;
            // Draw image to canvas
            var context = canvas.getContext('2d');
            context.drawImage(img[i], 0, 0, w, h);
            // Get data URL encoding of image
            var dataUrl = canvas.toDataURL('image/png/jpg');
            images[i] = {
                type: uri.substring(uri.indexOf(':') + 1, uri.indexOf(';')),
                encoding: 'base64',
                location: ramssP + '.png',
                data: dataUrl.substring(dataUrl.indexOf(',') + 1)
            };
            // $(img[i]).attr('src', '' + ramssP + '.png'); //       
            $(img[i]).attr('src', dataUrl);

        }
        let mhtmlBottom = '

';
        for (var i = 0; i < images.length; i++) {
            mhtmlBottom += `------=_NextPart_01D59F91.${randomStr}
`;
            mhtmlBottom += 'Content-Location: ' + images[i].location + '
';
            mhtmlBottom += 'Content-Type: ' + images[i].type + '
';
            mhtmlBottom +=
                'Content-Transfer-Encoding: ' + images[i].encoding + '

';
            mhtmlBottom += images[i].data + '

';
        }
        mhtmlBottom += `------=_NextPart_01D59F91.${randomStr}--`;
        const jdoc = dom
            .html()
            .replace(/data-v-([\w|\d]+)=""/g, '')
            .replace(/rowspan=/g, 'rowspan=3D')
            .replace(/colspan=/g, 'colspan=3D')
            .replace(/style=/g, 'style=3D')
            .replace(/src=/g, 'src=3D')
            .replace(/href=/g, 'href=3D')
            .replace(/height=/g, 'height=3D')
            .replace(/width=/g, 'width=3D')
            .replace(/name=/g, 'name=3D');
        const sourceHTML =
            header.top +
            header.head +
            header.body.replace('_body_', jdoc) +
            mhtmlBottom;

        const blob = new Blob([sourceHTML], {
            type: 'application/vnd.ms-word;charset=utf-8'
        });
        
        saveAs(blob, fileName);

    }, 200);
}

えっと、これだけです.