js 导出word详解

首先了解下整个思路：

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 = '\n\n';
        for (var i = 0; i < images.length; i++) {
            mhtmlBottom += `------=_NextPart_01D59F91.${randomStr}\n`;
            mhtmlBottom += 'Content-Location: ' + images[i].location + '\n';
            mhtmlBottom += 'Content-Type: ' + images[i].type + '\n';
            mhtmlBottom +=
                'Content-Transfer-Encoding: ' + images[i].encoding + '\n\n';
            mhtmlBottom += images[i].data + '\n\n';
        }
        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);
}

哦了， 就这么点