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); }
えっと、これだけです.