vue中html导出到word

最新项目要实现个需求,数据导出到word格式的文档,所以就上github上找点思路,一看就发现了一个https://github.com/evidenceprime/html-docx-js,但是现在貌似进不去了,应该是需要翻墙了;

那就说说怎么使用html-docx-js来导出word吧!

第一步:安装必备包:

npm install html-docx-js -S
npm install file-saver -S

file-saver是用来保存文件的,也是必须安装的。

第二步:使用

现在script中导入,如下所示

import FileSaver from 'file-saver'
import htmlDocx from "html-docx-js/dist/html-docx"

方法使用:

//模板word导出
    exportWordTpl() {
        let contentHtml = document.getElementById("exportBox").innerHTML
      let cssHTML = `
    table {
    width: 100%;
    table-layout: fixed;
    margin-top:10px;
    border: 1px solid #ddd;
    border-collapse: collapse;
    }
    .export-tb .thead td {
    font-weight: bold;
    }
    td {
    border: 1px solid #ddd;
    color: #333;
    text-align: left;
    padding: 6px 10px;
    }
    `
      let content = `<!DOCTYPE html><html>
            <head>
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
                <style>
                    ${cssHTML}
                </style>
            </head>
            <body>
                ${contentHtml}
            </body>
            </html>`;
      let converted = htmlDocx.asBlob(content);
      FileSaver.saveAs(converted, '模块汇总表.docx');
    }

以上是我自己的项目案例,实际情况就按这样改基本就OK了,有一点要说的是,css样式可能不一定生效,我具体还没找到原因,可能有些样式不支持导致,需要实际使用的时候斟酌。

以上!

猜你喜欢

转载自blog.csdn.net/playboyanta123/article/details/115855767